实现一个简单动态的当前时间

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8" />

     <title>Document</title>

     <style type="text/css">

         *{padding: 0;margin: 0;}

         #timeShow{

             box-sizing: border-box;

             width: 400px;

             height: 130px;

             padding-top: 30px;

             border: 1px solid #000000;

             border-radius: 5px;

             margin: 200px auto;

             text-align: center;

             font-size: 28px;

             font-family: cursive;

             font-weight: bold;

         }

     </style>

 </head>

 <body onload="time()">

     <script type="text/javascript">

         var t = null;

         t = setTimeout(time,1000);//开始执行

         function time(){

         clearTimeout(t);//清除定时器

         var d=new Date();

         var n=d.getFullYear();

         var y=d.getMonth()+1;

         var r=d.getDate();

         var x=d.getDay();

         var h=d.getHours();

         var m=d.getMinutes();

         var s=d.getSeconds();

         var weekday=new Array(7)

             weekday[0]="日";

             weekday[1]="一";

             weekday[2]="二";

             weekday[3]="三";

             weekday[4]="四";

             weekday[5]="五";

             weekday[6]="六";

         function ling(i){

             if(i<10){

                 i = '0' + i;

             }

             return i;

         }

         document.getElementById("timeShow").innerHTML =n+"年"+ling(y)+"月"+ling(r)+"日<br />"+"星期"+weekday[x]+" "+ling(h)+":"+ling(m)+":"+ling(s);

         t = setTimeout(time,1000); //设定定时器，循环执行

     }

     </script>

     <div id="timeShow"></div>

 </body>

 </html>

这是效果图，做的比较简洁。当然有兴趣的可以加些漂亮的效果哦！

【JavaScript 实现当前动态时间】的更多相关文章

  1. jsp界面动态时间显示

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  2. 在JSP页面中显示动态时间

    源地址:http://blog.csdn.net/aitcax/article/details/41285305 静态时间: 1.页面首部添加 <%@page import="java ...

  3. 深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

    × 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合, ...

  4. 动态时间归整/规整/弯曲(Dynamic time warping,DTW)

    动态时间规整DTW   在日常的生活中我们最经常使用的距离毫无疑问应该是欧式距离,但是对于一些特殊情况,欧氏距离存在着其很明显的缺陷,比如说时间序列,举个比较简单的例子,序列A:1,1,1,10,2, ...

  5. 动态时间规整（DTW） 转载

    Dynamic Time Warping(DTW)诞生有一定的历史了(日本学者Itakura提出),它出现的目的也比较单纯,是一种衡量两个长度不同的时间序列的相似度的方法.应用也比较广,主要是在模板匹 ...

  6. iOS中动态注入JavaScript方法。动态给html标签添加事件

    项目中有这样一种需求,给html5网页中图片添加点击事件,并且弹出弹出点击的对应的图片,并且可以保持图片到本地 应对这样的需求你可能会想到很多方法来实现. 1. 最简单的方法就是在html5中添加图片 ...

  7. DTW动态时间规整算法

    目录 1.基本介绍 2.算法原理(理论原理) 2.1 主要术语 2.2 算法由来和改进过程 2.3 DTW算法流程 3.算法DTW和算法HMM的比较 1.基本介绍 DTW:Dynamic Time W ...

  8. JavaScript实时显示当前时间的例子

    用javascript代码在当前页面中实时显示当前时间.代码如下: <html> <head> <title>JavaScript 实时显示当前时间-www.jbx ...

  9. 语音信号处理之（一）动态时间规整（DTW）

    语音信号处理之(一)动态时间规整(DTW) zouxy09@qq.com 原文:http://blog.csdn.net/zouxy09 这学期有<语音信号处理>这门课,快考试了,所以也要 ...

随机推荐

  1. IIS 5.x与ASP.NET

    转自:http://www.cnblogs.com/artech/archive/2009/06/20/1507165.html 我们先来看看IIS 5.x是如何处理基于ASP.NET资源(比如.as ...

  2. vue vuex vue-rouert后台项目——权限路由（超详细简单版）

    项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blu ...

  3. Swift基础学习

    Swift基础学习  http://c.biancheng.net/cpp/html/2242.html 这个网站最近看了一下,对于基本语法解释概括的相对全面,如同重新练习一遍OC似的,挺全面的,谢谢 ...

  4. whereis 命令详解

    whereis 作用:whereis命令只能用于程序名的搜索,而且只搜索二进制文件(参数-b).man说明文件(参数-m)和源代码文件(参数-s).如果省略参数,则返回所有信息.  参数:-b 定位可 ...

  5. Yum database disk image is malformed

    使用 yum update 时使用Ctrl+C 后,再用yum 安装其他软件的时候收到:Yum database disk image is malformedyum clean dbcache 清除 ...

  6. （转）mysql 无法设置外键的原因总结

    在Mysql中创建外键时,经常会遇到问题而失败,这是因为Mysql中还有很多细节需要我们去留意,我自己总结并查阅资料后列出了以下几种常见原因. 1.  两个字段的类型或者大小不严格匹配.例如,如果一个 ...

  7. 如何更改 iOS 和安卓浏览器上的 input[type="radio"] 元素的默认样式？

    Safari 上的默认样式是这样的, 背景颜色可以使用background-color改变,但中间那个点始终无法去掉. 我查了一些jQuery插件,如iCheck.js,但是那说明写得我都看不明白,根 ...

  8. redis 安装方式

    1 参考网址 https://www.cnblogs.com/ahjx1628/p/6496529.html https://www.cnblogs.com/smail-bao/p/6164132.h ...

  9. 视频流GPU解码在ffempg的实现（一）-基本概念

    这段时间在实现Gpu的视频流解码,遇到了很多的问题. 得到了阿里视频处理专家蔡鼎老师以及英伟达开发季光老师的指导,在这里表示感谢! 基本命令(linux下) 1.查看物理显卡 lspci | grep ...

  10. ABP架构学习系列三：手工搭建ABP框架

    由于公司的项目才接触到ABP这个框架,当时就觉得高大上,什么IOC.AOP.ddd各种专业词汇让人激情 澎湃,但在使用过程中碰到了许多坑,可能也许是没有去看源码导致的,但工作确实没有那么多时间让人去慢 ...