js实现简单的数字时钟

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>JS — 实现简单的数字时钟效果</title>

     <link rel="stylesheet" type="text/css" href="">

 </head>

 <body>

     <div class="demo">

         <span id="nowTime"></span>

     </div>

 </body>

 <script type="text/javascript">

     var newDate = '';

     getLangDate();

     function dateFilter(date){ //值小于10时，在前面补0

         if(date < 10){

             return "0"+date;

         }

         return date;

     }

     function getLangDate(){

         var dateObj = new Date(); //表示当前系统时间的Date对象

         var year = dateObj.getFullYear(); //当前系统时间的完整年份值

         var month = dateObj.getMonth()+1; //当前系统时间的月份值

         var date = dateObj.getDate(); //当前系统时间的月份中的日

         var day = dateObj.getDay(); //当前系统时间中的星期值

         var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];

         var week = weeks[day]; //根据星期值，从数组中获取对应的星期字符串

         var hour = dateObj.getHours(); //当前系统时间的小时值

         var minute = dateObj.getMinutes(); //当前系统时间的分钟值

         var second = dateObj.getSeconds(); //当前系统时间的秒钟值

         var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午

         newDate = dateFilter(year)+"-"+dateFilter(month)+"-"+dateFilter(date)+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);

         document.getElementById("nowTime").innerHTML = "当前时间： "+newDate+"　"+week;

         setTimeout(getLangDate,1000);

     }

 </script>

 </html>

JS — 实现简单的数字时钟的更多相关文章

  1. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  2. js代码 简单实现数字滚动增加动效（原）

    <html><body> <span>look this:</span><span id="nums">10000< ...

  3. js实现动态数字时钟

    1.效果如下 2.html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&g ...

  4. 简单酷炫的Canvas数字时钟

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...

  5. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. js动态数字时钟

    js动态数字时钟 主要用到知识点: 主要是通过数组的一些方法,如:Array.from() Array.reduce() Array.find() 时间的处理和渲染 js用到面向对象的写法 实现的功能 ...

  7. JS框架_(Vue.js)带有星期日期的数字时钟

    百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...

  8. html5 canvas js(数字时钟)

      <!doctype html> <html> <head> <title>canvas dClock</title> </head ...

  9. 一个简易的 LED 数字时钟实现方法

    这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了. 首先可以很明确的一点,这个真没技术含量存在,只是需要点耐心. L ...

随机推荐

  1. vector的学习

    学习链接:http://www.runoob.com/cplusplus/cpp-stl-tutorial.html kandaima #include<iostream> #includ ...

  2. 【hihocoder】1237 : Farthest Point 微软2016校招在线笔试题

    题目:给定一个圆,要你求出一个在里面或者在边上的整数点,使得这个点到原点的距离最大,如果有多个相同,输出x最大,再输出y最大. 思路:对于一个圆,里面整点个数的x是能确定的.你找到x的上下界就可以了. ...

  3. OpenStack Weekly Rank 2015.07.20

    Module Reviews Drafted Blueprints Completed Blueprints Filed Bugs Resolved Bugs Cinder 8 1 3 9 10 Sw ...

  4. js中的onclick事件传参需要注意的问题

    如果参数是数值类型可以直接传,如果是字符串类型需要在字符串前后加上双引号,双引号需要转义 如 onclick="test(0)";  直接传值 参数为数值 onclick=&quo ...

  5. Maven的安装以及介绍

    附录:带阿里源的maven用户设置文件-settings.xml <?xml version="1.0" encoding="UTF-8"?> &l ...

  6. Srping MVC中Controller的void方法

    第一种 通过修改response来修改页面 /** * 方式一:通过声明HttpServletResponse类型的方法入参,来使用HttpServletResponse对象. * 注意:在Contr ...

  7. 记ubuntu下安装Anaconda

    晚上尝试在ubuntu 16.04版本下安装python的Anaconda3发行版. 从清华源下载的Anaconda3-Linux 64位版本安装包,然后顺利的下一步,下一步.....一切顺利!结果到 ...

  8. Eucalyptus常用查询命令

    前言: Elastic Utility Computing Architecture for Linking Your Programs To Useful Systems (Eucalyptus)  ...

  9. 在wpf或winform关闭子窗口或对子窗口进行某个操作后刷新父窗口

    父窗口: ///<summary> ///弹出窗口  ///</summary> ///<param name="sender"></pa ...

  10. linux下配置Nginx，支持thinkphp

    前言引入 一个刚入行的朋友,刚换工作,入职了一个新公司.新公司一个php开发,就是他.俨然老板把他当成公司扛把子了,把服务器都给了他,让他部署整个php的开发环境.那个朋友是wamp爱好者.然后面对l ...