倒计时及实时显示时刻表

已于 2022-02-17 17:26:47 修改
阅读量1.1k 收藏 1
点赞数 1
文章标签： javascript css html
于 2019-01-11 10:50:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38615014/article/details/86291055
版权

倒计时及实时显示时刻表，代码如下所示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #change{
                width: 300px;
            }
            .div{
                width: 90px;
                height: 80px;
                background-color: rgb(189,85,211);
                float: left;
                margin-right: 90px;
                cursor: pointer;
            }
            .div:hover{
                background-color: wheat;
            }
            #time,#daojishi,#input{
                color: green;
                margin-left: 80px;
            }
        </style>
    </head>
    <body>
        <h1 id='time'></h1>
        <h1 id='daojishi'>5</h1>
        <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            var time;
//                time=setInterval(function(){//周期性定时器
//                    var num=$('#daojishi').html();
//                    num--;
//                    if(num==0){
//                        $('#daojishi').html('5');
//                        clearInterval(time);
//                    }else{
//                        $('#daojishi').html(num);
//                    }
//                },1000);
                function daoji(){//一次性定时器
                    var num=$('#daojishi').html();
                    num--;
                    if(num==0){
                        $('#daojishi').html('5');
                        clearInterval(time);
                    }else{
                        time=setTimeout(daoji,1000);
                        $('#daojishi').html(num);
                    }
                }
                daoji();
              function showTimes(){//实时显示时刻
                  var date=new Date();
                var hour = date.getHours();
                var min = date.getMinutes();
                 var sec = date.getSeconds();
                 if(hour<10){
                     hour="0"+hour;
                 }
                 if(min<10){
                     min="0"+min;
                 }
                 if(sec<10){
                     sec="0"+sec;
                 }
                $("#time").html(hour+":"+min+":"+sec);
                setTimeout(showTimes,1000);
              }
                 showTimes();
                 
        </script>
         <div id="input"></div>
  <script type="text/javascript">
    var in_1 = document.getElementById('input');
    function showTime(){
      var date = new Date();
      var week = date.getDay();
      var weekday;
      switch(week){
        case 0: weekday = '星期天';break;
        case 1: weekday = '星期一';break;
        case 2: weekday = '星期二';break;
        case 3: weekday = '星期三';break;
        case 4: weekday = '星期四';break;
        case 5: weekday = '星期五';break;
        case 6: weekday = '星期六';break;
      }
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
      var in_1 = document.getElementById('input');
      if(hour<10){
             hour="0"+hour;
         }
         if(minute<10){
             minute="0"+minute;
         }
         if(second<10){
             second="0"+second;
         }
      in_1.innerHTML = year + '年' + month + "月" + day + '日'+' ' + weekday + ' ' + hour + ':' + minute + ':' + second;
      setTimeout(showTime,1000);
    }
    showTime();
  </script>

    </body>
</html>

