全选
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选</title>
<style type="text/css">
.box{width: 120px;height: 250px;border: 1px solid #000;border-radius: 5px;padding: 5px 10px;margin: 20px auto;}
.box div{border-bottom: 1px solid #000;padding-bottom: 10px;margin-bottom: 8px;}
.box input{margin: 8px;}
</style>
<script type="text/javascript">
function checkAll() {
var checkall,item;
checkall=document.getElementById('checkall')//获取全选
item=document.getElementsByName("item[]")//获取下面的勾选框
for(var i=0;i<item.length;i++) {
if(checkall.checked){
item[i].checked=true;
}else{
item[i].checked=false;
}
}
}
</script>
</head>
<body>
<div class="box">
<div>
<input type="checkbox" id="checkall" onclick="checkAll()"><label for="checkall">全选</label>
</div>
<input type="checkbox" name="item[]">选项1<br>
<input type="checkbox" name="item[]">选项2<br>
<input type="checkbox" name="item[]">选项3<br>
<input type="checkbox" name="item[]">选项4<br>
<input type="checkbox" name="item[]">选项5<br>
<input type="checkbox" name="item[]">选项6<br>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
随机色
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math对象（随机色）</title>
</head>
<body>
<button onclick="bg_Color()">随机色</button>
<div id="main" style="width: 100px;height: 100px;border-radius: 50%;"></div>
<script>
//mathd对象作用：执行普通的算术任务
//math对象提供多种算术值类型和函数，无需在使用这个人对象之前进行定义
//round()方法可把一个数字舍入为最接近的整数
// var a=Math.round(2.6);
// document.write(a+"<br>")
// document.write(Math.random()+"<br>");
// // floor()方法返回小于等于x的最大整数
// var b=Math.floor(3.8)
// document.write(b+"<br>");
// var c=Math.floor((Math.random()*10)+1);
// document.write(c+"<br>");
// var d=Math.floor((Math.random()*100)+1);
// document.write(d+"<br>");
function bg_Color(){
var bg="#"//背景色
var r=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var g=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
var b=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
bg+=r+g+b;
document.getElementById('main').style.background=bg;
}
// bgColor()
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
倒数计时
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p{
height: 50px;
width: 300px;
margin: 100px auto;
}
span{
display: inline-block;
height: 50px;
width: 50px;
line-height: 50px;
font-size: 50px;
color: #f00;
}
</style>
</head>
<body>
<button onclick="alert(getDates())">单击显示日期</button>
<button onclick="getTimes()">单击显示时间</button>
<div id="sj"></div>
<p>
还剩：<span>5</span>跳转至 百度
</p>
<script>
//日期对象是用以处理日期和时间的
// var d=new Date();
// document.write(d);
function getDates() {
var d=new Date()
var year=d.getFullYear()//获取年
var moth=d.getMonth()+1//获取年
var date=d.getDate()//获取年
return year+'/'+moth+"/"+date;
}
function getTimes(){
var d=new Date()
var h=d.getHours()
var m=d.getMinutes()
var s=d.getSeconds()
var sj=document.getElementById('sj')
sj.innerHTML=h+'/'+m+'/'+s
}
//倒数计时
var i=4;
function fn(){
Espan=document.getElementsByTagName('span')[0];
if (i>0) {
Espan.innerHTML=i;
i--;
}else{
window.location.href="https://www.baidu.com"
}
}
setInterval("fn()",1000)
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结
全选结合vip课程，写出点击勾选全选
随机色，案例用到改变单个div
倒数计时，案例小改动