实例 全选 反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
table{border:1px solid #ccc;width: 600px;margin:50px auto;border-collapse:collapse;}
td{border:1px solid #ccc;padding:20px;text-align:center;}
button{border:none;background: rgba(50, 80, 70, 0.7);color:#fff;padding:10px 40px;border-radius:10px;cursor:pointer;outline:none}
button:hover{background: rgba(50,80,60,.8)}
</style>
</head>
<body>
<table>
<thead>
<tr>
<td>选择</td>
<td>姓名</td>
<td>年龄</td>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name=""></td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td>小明</td>
<td>20</td>
</tr>
<tr>
<td><input type="checkbox" name=""></td>
<td>小明</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">
<button type="" onclick="checkAll();">全选</button>
<button type="" onclick="inverseAll();">反选</button>
</td>
</tr>
</tfoot>
</table>
<script>
var obj=document.getElementsByTagName('tbody')[0].getElementsByTagName('input');
function checkAll(){
for(var i=0;i<obj.length;i++){
obj[i].checked=true;
}
}
function inverseAll(){
for(var i=0;i<obj.length;i++){
if(obj[i].checked==true){
obj[i].checked=false;
}else{
obj[i].checked=true;
}
}
}
(function(){
var obj=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for(var i=0;i<obj.length;i++){
if(i%2){
obj[i].style.background='rgba(30,20,190,.5)';
}else{
obj[i].style.background='rgba(30,80,60,.5)';
}
}
})();
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 随机色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" media="screen">
</style>
</head>
<body>
</body>
<script>
// console.log(Math.round(Math.random()*255+1));
// console.log(Math.floor(45.5));
// console.log(Math.round(45.5));
// console.log(Math.min(45.5,50));
function getRandom(min, max){
var r = Math.random() * (max - min);
var re = Math.round(r + min);
re = Math.max(Math.min(re, max), min);
return re;
}
var obj = document.getElementsByTagName('body')[0];
obj.style.background="rgba("+getRandom(1,255)+","+getRandom(1,255)+","+getRandom(1,255)+","+Math.random()+")";
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例 倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<p>现在是北京时间：</p>
<div>
<span id="year">2019</span><i>/</i>
<span id="month">3</span><i>/</i>
<span id="date">29</span><i style="margin-right:10px;">/</i>
<span id="hours">11</span><i>:</i>
<span id="minutes">20</span><i>:</i>
<span id="seconds">20</span>
</div>
<script type="text/javascript">
function seTime(){
var time = new Date();
var year = time.getFullYear();
//console.log(year);
var month = time.getMonth()+1;
//console.log(month);
var date = time.getDate();
//console.log(date);
var hours = time.getHours();
//console.log(hours);
var minutes = time.getMinutes();
//console.log(minutes);
var seconds = time.getSeconds();
//console.log(seconds);
var obj_year = document.getElementById('year');
var obj_month = document.getElementById('month');
var obj_date = document.getElementById('date');
var obj_hours = document.getElementById('hours');
var obj_minutes = document.getElementById('minutes');
var obj_seconds = document.getElementById('seconds');
obj_year.innerHTML=year;
obj_month.innerHTML=month;
obj_date.innerHTML=date;
if(hours<10){
obj_hours.innerHTML=hours;
}else{
obj_hours.innerHTML=hours;
}
if(minutes<10){
obj_minutes.innerHTML='0'+minutes;
}else{
obj_minutes.innerHTML=minutes;
}
if(seconds<10){
obj_seconds.innerHTML='0'+seconds;
}else{
obj_seconds.innerHTML=seconds;
}
}
setInterval("seTime()",1000);
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
