JavaScript 基础第三章 2019-3-28

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.main{width:800px;margin: 50px auto;}
table{width: 800px;border: 1px solid #ccc;border-collapse: collapse}
td{border: 1px solid #ccc;}
.jump{width:500px;height:50px;margin:20px auto;text-align: center;}
.jump span{font-size: 30px;color:red;}
.jump a{text-decoration: none;color: brown;}

</style>
</head>
<body class="b" name="bb" id="bbb">
<div class="main">


<p>
<button onclick="alert(getDates())">单击获取日期</button>
<button ondblclick="alert(getTimes())">双击获取时间</button>
</p>


<p><button onclick="bgc()">点击随机获取背景色</button></p>


<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>
<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>


<p class="jump">
还剩 <span>5</span> 秒跳转至
<a href="http://www,php.cn/">PHP中文网</a>

</p>

<script type="text/javascript">

// --------------点击随机获取背景色----------------
function bg_Color(){
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';
}
}
}
bg_Color();

//-------------------全选----------------------
function checkAll(){
var objList = document.getElementsByName('list');
for(var i = 0;i<objList.length;i++){
objList[i].checked='true';
}
}

//--------------------反选----------------------
function checkOut() {
var objList = document.getElementsByTagName('input');
for(var i = 0;i<objList.length;i++){
if(objList[i].checked){
objList[i].checked=false;
}else{
objList[i].checked=true;
}
}
}
//--------------------随机获取背景色-------------------

function bgc(){
var a = '#';
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);
a+=r+g+b;
// document.getElementsByTagName('body')[0].style.background=a;
// document.getElementsByClassName('b')[0].style.background=a;
// document.getElementsByName('bb')[0].style.background=a;
document.getElementById('bbb').style.background=a;
}

// -----------------获得当前日期-------------------
function getDates(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var dota = d.getDate();
return year+'-'+month+'-'+dota;
}

//-----------------获得当前时间----------------------
function getTimes(){
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
return h+':'+m+':'+s;
}

//----------------倒计时自动跳转---------------------
var i = 4 ;
var k = document.getElementsByTagName('span')[0];
function jump(){
if(i>0){
k.innerHTML = i;
i--;
}else {
window.location.href='http://www.php.cn';
}
}
setInterval('jump()',1000);

</script>

</body>
</html>

JavaScript 基础 第三章 2019-3-28

相关文章