标签：javascript
1、直接在html中写js代码
<input type="button" onclick="alert(‘aaa‘);"/>
2、定义一个函数赋值给html中元素的on_xxx_属性
<input type="button" onclick="f1();"/>
3、通过javascript注册
document.getElementById(‘btn‘).onclick=f1;
document.getElementById(‘btn‘).onclick=function(){};4、特殊事件onload
onload=function(){};//在页面加载后再执行问题：代码一定在onload中吗？
（1）如果js代码需要操作页面上的元素，则将该代码放到onload里面；因为当页面加载完毕之后页面上才会有相关的元素
（2）如果js代码中没有操作页面元素的语句，则可以将该代码直接写在<script>标签中。例如，声明变量、相加求和等操作
<body> <!--html标签--> <script type="text/javascript"> 写在这里的代码，由于已经是页面的底部，在执行该代码时，页面的元素已经都加载完毕， 所以可以不放到onload里面，也可以操作页面上的元素。 建议将操作页面元素的代码都放到onload里面。 </script> </body>
5、关于this
this就是触发事件的对象
只有在“事件响应函数”中才能使用this获得发生事件的控件，在“事件响应函数”调用的函数中不能使用。
示例一：this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
function f1(){
alert(this.id);
alert(this == window);
}
onload=function(){
document.getElementById(‘btn1‘).onclick=f1;
};
</script>
</head>
<body>
<input type="button" value="第一个按钮" id="btn1"/><!--btn1,false-->
<input type="button" value="第二个按钮" id="btn2" onclick="window.f1()"/><!--undefined,true-->
<input type="button" value="第三个按钮" id="btn3" onclick="f1.apply(document.getElementById(‘btn1‘))"/><!--btn1,false-->
</body>
</html>效果图
示例二：走马灯
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
var sid;
onload = function () {
document.getElementById("btnStart").onclick = function(){
sid = setInterval(function () {
var title = document.title;
document.title = title.substr(1) + title.charAt(0);
},500);
}
document.getElementById(‘btnStop‘).onclick=function(){
clearInterval(sid);
}
};
</script>
</head>
<body>
<input type="button" id="btnStart" value="开始"/>
<input type="button" id="btnStop" value="停止"/>
</body>
</html>效果图
示例代码三：动起来
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
var setId;
onload = function(){
document.getElementById(‘btnStart‘).disabled=false;
document.getElementById(‘btnStop‘).disabled=true;
document.getElementById(‘btnStart‘).onclick=function(){
//获取层
var divObj = document.getElementById(‘div1‘);
divObj.style.position = ‘absolute‘;//脱离文档流
setId = setInterval(function(){
divObj.style.left = Math.random() * 100 + ‘px‘;
divObj.style.top = Math.random() * 100 + ‘px‘;
},500);
this.disabled = true;
document.getElementById(‘btnStop‘).disabled=false;
};
document.getElementById(‘btnStop‘).onclick=function(){
clearInterval(setId);
this.disabled = true;
document.getElementById(‘btnStart‘).disabled=false;
};
};
</script>
</head>
<body>
<input type="button" id="btnStart" value="开始"/>
<input type="button" id="btnStop" value="结束"/>
<div id="div1" style="border:solid 1px red;width:300px;height:150px;"></div>
</body>
</html>效果图
标签：javascript
原文地址：http://lsieun.blog.51cto.com/9210464/1844567
