1.效果如下

2.html部分

<!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>

3.js部分

<script type="text/javascript">

    var newDate = '';

    getLangDate();

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

        if(date < ){

            return ""+date;

        }

        return date;

    }

    function getLangDate(){

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

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

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

        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 >= ) ? (hour >= ) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午

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

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

        setTimeout(getLangDate,);

    }

</script>

</html>

js实现动态数字时钟的更多相关文章

  1. js动态数字时钟

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

  2. 原生js可爱糖果数字时间特效

    效果展示:http://hovertree.com/texiao/js/35/ 数字采用漂亮的糖果皮肤设计 效果图: 代码如下: <!DOCTYPE html> <html> ...

  3. JS — 实现简单的数字时钟

    js实现简单的数字时钟 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...

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

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

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

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

  6. html5 canvas js(数字时钟)

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

  7. 基于Verilog HDL 的数字时钟设计

    基于Verilog HDL的数字时钟设计 一.实验内容:     利用FPGA实现数字时钟设计,附带秒表功能及时间设置功能.时间设置由开关S1和S2控制,分别是增和减.开关S3是模式选择:0是正常时钟 ...

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

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

  9. 使用jQuery和CSS3实现一个数字时钟

    点击进入更详细教程及源码下载     在线演示 我们经常会在网站中看见一个时钟的效果.今天向大家分享一个使用jQuery和CSS3实现一个数字时钟教程. http://www.html5cn.org/ ...

随机推荐

  1. BZOJ #3746: [POI2015]Czarnoksiężnicy okrągłego stołu 动态规划

    转载请注明出处:http://www.cnblogs.com/TSHugh/p/8823423.html 读完题就会发现p=0.1的情况以及n=1.2的情况都可以直接判掉,而p=2的时候也可以直接构造 ...

  2. 前端基础----html初识、常用标签

    一.HTML初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) ...

  3. 三年java面试题

    前言: 楼主毕业三年,从大学时期就开始一直从事java web方面的开发.我在去年的今天有一篇帖子:两年java面试经验.经历了一年的上班,成长了很多.今年因为某些原因辞职了.从2月底辞职,到3月初, ...

  4. 《剑指offer》— JavaScript（6）旋转数组的最小数字

    旋转数组的最小数字 题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转. 输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2, ...

  5. JAVA导出Excel（支持多sheet）

    一.批量导出: /** * * @Title: expExcel * @Description: 批量导出客户信息 * @param @param params * @param @param req ...

  6. redis 配置和使用(C++)

    一.Redis简介: Redis为非关系型数据库,Redis是一个Key-Value存储系统.它支持存储的value类型有:string(字符串),list(链表), set(无序集合),zset(s ...

  7. Linux常用网络工具：hping高级主机扫描

    之前介绍了主机扫描工具fping,可以参考我写的<Linux常用网络工具:fping主机扫描>. hping是一款更高级的主机扫描工具,它支持TCP/IP数据包构造.分析,在某些防火墙配置 ...

  8. 一元回归_ols参数解读(推荐AAA)

    sklearn实战-乳腺癌细胞数据挖掘(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005269003&a ...

  9. OpenCV---边缘保留滤波EPF

    OpenCV经典的两种实现EPF方法:高斯双边和均值迁移 一:双边模糊 差异越大,越会完整保留 def bi_demo(image): dst = cv.bilateralFilter(image,0 ...

  10. java类的静态属性值获取

    获取某个类实例的静态属性: public class ErrorCode { private String code; private String message; private ErrorCod ...