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. 有限状态机在单片机和 Arduino 编程中的应用

    有限状态机在单片机和 Arduino 编程中的应用,个人认为在实际中这是一种思想,意味着解决一类问题. 本帖最后由 张飞 于 2015-3-4 20:18 编辑 在单片机编程中,如果在不使用操作系统的 ...

  2. jdbc操作数据库的步骤

    package com.jckb; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Prepare ...

  3. 《C#高效编程》读书笔记12-使用推荐成员初始化器而不是赋值语句

    通常来说类都有不止一个构造函数.随着时间推移,成员变量的增加,构造函数的个数也会不断的增加.预防这种情况的最好方法是,在声明变量的时候就进行初始化,而不是在每个构造函数中进行. //初始化变量时声明 ...

  4. Ecshop如何解决Deprecated: preg_replace()报错

    今天安装Ecshop后,运行出现各种问题,其中 Deprecated: preg_replace() 之类的报错最多,下面贴出解决方案: 错误原因: preg_replace() 函数中用到的修饰符 ...

  5. 命名空间namespace、smarty使用（视图分离，MVC）、smarty模板语法、smarty缓存、MVC模式

    一.命名空间:namespace 命名空间 可以理解为逻辑上的使用,为了防止重名 namespace :关键字 加载:require_once();//加载一次 include_once() 申明命名 ...

  6. 2833 奇怪的梦境 未AC

    2833 奇怪的梦境 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold         题目描述 Description Aiden陷入了一个奇怪的梦境:他被困在一个小 ...

  7. javascript之 JavaScript 工具库

    javascript之 JavaScript 工具库jQuery 目录: 一.查找标签和事件绑定以及操作标签的对比 二.DOM对象和jquery的转换 三.$(document).ready( )  ...

  8. C# linq根据自定义筛选条件和所对应的数值进行筛选

    在软件应用中有时候会出现这样的界面:上面是利用多选框和下拉框组合的筛选条件.下面表格展示筛选后的数据.如下图 上面是筛选条件,表格是根据筛选条件筛选的结果. 如果表格不支持筛选功能.可以利用Linq对 ...

  9. Yii2 Working with Relational Data at ActiveDataProvider

    Yii2 Working with Relational Data at ActiveDataProvider namespace common\models; use Yii; use yii\ba ...

  10. jQuery_1_基础核心

    jQuery代码风格:在jQuery程序中,不管是页面元素的选择还是内置的功能函数,都是以“$"来起始的. $(function(){});                        / ...