实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript基础第四章</title>
</head>
<style>
.las{width: 800px;margin: 60px auto;}
table{width: 800px;border: 1px solid #ccc;border-collapse: collapse;}
td,tr{border: 1px solid #ccc;text-align: center;height: 30px;}
</style>
<body>
<div class="las">
<table>
<thead>
<tr>
<th>选择</th>
<th>我是这里的标题</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>
<button onclick="checkAll()">全选</button>
<button onclick="outcheked()">反选</button>
</div>
<script>
// 隔行换色原理:奇数行和偶数行赋予不同的背景色
// 定义函数
function has(){
//定义变量将其存储于hastd 获取标签tbody找到第一个为0即为1以及他的tr
var hastd = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr");
//将上面的代码进行遍历出找出他的个数
// 获取到hastd变量的长度
for(var i=0;i<hastd.length;i++){
//if进行判断奇数和偶数
if(i%2){
hastd[i].style.background="#ccc";
}else{
hastd[i].style.background="#aaa";
}
}
}
has();
// 全选
function checkAll(){
var clsName =document.getElementsByName("list");
for(var i=0;i<clsName.length;i++){
clsName[i].checked =true;
}
}
// 反选
function outcheked(){
var clsName =document.getElementsByTagName("input");
for(var i=0;i<clsName.length;i++){
if(clsName[i].checked){
clsName[i].checked =false;
}else{
clsName[i].checked =true;
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>换色</title>
</head>
<body>
<button onclick="bgrgb()">切换背景颜色</button>
<script>
//四舍五入round
// var a=Math.round(4.3);
// document.write(a);
// Math.random()获取0-1随机数
// document.write(Math.random());
// floor返回大于等于本身的值的数字
// var b = Math.floor(3);
// document.write(b);
// var b=Math.floor(Math.random()*10+1);
// document.write(b);
//bg rgb
// toString() 方法可把一个逻辑值转换为字符串，并返回结果。
function bgrgb(){
var bg ="#";
// 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('body')[0].style.background=bg;
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>日期倒计时跳转</title>
</head>
<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;
text-align: center;
}
</style>
<body>
<button onclick="alert(dateNew())">单日期</button>
<button onclick="alert(getTime())">双日期</button>
<p>还剩<span>5</span>秒跳转至<a href="http://www.php.cn/">php中文网</a></p>
<script>
// 获取当前如期
function dateNew(){
var dateAls = new Date();//获取当前如期
//获取年 月 日
var dateY = dateAls.getFullYear();
var dateM = dateAls.getMonth()+1;
var dateD =dateAls.getDate();
return dateY+'-'+dateM+'-'+dateD;
}
//双击显示时间
function getTime(){
var s=new Date;
// 获取小时 getHours()
var h = s.getHours();
// 获取分钟 getMinutes()
var f = s.getMinutes();
// 获取秒 getSeconds()
var m =s.getSeconds();
return h+':'+f+':'+':'+m;
}
//倒计时
//获取到span
var aspan = document.getElementsByTagName('span')[0];
//定义参数值
var i=4;
//函数
function laas(){
//判断值的区间
if (i>0) {
// 如果i的值1大于0那么修改的值为i
aspan.innerHTML=i;
i--;
} else{
window.location.href="http://www.php.cn/";
}
}
setInterval("laas()",1000)
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
