1.画一个正方形,双数点击为红色,单数点击为绿色;
<body>
<div></div>
<script type = "text/javascript">
var div = document.getElementsByTagName('div')[0];
div.style.width = "100px";
div.style.height = "100px";
div.style.backgroundColor = "red";
var count = 0;
div.onclick = function () {
count++;
if(count % 2 == 1){
this.style.backgroundColor = "green";
}
else{
this.style.backgroundColor = "red";
}
}
</script>
</body>
2.选项卡编写
<style type = "text/css">
.content{
display: none;
width:100px;
height:200px;
border:1px solid red;
}
.active{
background-color:yellow;
}
</style>
</head>
<body>
<div class = "wrapper">
<button class = "active">1</button>
<button>2</button>
<button>3</button>
<div class = "content" style = "display: block">1</div>
<div class = "content">2</div>
<div class = "content">3</div>
</div>
<script type = "text/javascript">
var btn = document.getElementsByTagName('button');
var div = document.getElementsByClassName('content');
for(var i = 0;i < btn.length;i ++){
(function (n) {
btn[n].onclick = function () {
for (var j = 0; j < btn.length; j++) {
btn[j].className = "";
div[j].style.display = "none";
}
this.className = "active";
div[n].style.display = "block";
}
}(i))
}
</script>
</body>
3.会动的方块
<body>
<script type = "text/javascript">
//创建一个div
var div = document.createElement('div');
document.body.appendChild(div);
div.style.height = "100px";
div.style.width = "100px";
div.style.backgroundColor = "red";
div.style.position = "absolute";
div.style.left = "0";
div.style.top = "0";
//定时器功能
var speed = 1;
var timer = setInterval(function () {
speed += speed/20;
div.style.left =parseInt(div.style.left) + speed + "px";
div.style.top = parseInt(div.style.top)+ speed + "px";
if(parseInt(div.style.top)>200&&parseInt(div.style.left)>200)
{
clearInterval(timer);
}
},10);
</script>
4.鼠标控制方块移动
<body>
<button style = "width:100px;height:50px;background:linear-gradient(to left,#999,#000,#432,#fcc);
position:fixed;right:0;top:50%;text-align: center;line-height: 50px;color:white;font-size: 25px;
font-family:Arial;">加速</button>
<script type = "text/javascript">
var btn = document.getElementsByTagName('button')[0];
//创建一个div
var div = document.createElement('div');
document.body.appendChild(div);
div.style.height = "100px";
div.style.width = "100px";
div.style.backgroundColor = "red";
div.style.position = "absolute";
div.style.left = "0";
div.style.top = "0";
var speed = 5;
btn.onclick = function () {
speed++;
}
document.onkeydown = function (e) {
switch(e.which) {
case 38:
div.style.top = parseInt(div.style.top)-speed+"px";
break;
case 40:
div.style.top = parseInt(div.style.top)+speed+"px";
break;
case 37:
div.style.left = parseInt(div.style.left)-speed+"px";
break;
case 39:
div.style.left = parseInt(div.style.left)+speed+"px";
}
}
</script>
</body>
5.操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查找表单控件</title>
<script type = "text/javascript">
function operatorform(){
var myform = document.forms[0];
//alert(myform.method);
myform.submit();
}
</script>
</head>
<body>
<form id = "myform" action=" " method = "GET" target = "_blank">
<input name = "username" type = "text" value = "liuxinjing">
<input name = "password" type = "text" value = "123">
<select name = "city">
<option value = "shanghai">上海</option>
<option value = "nanjing" selected = "selected">南京</option>
</select><br/>
<input type = "button" value = "获取表单第一个控件"
onclick = "alert(document.getElementById('myform').elements[0].value);"/>
<input type = "button" value = "获取表单第二个控件"
onclick = "alert(document.getElementById('myform').elements['password'].value);"/>
<input type = "button" value = "获取表单第三个控件"
onclick = "alert(document.getElementById('myform').city.value);"/>
<input type = "button" value = "操作表单" onclick = "operatorform()"/>
</form>
</body>
</html>