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. python学习一(Python中的列表)

    python中有两种列表,分别用()和[]表示: 例如: letter = ('a','b','c') letter = ['a','b','c'] 用小括号表示的列表初始化后不允许修改,而中中括号生 ...

  2. Storm概念学习系列之Storm与Hadoop的角色和组件比较

    不多说,直接上干货! Storm与Hadoop的角色和组件比较 Storm 集群和 Hadoop 集群表面上看很类似.但是 Hadoop 上运行的是 MapReduce 作业,而在 Storm 上运行 ...

  3. [原创]Nodejs 远程执行linux shell

    分享几个基于nodejs远程执行linux shell的函数 参数说明: ips - 一个存有IP地址的数组对象 /** * Created by kevalin on 2015/4/27. */ v ...

  4. cgkib动态代理详解-不依赖接口，速度快

    1. cglib原理-不依赖接口,速度快 使用ASM字节框架动态生成要代理类的子类,子类重写final以外的方法,织入横切逻辑 2. 示例-实现MethodInterceptor Test.java ...

  5. vim制表符占位个数修改

    进入配置文件:$ sudo vi /etc/vim/vimrc 在文件末尾添加:set ts=4

  6. JavaEE 7 新特性之WebSocket

    开发环境: JDK:1.7及以上 JavaEE:1.7,因为只有javaee7才有websocke的api,也可以使用1.6单都导入websocket-api.jar试试(本人不清楚) 注意:没有使用 ...

  7. Shell 学习—AWK介绍

    Shell 学习—AWK = = = 安装awk root@kiki-desktop:~/shell# apt-get install gawk gawk-doc = = = awk 是一种程序语言. ...

  8. vue resource patch方法的传递数据 form data 为 [object Object]

    今天在测试 iblog 登录时,传送过去的数据总是 [object Object],以至于后台识别不出来. vue 使用了 vueResource 组件,登录方法为 patch. 经过探索,终于在官网 ...

  9. Struts2初级篇（HelloWorld）

    Struts2的工作流程: 从一个高水平角度看,Struts2 是一个MVC拉动的(或MVC2)框架,Struts2 的模型-视图-控制器模式是通过以下五个核心部分进行实现的: 操作(Actions) ...

  10. 渐进式jpeg(progressive jpeg)图片及其相关

    最近看有些网站上的jpg格式的图片在呈现的时候,有两种方式,一种是自上而下扫描式的,还有一种就是先是全部的模糊图片,然后逐渐清晰(就像GIF格式的交错显示). 一.基本JPEG(baseline jp ...