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. HDU 4622 Reincarnation Hash解法详解

    今天想学字符串hash是怎么弄的.就看到了这题模板题 http://acm.hdu.edu.cn/showproblem.php?pid=4622 刚开始当然不懂啦,然后就上网搜解法.很多都是什么后缀 ...

  2. 关于SQL Server数据库中的标识列

    一.标识列的定义以及特点 SQL Server中的标识列又称标识符列,习惯上又叫自增列. 该种列具有以下三种特点: 1.列的数据类型为不带小数的数值类型 2.在进行插入(Insert)操作时,该列的值 ...

  3. spring boot 基础 多环境配置

    对于多环境的配置,各种项目构建工具的思路基本上一致,都是通过配置多份不同环境的配置文件来区分. 1. 首先我们先创建不同环境下的属性文件,截图如下: application.properties  是 ...

  4. 构建第一个Spring Boot2.0应用之集成mybatis、Druid（七）

    一.环境: IDE:IntelliJ IDEA 2017.1.1 JDK:1.8.0_161 Maven:3.3.9 springboot:2.0.2.RELEASE 二.说明:      本文综合之 ...

  5. 构建第一个Spring Boot2.0应用之项目创建（一）

     1.开发环境 IDE: JAVA环境: Tomcat: 2.使用Idea生成spring boot项目 以下是使用Idea生成基本的spring boot的步骤. (1)创建工程第一步 (2)创建工 ...

  6. FreeMarker基本语法的使用

    参考博客: http://www.cnblogs.com/panchanggui/p/9346574.html https://blog.csdn.net/zyy88886666/article/de ...

  7. git学习(一)

    提:       远程的主机名(远程仓库服务器名):  origin   本地的主分支: master(本地master分支)      远程的主分支: maste(远程仓库的master分支) gi ...

  8. 使用Qt生成第一个窗口程序

    一.打开QtCreater,点击New Project 二.在Qt中,最常用的窗口程序为widgets控件程序,这里我们选择Qt Widgets Application 三.Qt生成的debug和re ...

  9. Java反序列化漏洞详解

      Java反序列化漏洞从爆出到现在快2个月了,已有白帽子实现了jenkins,weblogic,jboss等的代码执行利用工具.本文对于Java反序列化的漏洞简述后,并对于Java反序列化的Poc进 ...

  10. C语言的一小步—————— 一些小项目及解析

    ——-------- 仅以此献给东半球第二优秀的C语言老师,黑锤李某鸽,希望总有那么一天我们的知识可以像他的丰臀一样渊博! bug跟蚊子的相似之处: 1.不知道藏在哪里. 2.不知道有多少. 3.总是 ...