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. 【Java】国内maven私服

    <mirrors> <mirror> <id>alimaven</id> <name>aliyun maven</name> & ...

  2. spring MVC之注解开发控制器(二)

    开发表单控制器 在传统的Spring MVC开发方法中,是通过扩展SimpleFormController类来创建简单的表单控制器.这样就定义了基本的表单处理流程,并允许通过覆盖几个生命周期方法来定制 ...

  3. prototype 以及 constructor 属性的理解

    1 为什么 xx.constructor.prototype 可以访问到当前对象的原型. 'str'.constructor.prototype      'str'.constructor 指向当前 ...

  4. DockerSwarm 微服务部署

    一.简介 之前<服务Docker化>中,使用 docker-compose.yml 来一次配置启动多个容器,在 Swarm 集群中也可以使用 compose 文件 (docker-comp ...

  5. hibernate自动建表技术_采用数据库反向生成技术

    1.首先使用oracle创建一个用户: 登陆sqlplus,并以sysdba登陆到数据库: 2.创建一个用户,并对此用户授予connect,resource两个角色的权限: 3.连接到hibernat ...

  6. RabbitMQ：消息发送确认 与 消息接收确认（ACK）

    默认情况下如果一个 Message 被消费者所正确接收则会被从 Queue 中移除 如果一个 Queue 没被任何消费者订阅,那么这个 Queue 中的消息会被 Cache(缓存),当有消费者订阅时则 ...

  7. #include stdio.h(1)

    #include <stdio.h> int main() { //************一.运算符********** //1.赋值运算符 = ; //赋值运算符表示的是将等号右边的赋 ...

  8. 返回mapcontrol上的已被选择的element

     IGraphicsContainerSelect.SelectedElement

  9. tf warning等级

    from:http://blog.csdn.net/tsinghuahui/article/details/72938764 tf讨厌的warning 2017-08-03 10:02:52.0990 ...

  10. python 之 BeautifulSoup 常用提取

    一.bs4信息提取后返回的数据类型 soup.find('tbody') ---> 返回结构是一个bs4.element.Tag soup.find('tbody').children ---& ...