Web简单小结
一.HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应：
<h1 onclick="this.innerHTML='你点我干啥'">请点击这里</h1>
---------------------------------------------------------
<p onclick="changeText(this)"> 请点击这里</p>
<script type="text/javascript">
function changeText(id){
id.innerHTML='你点我干嘛123456！';
}
</script>
--------------------------------------------------------
2.使用 HTML DOM 来分配事件
<p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点击这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
3.onchange 事件常结合对输入字段的验证来使用。
<input type="text" id="demo" onchange="myFunction()" placeholder="请输入小写英文字母"/>
<p>当鼠标离开输入框时候，输入的字符串会变大写</p>
<script>
function myFunction(){
var text=document.getElementById('demo');
text.value=text.value.toUpperCase();
}
</script>
4.onmouseover 和 onmouseout 事件
<h1 onmousemove="over(this)" onmouseout="out(this)"
style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
</h1>
<script>
function over(id) {
id.innerHTML = "谢谢!";
}
function out(id) {
id.innerHTML = "回来";
}
</script>
5.onmousedown 和 onmouseup
当用户按下鼠标按钮时，更换一幅图像。
<script>
function lighton()
{
document.getElementById('myimage').src="/i/eg_bulbon.gif";
}
function lightoff()
{
document.getElementById('myimage').src="/i/eg_bulboff.gif";
}
</script>
</head>
<body>
<img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="/i/eg_bulboff.gif" />
<p>按住鼠标不放可以点亮这盏灯！</p>
6.onfocus
当输入字段获得焦点时，改变其背景色。
<script>
function myFunction(x)
{
x.style.background="yellow";
}
</script>
</head>
<body>
请输入英文字符：<input type="text" onfocus="myFunction(this)">
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>
二.DOM节点操作：
1.如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var para=document.createElement("p");
//设置节点属性
para.setAttribute("id", "new");
para.setAttribute("class", "pl");
para.setAttribute("src",'./img/1.jpg');
para.setAttribute("width","200");
para.setAttribute("height","200");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
2.删除已有的 HTML 元素
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
三.JavaScript循环：
使用 For...In 声明来遍历数组内的元素
var x
var mycars = new Array()
mycars[0] = "宝马"
mycars[1] = "奔驰"
mycars[2] = "宾利"
for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
四.高级JavaScript:
1.检测浏览器及版本
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
document.write("浏览器名称："+ browser)
document.write("<br />")
document.write("浏览器版本："+ version)
2.简单的计时：
<input type="button" value="2秒计时" onclick="setTime()"/>
<p>请点击上面按钮，几秒后会发生弹出框</p>
<script type="text/javascript">
function setTime(){
var t=setTimeout("alert('2 秒！')",2000)
}
</script>
3.无线循环计时：
<input type="button" value="开始计时" onclick="setTime()"/>
<input type="text" id="txt"/>
<p>请点击上面按钮，就开始计时了</p>
<script type="text/javascript">
var s=0;
var t;
function setTime(){
document.getElementById('txt').value=s;
s=s+1;
t=setTimeout("setTime()",1000);
}
</script>
4.带有停止的时间计时：
<input type="button" value="开始计时" onclick="setTime()"/>
<input type="text" id="txt"/>
<input type="button" value="停止计时！" onClick="stopCount()">
<p>请点击上面按钮，就开始计时了</p>
<script type="text/javascript">
var s=0;
var t;
function setTime(){
document.getElementById('txt').value=s;
s=s+1;
t=setTimeout("setTime()",1000);
}
function stopCount(){
// c=0;
setTimeout("document.getElementById('txt').value=c",0);
clearTimeout(t);
}
</script>
5.使用计时事件制作的钟表:
<div id="txt"></div>
<script type="text/javascript">
function startTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout("startTime()",50)
}
function checkTime(i){
if (i<10) {
i="0" + i
}
return i
}
</script>
6.显示今天是星期几：
<script type="text/javascript">
var s=new Date();
var week=new Array;
week[0]='周日';
week[1]='周一';
week[2]='周二';
week[3]='周三';
week[4]='周四';
week[5]='周五';
week[6]='周六';
document.write("今天是："+week[s.getDay()]+"<br />");
document.write("今天是："+s.getDay());
</script>
