1案例演练
a 隔行换色，全选，反选
实例
<!DOCTYPE html>
<html>
<head>
<title>javascript学习-隔行换色</title>
<meta charset="utf-8">
<!-- <script type="text/javascript" src="static/a.js"></script> -->
<style type="text/css">
div{
margin: 20px auto;
width: 800px;
}
table{
width: 800px;
border: 1px solid #ccc;
border-collapse: collapse;
}
td{
height: 30px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body >
<div>
<p>
<button onclick="checkAll()" >全选</button>
<button onclick="checkRe()" >反选</button>
</p>
<table>
<thead>
<tr>
<th colspan="2">标题</th>
<th>状态</th>
</tr>
</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 bgColor(){
var trList=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var i = 0; i < trList.length; i++) {
if (i%2) {
trList[i].style.background="#D0D8E8";
}else{
trList[i].style.background="#f2f2f2";
}
}
}
bgColor();
//全选
function checkAll(){
var objList=document.getElementsByName('list');
for (var i = 0; i < objList.length; i++) {
objList[i].checked=true;
}
}
// 反选
//可以用ByName来选择input的名字list，也可以用ByTagName来选择input
function checkRe(){
var objList=document.getElementsByName('list');
for (var i = 0; i < objList.length; i++) {
if(objList[i].checked){
objList[i].checked=false;
}else{
objList[i].checked=true;
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
b换背景颜色Math的方法集，以及进制的转换
实例
<!DOCTYPE html>
<html>
<head>
<title>javascript学习-隔行换色</title>
<meta charset="utf-8">
<!-- <script type="text/javascript" src="static/a.js"></script> -->
</head>
<body >
<div>
<button onclick="bg_Color()">随机颜色</button>
</div>
<script type="text/javascript">
// 四舍五入
// var a=Math.round(2.8);
// // 0-1之间的随机小数
// var b=Math.random();
// // 取整
// var c=Math.floor();
// // 1-10之间的随机整数
// var d=Math.floor((Math.radom)*10+1);
// 随机色
function bg_Color(){
var bg="#";
var r=Math.floor(Math.random()*160).toString(16);//转换成16进制数
var g=Math.floor(Math.random()*160).toString(16);
var b=Math.floor(Math.random()*160).toString(16);
bg += r+g+b;
document.getElementsByTagName('body')[0].style.background=bg;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
c 时间的获取，以及倒计时的实现
如何结合html实现理想的效果；
实例
<!DOCTYPE html>
<html>
<head>
<title>倒计时</title>
<meta charset="utf-8">
<!-- <script type="text/javascript" src="static/a.js"></script> -->
<style type="text/css">
h5{
margin: 50px auto;
width: 300px;
font-size: 50px；
}
p{
margin: 100px auto;
width: 300px;
height: 300px;
}
#countdown{
display: inline-block;
width: 50px;
height: 50px;
text-align: center;
font-size: 30px;
color: red;
}
a{
text-decoration: none;
}
</style>
</head>
<body >
<!-- <button onclick="getDate()">当前时间是</button> -->
<p>当前时间：<span id="d"></span><br><br>
还剩<span id="countdown">8</span>秒跳转至<a href="www.php.cn"> php中文网</a> </p>
<script type="text/javascript">
function getDate(){
var d=new Date();
var year=d.getFullYear();
var month=(d.getMonth()+1);//月数从0开始，用时要+1，星期类似；
var date=d.getDate();
var hour=d.getHours();//0-23的整数
var min=d.getMinutes();//0-59
var sec=d.getSeconds();
document.getElementById("d").innerHTML= year+"-"+fnW(month)+"-"+fnW(date)+" "+fnW(hour)+":"+fnW(min)+":"+fnW(sec);
}
getDate();
function fnW(num){
num=(num<10)?"0"+num:num;
return num;
}
var i=8;
function fn(){
if(i>0){
document.getElementById('countdown').innerHTML=i;
i--;
}else{
window.location.href="http://www.php.cn/"
}
}
setInterval("fn()",500);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例