实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现全选反选及各行换色</title>
<style type="text/css">
div{width: 600px;height: 30px;margin: 20px auto;}
table{
border: 1px solid #ccc;
border-collapse: collapse;
width: 600px;height: 30px;
}
td{
text-align: center;
border: 1px solid #ccc;
/*padding: 0px 60px;
}*/
</style>
</head>
<body>
<div>
<p>
<button onclick="chekall()">全选</button>
<button onclick="chekfan()">反选</button>
</p>
<table>
<thead>
<td colspan="2">标题</td>
<td>状态</td>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="list"></td>
<td>标题内容</td>
<td>阅读状态</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>标题内容</td>
<td>阅读状态</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>标题内容</td>
<td>阅读状态</td>
</tr>
<tr>
<td><input type="checkbox" name="list"></td>
<td>标题内容</td>
<td>阅读状态</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
function backcolor() {
var listtr=document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
/*var list=trlist.getElementsByTagName("tr");*/
for (var i=0; i<listtr.length; i++) {
if(i%2){
listtr[i].style.background="#ddd";
}else{
listtr[i].style.background="#aaa";
}
}
}
backcolor();
function chekall(){
var ckall=document.getElementsByName("list");
for (var i = ckall.length - 1; i >= 0; i--) {
ckall[i].checked=true;//全选
}
}
function chekfan(){
var ckall=document.getElementsByName("list");
for (var i = ckall.length - 1; i >= 0; i--) {
if(ckall[i].checked){
ckall[i].checked=false;//返选
}else{
ckall[i].checked=true;
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
二、使用Math对象，实现背景随机换色
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现全选反选及各行换色</title>
<style type="text/css">
div{width: 600px;height: 300px;
background: red;
margin: 20px auto;
}
</style>
</head>
<body>
<div>
<button onclick="swichcolor()">点击随机产生背景色</button>
</div>
<script type="text/javascript">
//var a=Math.round(3.4);//取4舍5入
//var a=Math.random();//取0-1的随机数.//取得介于 1 到 10 之间的一个随机数
// var c=Math.floor((Math.random()*10)+1);
//取得介于 1 到 100 之间的一个随机数
// var d=Math.floor((Math.random()*100)+1)
// var a=Math.floor(2.3);//取小于该值的最大整数,如果传递的参数是一个整数，该值不变
// document.write(a);
function swichcolor(){
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.getElementsByTagName("div")[0].style.background=bg;
}
swichcolor();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
三、设计倒计时，自动跳转百度网站
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期对象、倒计时</title>
<style type="text/css">
.tz{
background: rgba(236,236,236,0.3);
margin: 20px auto;
width: 600px;
height: 60px;
border:1px solid #ccc;
border-radius: 30px;
font-size: 20px;
}
span{
color: red;
font-size: 30px;
}
p{
width: 600px;
height: 60px;
text-align: center;
float: left;
margin: 10px auto;
}
</style>
</head>
<body>
<div>
<button onclick="oneclick()">单击获得时间</button>
<button onclick="twoclick()">双击获得时间</button>
</div>
<div class="tz">
<p>剩余<span>5</span>秒，即将转入百度网站。</p>
</div>
<script type="text/javascript">
//获取年月日
function oneclick() {
var daytime=new Date();
//document.write(daytime);
var year=daytime.getFullYear();
//console.log(year);
var month=daytime.getMonth()+1;
//document.write(month);
var day=daytime.getDate();
//document.write('<br>'+day);
document.write(year+'-'+month+'-'+day);
}
//获取时分秒
function twoclick(){
var time=new Date();
var h=time.getHours();
var s=time.getMinutes();
var m=time.getSeconds();
document.write(h+'/'+s+'/'+m);
}
var sp=document.getElementsByTagName('span')[0];
var i = 5;
function fn(){
if(i >0) {
sp.innerHTML=i;
i--;
}else{
window.location.href="http://www.baidu.com";
}
}
setInterval("fn()",1000);//1秒调用一次函数fn()
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、设计国庆节倒计时
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五一国际劳动节倒计时</title>
<style type="text/css">
.tz{
background: rgba(82,82,80,0.6);
margin: 20px auto;
width: 600px;
height: 170px;
border:1px solid #ccc;
border-radius: 30px;
font-size: 30px;
}
span{
color: red;
font-size: 60px;
}
p{
width: 600px;
height: 160px;
text-align: center;
float: left;
margin: 0px auto;
line-height: 160px;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="tz">
<p>距离劳动节还有<span></span>天！</p>
</div>
<script type="text/javascript">
var sp=document.getElementsByTagName('span')[0];
function twoclick(){
var timea=new Date(2019,4,5);//写日期格式为2019,4,5
var timeb=new Date(2019,5,1);
//获得时间差，毫秒计算
var datea=(timeb.getTime()-timea.getTime())/(1000*60*60*24);//计算时间差，得出的结果为毫秒，需要除以1000*60*60*24，才转化为相差天
//document.write(datea);
sp.innerHTML=datea;
}
setInterval("twoclick()",1000);//1秒调用一次函数fn()
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例