效果图:

具体代码

  js代码

<script type="text/javascript">
var t = null;
t = setTimeout(time,1000);//開始运行
function time()
{
clearTimeout(t);//清除定时器
dt = new Date();
var y=dt.getFullYear();//获取年
var m=dt.getMonth();//获取月
var d=dt.getDate();//获取日
var h=dt.getHours();//获取时
var f=dt.getMinutes();//获取分
var s=dt.getSeconds();//获取秒
document.getElementById("showTime").innerHTML = "本次作业完成距离现在:<span style='color: darkred;'>"+y+"年"+(m+1)+"月"+d+"日"+h+"时"+f+"分"+s+"秒 </span>";
t = setTimeout(time,1000); //设定定时器,循环运行
} </script>

  

  html代码

<span id="showTime"></span>

  

实现的依据

  主要是依靠这个定时器让js一直在运行,实现动态的效果!就像轮播图一样。采用的是js轮循!

说明

转载请注明出处!谢谢配合

js页面动态时间展示的更多相关文章

  1. js 实现动态时间

    <span id="timebox"></span>                   //承载时间的span $(function () { var o ...

  2. 纯JS实现动态时间

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. JAVAEE——宜立方商城09:Activemq整合spring的应用场景、添加商品同步索引库、商品详情页面动态展示与使用缓存

    1. 学习计划 1.Activemq整合spring的应用场景 2.添加商品同步索引库 3.商品详情页面动态展示 4.展示详情页面使用缓存 2. Activemq整合spring 2.1. 使用方法 ...

  4. Js多国时间动态更新

    Js多国时间动态更新 点击下载

  5. js获取当前时间&js 页面时钟

    js获取当前时间 //获取当前时间,格式YYYY-MM-DD function getNowFormatDate() { var date = new Date(); var seperator1 = ...

  6. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  7. js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件--转他人的 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样 ...

  8. 页面显示时间js

    //页面显示时间 <span align="left" id="OperatorTime"> </span> <script> ...

  9. JS+Ajax+Servlet:记录页面访问时间

    1.前端JS记录页面访问时间 1.1JQuery版本: <script type="text/javascript" src="js/jquery.min.js&q ...

随机推荐

  1. WEB安全 魔术引号及注入类型

    一.魔术引号 1. magic_quotes_gpc 变量 什么是魔术引号 Warning本特性已自 PHP 5.3.0 起废弃并将自 PHP 5.4.0 起移除.当打开时,所有的 '(单引号),&q ...

  2. StackExchange.Redis学习笔记(二) Redis查询 五种数据类型的应用

    ConnectionMultiplexer ConnectionMultiplexer 是StackExchange.Redis的核心对象,用这个类的实例来进行Redis的一系列操作,对于一个整个应用 ...

  3. myeclipse安装SVN插件方法

    http://www.cnblogs.com/xdp-gacl/p/3497016.html myeclipse安装SVN插件方法 SVM China 源代码托管中心 http://www.svnch ...

  4. cocos2d-x 音效中断问题

    做跑酷重吃金币播音效时,播放其它音效会使得音效所有中断,最后发现时音效上限的问题,2.2.3默认的似乎是5个音效,改动成50后问题解决. 在java中的org.cocos2dx.lib包下有一个Coc ...

  5. CentOS7网络连接问题以及重启网络服务失败

    1.重启网络服务失败 在运行“/etc/init.d/network restart”命令时,出现错误“Job for network.service failed. See 'systemctl s ...

  6. C/S模式,发布/订阅模式和PUSH/PULL模式(上)

    CS模式(客户端/服务器模式) 最场景的信息传递模式,也称为Request/Response模式,或者调用模式.http/https协议即此模式.因为最常用所以大家一般都比较熟悉,这里不重点讲了,大家 ...

  7. 关于restful开发的疑惑

    if  你没有了解过restful  return; 一.疑惑 restful风格开发是有争议的,restful的设计是请求“resource”,然后只能对“resource”做CRUD操作.抽象于这 ...

  8. 解决Windows下编辑脚本上传到Linux后遇到^M的方法

    Windows下编辑脚本上传到Linux后遇到^M,导致脚本无法执行,原因是因为Linux与Windows对 "回车键" 编码不同 解决方法如下: 在使用UE->文件-> ...

  9. Scala 语法基础

    一 简介 Scala 是一门多范式(multi-paradigm)的编程语言,设计初衷是要集成面向对象编程和函数式编程的各种特性.Scala 运行在Java虚拟机上,并兼容现有的Java程序.Scal ...

  10. laravel5.5源码笔记(三、门面类facade)

    上次说了provider,那么这次来说说facade 首先是启动的源头,从laravel的kernel类中的$bootstrappers 数组,我们可以看到它的一些系统引导方法,其中的Register ...