由于我们主要的是要知道如何获取当前时间与展示出来，所以在这里就不说如何布局这个问题了，而是如何使用js把效果实现
注意：我这里使用了两个button按钮，这样的好处是可以控制开始与暂停，但这样的缺点也有，就是会出现一个bug，当你多次点击开始的之后你会发现无法暂停，解决方法在下文会有说到。
- 如何实现自动刷新
先是定义一个变量var time r= null;
再去获取到“报时”按钮，再来给它绑定一个点击事件，设置一个setInterval（）事件设置每300毫秒（即0.3秒）点击一次
timer = setInterval(function(){
oGive(); //调用下面设置好要刷新的时间日期
},300);
接下来就是再设置一个点击删除函数，这里用到的是clearInterval（）
end.onclick = function(){
clearInterval(timer);}//点击“结束”后删除前面的setInterval（）事件
- 如何获取当前日期
在此我们再来说如何获取到当前日期，
先是定义一个变量 var d = new Date();
getFullYear 当前年份 var year = d.getFullYear();
getMonth 当前月份，要注意的是 在这里月份的计算是从0开始的所以在获取的时候不要忘了+1 var months = d.getMonth(); var month = months+1;
getDate 当前日期 var date = d.getDate();
getHours 当前时间 24小时制 var hours = d.getHours();
getMinutes 当前分钟 var minute = d.getMinutes();
getSeconds 当前秒数 var second = d.getSeconds();
getDay 当前星期几 也是从0开始计算的，所以我们要把它转化为星期
var day = d.getDay();
var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
接下来为了美观，我们要把显示格式转换为00:00:00的格式，觉得没必要的小伙伴可以跳过这步，这步很简单就是用三目运算做一个判断，我这里以月份为例：month = month< = 9?"0" + month:month; 更完整请参考下文源代码。
三、如何解决出现的bug
最后一个也就是前面说的如何解决多次点击报时产生的bug，我相信大部分小伙伴都知道一般的bug都是利用判断解决的，在这里也不例外：
先是定义一个变量 var transfor=false; 但我们这里的字面量使用的是布尔值，使用的原因很简单，因为它只有两个值要么对，要么错。
源代码仅供参考：
<!doctype html><html><head><meta charset="utf-8"><title>时间显示</title><style>*{margin: 0px;padding: 0px;}body{background: #414242;}.box{margin: 100px auto;width: 80%;height: 300px;}.time{text-align: center;font-size: 10rem;color: aliceblue;}.box1{margin: 100px auto;width: 37rem;height: 10rem;}.box1>button{font-size: 3rem;margin: 80px 50px;width: 12rem;height: 6rem;color: #FFFFFF;border: 1px solid #FFB200;border-radius: 10px;background: #FFB200;}.box1>button:nth-of-type(2){background: #ff0000;border: 1px solid #ff0000;}.span{margin-top: 50px;font-size: 4rem;color:aliceblue;text-align: center;}</style></head><body><div class="box"><p class="time" id="time">00 : 00 : 00</p><p id="span" class="span"></p><div class="box1" id="box1"><button class="give" id="give">报时</button><button class="end" id="end">结束</button></div></div></body><script>var timer=null;var transfor=false;window.οnlοad=function(){var give=document.getElementById("give");var end=document.getElementById("end");give.οnclick=function(){if(transfor==true){return;}else{timer=setInterval(function(){oGive();},300);transfor=true;}};end.οnclick=function(){transfor=false;clearInterval(timer);}}function oGive(){var d=new Date();var year=d.getFullYear();var months=d.getMonth();var date=d.getDate();var hours=d.getHours();var minute=d.getMinutes();var second=d.getSeconds();var timerr=document.getElementById("time");var month=months+1;var day=d.getDay();var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]timerr.style.textShadow=" 9px 6px 10px #f4de00"timerr.style.fontSize="7rem";timerr.style.color="#f4de00";document.body.style.background='url("../图片/0011.jpg")no-repeat';document.getElementById("time").innerHTML="现在是中国时间:<br>";month=month<=9?"0"+month:month;date=date<=9?"0"+date:date;hours=hours<=9?"0"+hours:hours;minute=minute<=9?"0"+minute:minute;second=second<=9?"0"+second:second;document.getElementById("span").innerHTML=year+" 年 "+month+" 月 "+date+" 日"+"<br>"+hours+" : "+minute+" : "+second+"<br>"+arr[day];}</script></html> |
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
