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

 <!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. .NET 实现Base-64加密解密处理

    .NET 实现Base-64加密解密处理 using System; using System.Collections.Generic; using System.Linq; using System ...

  2. springboot整合mq接收消息队列

    继上篇springboot整合mq发送消息队列 本篇主要在上篇基础上进行activiemq消息队列的接收springboot整合mq发送消息队列 第一步:新建marven项目,配置pom文件 < ...

  3. 记录maven的一些命令

    为了方便后面找资料更快,记录下(不定期更新): maven官网:http://maven.apache.org/plugins/ mvn package打包 mvn package -DskipTes ...

  4. sqlserver 存储过程 带输出参数

    CREATE PROCEDURE [dbo].[output] @acctNbr varchar(), --会员卡号 @acctPwd1 nvarchar() OUT, --登录密码 @acctPwd ...

  5. Charles 抓包工具使用部分问题总结

    一. You may need to configure your browser or application to trust the Charles Root Certificate. See ...

  6. vs code调试console程序报错--preLaunchTask“build”

    网上有其他大神给出的建议是注释掉launch.json中的 "preLaunchTask": "build", 但是这种方式也会造成一个问题,就是再使用F5调试 ...

  7. akka-stream与actor系统集成以及如何处理随之而来的背压问题

    这几天上海快下了五天的雨☔️☔️☔️☔️,淅淅沥沥,郁郁沉沉.     一共存在四个api: Source.actorRef,返回actorRef,该actorRef接收到的消息,将被下游消费者所消费 ...

  8. Xamarin Android Fragment的两种加载方式

    android Fragment的重点: 3.0版本后引入,即minSdk要大于11 Fragment需要嵌套在Activity中使用,当然也可以嵌套到另外一个Fragment中,但这个被嵌套的Fra ...

  9. C/C++调用Golang 一

    C/C++调用Golang 一 (开发环境: 操作系统: windows 7 32位操作系统 C++: visual studio 2010 Golang:go version go1.9 windo ...

  10. csv文件转json

    http://stackoverflow.com/questions/19766266/directly-convert-csv-file-to-json-file-using-the-jackson ...