收藏
批改状态：未批改
老师批语：
今天我们将基础的知识运用到案例中，练习了隔行换色、全选、随机色、倒计时，下面是我根据老师课堂上的内容所做的练习：
1、隔行换色、全选
<!DOCTYPE html>
<html>
<head>
<title>JavaScript全选(隔行换色)</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
.main{
width:800px;
margin:100px auto;
}
table{
width:800px;
border:1px solid #ccc;
border-collapse:collapse;
}
td{
border:1px solid #ccc;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<p>
<button onclick="checkAll()">全选</button>
<button onclick="checkOut()"">反选</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>
<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="pink";
}
}
}
bgColor();
// 全选
function checkAll(){
var objlist=document.getElementsByName("list");
for(var i=0;i<objlist.length;i++){
objlist[i].checked=true;
}
}
// 反选
function checkOut(){
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>点击 "运行实例" 按钮查看在线实例
2.随机色
<!DOCTYPE html>
<html>
<head>
<title>Math对象(随机色)</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
</head>
<body>
<button onclick="bg_color()">点击产生随机颜色</button>
<script type="text/javascript">
function bg_color(){
var bg="#";
var rgb=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10)+Math.floor(Math.random()*10);
bg+=rgb;
document.getElementsByTagName('body')[0].style.background=bg;
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.日期对象
<!DOCTYPE html>
<html>
<head>
<title>日期对象(倒计时)</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style type="text/css">
</style>
</head>
<body>
<button onclick="alert(getDates())">单击显示日期</button>
<script>
function getDates(){
var d=new Date();
var year=d.getFullYear();
var month=d.getMonth()+1;
var date=d.getDate();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
return year+'-'+month+'-'+date+' '+h+':'+m+':'+s;
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<style>
p{
width:500px;
margin:300px auto;
font-size:30px;
}
span{
display:inline-block;
width:80px;
height:80px;
font-size:80px;
line-height:80px;
text-align:center;
color:blue;
}
a{
list-style:none;
text-decoration:none;
color:red;
}
</style>
</head>
<body>
<p>
还有<span>5</span>秒跳转至
<a href="http://www.php.cn/">PHP中文网</a>
</p>
<script>
var Espan=document.getElementsByTagName("span")[0];
var i=4;
function fn(){
if(i>0){
Espan.innerHTML=i;
i--;
}else{
window.location.href="http://www.php.cn/"
}
}
setInterval("fn()",1000)
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：今天我们将基础的知识运用到案例中，让我们有了更深入的了解，多加练习，才能让我们有更好的掌握，虽然还不能很好的运用到实际的事例中，但多加练习，还是可以掌握的。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