Fighting_01
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html显示时间，并且实时刷新（详细代码，35岁程序员的人生感悟
2301_79099249的博客
04-01 664
正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】伙伴都询问我有没有前端方面的面试题！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
倒数计时：倒计时到新年的应用程序
02-13
一个从当前时刻到新年应用程序。 JavaScript用于计算从现在到新年的时间，并动态显示到该时间为止的天，小时，分钟和秒。 请享受。 给我发送任何功能更新建议。 :laptop: 使用的技术 :laptop: :memo: ...
js实现倒计时
09-20
javascript实现倒计时
倒计时
godfather_001的博客
07-06 88
倒计时 <!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&g
基于51单片机的日历，闹钟，秒表，定时，倒计时+代码+原理图+仿真
11-03
本源码附带了仿真程序，采用Proteus7.8进行...倒计时功能(设定一段时间长度,能实现倒计时显示，时间长减到0时，闪烁 提示) .闹铃重响功能(闹铃被停止后，以停止时刻开始, - -段时间后闹铃重响，且重 响时间的间隔可调)
基于51单片机的秒表（倒计时，数码管）proteus，原理图、流程图、物料清单、仿真图、源代码
最新发布
01-17
2.此计时器能够手动暂停，即出现临时特殊情况，需要暂停倒计时，后期还希望继续倒计时的时候，通过暂停按键，保持时间不变，再次按下启动按键，继续从暂停时刻的显示时间倒计时。 3.倒计时秒表还具有复位功能，当...
基于51单片机的日历，闹钟，秒表，定时，倒计时系统proteus，原理图、流程图、物料清单、仿真图、源代码
01-16
基于51单片机的日历，闹钟，秒表，定时，倒计时系统proteus，原理图、流程图、物料清单、仿真图、源代码 基于51单片机的日历，闹钟，秒表，定时，倒计时系统 ．在4位数码管上显示当前时间。显示格式“时时分分”．...
数字逻辑课程设计——电子钟（含整个工程项目+实验报告）
04-12
设计一个多功能数字时钟，具有以下几个功能： 2.1 记时、记分、记秒 ...到闹钟时刻扬声器会进行高音响铃，同时能进行正常的时、分、秒计时，分别用6个七段数码管动态扫描显示时、分、秒的十位和个位。
倒计时器（悬浮窗口）
06-20
该软件用于PPT演示，特别是在一些比赛或互动环节中，以及各种会议，打开后它可以悬浮窗口，PPT等其他软件可任意切换
MFC进度条倒计时关闭程序
06-07
界面上有一个进度条，当进度条到达100的时候程序自动关闭，适合初学者
网站建设中HTML5源码 显示精美倒计时
11-26
网站建设中HTML5源码 显示精美倒计时 演示地址：jswp.org
qt定时器和QLCDNumber实现背景透明计时器
09-10
qt定时器和QLCDNumber实现背景透明计时器，编译环境：vs2010+qt4.8.6（32位）
倒计时 8 天 | 完整议程大揭秘！来 20 个 AI 论坛，与百名大咖携手玩转人工智能...
AI科技大本营
06-24 835
2020年7月3—4日，由 CSDN 主办的第三届 AI 开发者大会（AI ProCon 2020）（大会官网：https://aiprocon.csdn.net/）将以线上直播的形式与...
js版的倒计时（月-日-时-分-秒-毫秒）
热门推荐
不想写代码的一天
05-29 1万+
大早上好瞌睡，爬起来接着写。 今天做的倒计时用了三种方法 过程和思路： 设置未来的时间。（使用在new Date()后面直接设置时间的方法） 获取当前的时间（ newDate() ） 用未来时间减去现在的时间，算出总的毫秒数 算出倒计时的月、日 、时、分、秒、毫秒（1s =1000ms 1分=60s 1时 =60分 1天 =24时 1月=30天 1年=12） 每个...
倒计时完整步骤
weixin_42630640的博客
12-20 816
一、xml <ImageView android:id="@+id/imageView" android:scaleType="fitXY" android:layout_width="match_parent" android:layout_height="match_parent" android:lay...
倒计时效果
Kaaaakaki的博客
07-16 94
$(function(){ $("#sendCode").click(function () { //1. 给指定手机发送验证码 // 2 倒计时效果 if($(this).hasClass("disabled")){ //正在倒计时 点击没反应 }else{ timeoutchangeStyle() } }); }) var n.
python弹窗实时显示倒计时
04-24
好的，我知道您要求保密。关于您的问题，可以使用Python Tkinter模块来创建弹窗并实现倒计时，具体步骤如下： 1. 导入Tkinter模块 ```python import tkinter as tk ``` 2. 创建主窗口和标签控件 ```python root = tk.Tk() root.title('倒计时弹窗') label = tk.Label(root, text='倒计时: ', font=('Arial', 30)) label.pack() ``` 3. 定义倒计时函数 ```python def count_down(count): label['text'] = '倒计时: ' + str(count) if count > 0: root.after(1000, count_down, count-1) else: root.destroy() ``` 4. 创建按钮控件并调用倒计时函数 ```python button = tk.Button(root, text='开始倒计时', command=lambda:count_down(10)) button.pack() ``` 5. 运行程序 ```python root.mainloop() ``` 以上就是实现Python弹窗实时显示倒计时的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值