获取当前时间和 10s倒计时案例

Posted 2020-07-28 WuXuanKun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取当前时间和 10s倒计时案例相关的知识，希望对你有一定的参考价值。

1.获取当前的时间，时间没分每秒都在走，（把握现在，将来会是美好的！）

 1 <title>获取当前时间</title>
 2     <script type="text/javascript">
 3         onload = function () {//地址对象  函数
 4             setInterval(disptime, 1000);//setInterval()可按照指定的周期（以毫秒计）来调用函数或计算表达试
 5         }
 6         function disptime() {
 7             var today = new Date();//获得当前时间
 8             var hh = today.getHours();//获得小时，然后判断小时在哪个时间段
 9             var sj = null;
10             if (hh <= 12) {
11                 sj = "早上好";
12             } else if (hh > 12 && hh<= 18) {
13 
14                 sj = "下午好";
15             } else if (hh> 18) {
16                 sj = "晚上好";
17             }
18             var doc = document.getElementById(\'myid\');//getElementById()方法返回对拥有指点id的第一个对象的引用  一般用于访问DIV 图片 表单元素 网页标签等，但要求访问对象的id是唯一的
19             //设置div的内容为当前时间
20             doc.innerhtml = sj + "<br/>今天日期：" + today.getFullYear() + "年" + (today.getMonth()) + "月" + today.getDate() + "日" + "<br/>现在时间：" + today.getHours() + "时" + today.getMinutes() + "分" + today.getSeconds() + "秒";
21         }
22     </script>
23 </head>
24 <body >
25     <div id="myid"></div>
26 </body>

View Code

实现效果截图：

2.10s倒计时效果，按开始按钮，时间变短，按停止按钮，时间暂停，时间为0时，可以跳转到其他页面

 1    <title>10s倒计时效果</title>
 2     <script type="text/javascript">
 3         //1.1  取出div中的变量值
 4         window.onload = function () {
 5             var t1;
 6             //1.4  给开始按钮注册事件
 7             //锁定开始按钮对象
 8             var btnStart = document.getElementById("btnStart");
 9             //结束按钮对象
10             var btnStop = document.getElementById("btnStop");
11             btnStop.onclick = function () {
12                 clearInterval(t1);
13             };
14             btnStart.onclick = function () {
15                 //1.5
16                 t1 = setInterval(step, 1000);
17             };
18         };
19 
20         function step() {
21             //1.2 锁定div对象
22             var dom = document.getElementById("msg");
23             //1.3  innerText,innerHTML value
24             var num = dom.innerText;
25             //1.6  对num进行--操作
26             if (num > 0) {
27                 num--;
28             }
29             //1.7  将运算过的num重新赋值给div的innerText
30             dom.innerText = num;
31         }
32 
33     </script>
34 </head>
35 <body>
36     <input type="button" id="btnStart" value="开始" />
37     <input type="button" id="btnStop" value="停止" /><br />
38     <div id="msg">10</div>
39 
40 </body>

View Code

以上是关于获取当前时间和 10s倒计时案例的主要内容，如果未能解决你的问题，请参考以下文章

Android 使用两个不同的代码片段获取当前位置 NULL

如何获取当前显示的片段？

获取当前时间 和 10s倒计时案例

获取当前时间和 10s倒计时案例