label标签的使用
label标签和特定的表单控件关联之后，如果用户在label元素内点击文本，就会触发关联的表单。
也就是让label标签和checkbox和radio等关联，实现点击文字也可以实现选中CheckBox和radio。
使用的方法：
一，显示关联
使用 label for
<input type="checkbox" id="checkAll"> <label for="checkAll">全选</label>
二，隐式关联
就是直接将表单控件放到label标签内，这种情况下，label标签只能包含一个表单元素，包含多个只对第一个有效。
<label><input type="checkbox" /> 选项（一）</label>
复选框的全选等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>每天进步一点</title>
<style>
</style>
<script>
window.onload = function(){
var checkAll = document.getElementById("checkAll");
var checkReverse = document.getElementById("checkReverse");
var input = document.getElementsByTagName("input");
var label = document.getElementsByTagName("label")[0];
//是为了判断此时是否是全部选中的状态，如果不是全部选中则将这个复选框不选中
function isCheckAll() {
var n = 0;
for(var j = 1; j < input.length; j++){
input[j].checked && n++;
}
input[0].checked = n == input.length-1;
label.innerHTML = input[0].checked ? "全不选" : "全选";
}
checkAll.onclick = function(){
for(var i = 1; i < input.length; i++){
input[i].checked = this.checked;
}
isCheckAll();
}
checkReverse.onclick = function(){
for(var i = 1; i < input.length; i++){
input[i].checked = !input[i].checked;
}
isCheckAll();
}
//还需要一个监控所有的复选框都选择的事件，让全选的按键被选中
for( var i = 1; i<input.length; i++) {
input[i].onclick = function() {
isCheckAll();
}
}
}
</script>
</head>
<body>
<dl>
<dt> <input type="checkbox" id="checkAll"> <label for="checkAll">全选</label>
<a href="javascript:" id="checkReverse">反选</a>
</dt>
<dd>
<p><label><input type="checkbox" /> 选项（一）</label></p>
<p><label><input type="checkbox" /> 选项（二）</label></p>
<p><label><input type="checkbox" /> 选项（三）</label></p>
<p><label><input type="checkbox" /> 选项（四）</label></p>
<p><label><input type="checkbox" /> 选项（五）</label></p>
<p><label><input type="checkbox" /> 选项（六）</label></p>
<p><label><input type="checkbox" /> 选项（七）</label></p>
<p><label><input type="checkbox" /> 选项（八）</label></p>
<p><label><input type="checkbox" /> 选项（九）</label></p>
<p><label><input type="checkbox" /> 选项（十）</label></p>
</dd>
</dl>
</body>
</html>
在这里进行分析，首先是dl dt dd 的使用，这个是一个类似于table 的组合标签，表格标签，dt和dd是平级的，不过是有缩进，具体的使用在使用的时候可以去查询。
因为复选框在选择完之后会有一个全部选中的事件发生，所以就是需要：
for( var i = 1; i<input.length; i++) {
input[i].onclick = function() {
isCheckAll();
}
}
我们需要给每一个框设置点击查询，每点击一个就查询这个点击之后是否是全部选中的，所以也需要创建一个方法 isCheckAll，
创建isCheckAll方法，检查是否是已经全部选中
function isCheckAll() {
var n = 0;
for(var j = 1; j < input.length; j++){
input[j].checked && n++;
}
input[0].checked = n == input.length-1;
label.innerHTML = input[0].checked ? "全不选" : "全选";
}
如果说在便利复选框的时候，都是选中状态则 input[0].checked = true，全选就被选择上，然后将label的innerHTML 改为 对应的反面 “全不选”。
同时全选 和 反选的按钮 同样是需要 检查isCheckAll
时钟实现
Date使用
返回的都是Date对象相应的值, 例子是: **2018年12月8日 星期六 17点42分55秒**
var now = new Date();
now; // => Sat Dec 08 2018 17:42:55 GMT+0800 (中国标准时间)
now.getDate(); // => 8, 返回Date对象的日期值, 8号
now.getDay(); // => 6, 返回星期值, 表示星期几, 这里是星期六, 注意0表示星期日, 1 ~6分别表示星期一至星期六
now.getFullYear(); // => 2018, 返回年份值, 完整4位数的格式, 建议使用这个API
now.getHours(); // => 17, 返回小时值
now.getMilliseconds(); // => 372, 返回毫秒值
now.getMinutes(); // => 42, 返回分钟值
now.getMonth(); // => 11, 返回月份值, 这里是12月!! 月份也是个特殊值, 介于0 ~11表示1月 ~12月
now.getSeconds(); // => 55, 返回秒数值,
now.getTime(); // => 1544262175372, 返回毫秒值, 注: 这个**没有getUTCTime()方法**, 因为这个值和时区无关
now.getTimezoneOffset(); // => -480, 返回当前日期的本地表示与UTC表示之间相差的**分钟数**, 注意返回值依赖于指定日期的夏令时是否有效
now.getYear(); // => 118, 返回年分值, 此方法已过时, 请使用getFullYear();
var now = new Date();
now; // => Sat Dec 08 2018 18:21:14 GMT+0800 (中国标准时间)
now.setDate(15);
now; // => Sat Dec 15 2018 18:21:14 GMT+0800 (中国标准时间)
转换的时间例子是**2018年12月8日 星期六 18点21分14秒**
now.toDateString(); // => "Sat Dec 15 2018", 返回一个表示日期部分的字符串, 使用本地时区
now.toGMTString(); // => "Sat, 15 Dec 2018 10:21:14 GMT", 将Date转换为字符串, 已弃用, 建议使用toUTCString().
now.toISOString(); // => "2018-12-15T10:21:14.743Z", 将Date转字符串, 以ISO-8601标准和以时区为"Z"的UTC时间表示形式
now.toJSON(); // => "2018-12-15T10:21:14.743Z", 将Date对象JSON序列化, 返回值和toISOString()一样
now.toLocaleDateString(); // => "2018/12/15", 返回一个表示日期部分的字符串, 使用本地时区, 本地时间格式
now.toLocaleString(); // => "2018/12/15 下午6:21:14", 将Date转换为字符串
now.toLocaleTimeString(); // => "下午6:21:14", 返回一个表示时间部分的字符串
now.toString(); // => "Sat Dec 15 2018 18:21:14 GMT+0800 (中国标准时间)", 本地时区将Date转换为字符串
now.toTimeString(); // => "18:21:14 GMT+0800 (中国标准时间)", 返回一个表示时间部分的字符串
now.toUTCString(); // => "Sat, 15 Dec 2018 10:21:14 GMT", 用世界时间将Date转换为字符串
now.valueOf(); // => 1544869274743, 将Date转为对应的内部毫秒格式
同时我们可以使用moment.js
扫描二维码关注公众号，回复：
13248541 查看本文章
【具体使用可以查找一下相关的知识】
setInterval函数
我们做到获取到时间并显示，但是没有做到实时显示时间，setInterval函数可按照指定的周期调用函数或者表达式，
setInterval(code, milliseconds);
setInterval(function, milliseconds, param1, param2, ...)
在这里就是利用这个函数做到实时变换时间的，setInterval(toChange, 1000);
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>每天进步一点</title>
<style>
body{
background-color: rgb(90, 90, 88);
}
#clock{
width: 250px; height: 38px;
margin: 50px auto;
}
#clock>img{
width: 25px; height: 36px;
margin: 0 2px;
position: relative;
}
#clock>span{
font-size: 50px;
color: #aaa;
}
</style>
<script>
//这里是需要获取到系统的时间，并需要将获取到的时间进行分析，然后将对应的图片显示，
//这里的时间具有及时性，
window.onload = function(){
var now = new Date();
var prevtime = toZero(now.getHours()) + toZero(now.getMinutes()) + toZero(now.getSeconds());
//这里这个函数的目的是 如果获取的时间不是六位数的数字组合，那么我们就将其进行补零操作。
function toZero(num){
if(num < 10) {
return num = "0" + num;
}else{
return num = num + "";
}
}
var aImg = document.getElementById("clock").getElementsByTagName("img");
for(var i = 0; i < aImg.length; i++){
aImg[i].src = "./images/" + prevtime.charAt(i) + ".png";
}
var nexttime = "";
//现在只能做到的是显示时间，我们想要的是实时显示时间
setInterval(toChange, 1000);
function toChange() {
var date = new Date();
nexttime = toZero(date.getHours()) + toZero(date.getMinutes()) + toZero(date.getSeconds());
toCom(prevtime,nexttime);
prevtime = nexttime;
}
var arr= [];
function toCom(str1, str2){
arr = [];
for(var i =0; i<str1.length;i++){
if(str1.charAt(i) != str2.charAt(i)){
arr.push(i);
}
}
startMove();
}
function startMove(){
var speed = -4;
timer = setInterval(function(){
for(var i =0; i<arr.length;i++) {
if(aImg[arr[i]].offsetHeight == 0){
speed = 4;
aImg[arr[i]].src = "./images/" + nexttime.charAt( arr[i] ) + ".png";
}
//改变数字高度时默认向底线减少，所以手动改变数字的top向上移动
aImg[arr[i]].style.height = aImg[arr[i]].offsetHeight + speed + "px";
aImg[arr[i]].style.top = aImg[arr[i]].offsetHeight/2 - 18 + "px";
if( aImg[arr[i]].offsetHeight ==36 ){
clearInterval( timer );
}
}
},10);
}
}
</script>
</head>
<body>
<div id="clock">
<img src="./images/0.png" alt="">
<img src="./images/0.png" alt="">
<span>:</span>
<img src="./images/0.png" alt="">
<img src="./images/0.png" alt="">
<span>:</span>
<img src="./images/0.png" alt="">
<img src="./images/0.png" alt="">
</div>
</body>
</html>