获取当前时间 和 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

优质内容筛选与推荐>>
1、linux创建用户、设置密码、修改用户、删除用户
2、Neo4j学习——基本操作(一)
3、搜索栏 SearchDialog 的使用 不显示的问题
4、proe画图前的准备工作
5、Html5 杂记


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn