效果图:

具体代码

  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. ApplicationEventPublisher笔记

    ApplicationEventPublisher是ApplicationContext的父接口之一.这接口的作用是:Interface that encapsulates event publica ...

  2. tcp的三次握手:通信的本质:通信通知与信息交换

    tcp的三次握手:通信的本质:通信通知与信息交换

  3. Eclipse导入web项目发布项目时报Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java EE 5 and 6 Web错误解决方案

    Eclipse导入web项目后,将web项目加载到server进行发布时,提示Tomcat version 7.0 only supports J2EE 1.2, 1.3, 1.4, and Java ...

  4. 解决Linux 安装python3 .5 解决pip 安装无法成功问题ssl安全拦截无法pip安装库问题

    pip is configured with locations that require TLS/SSL, however the ssl module in Python is not avail ...

  5. WebSocket的原理,以及和Http的关系 (转载)

    一.WebSocket是HTML5中的协议,支持持久连接:而Http协议不支持持久连接. 首先HTMl5指的是一系列新的API,或者说新规范,新技术.WebSocket是HTML5中新协议.新API. ...

  6. 微服务—熔断器Hystrix

    前言在微服务架构中,我们将系统拆分成了一个个的服务单元,各单元应用间通过服务注册与发现的方式互相依赖. 由于每个单元都在不同的进程中运行,依赖通过远程调用的方式执行,这样就有可能因为网络原因或是依赖服 ...

  7. PLSQL数据库无选项问题解决

    添加如下ORACLE_HOME和OCI library 添加之后,关闭plsql再打开会出现如下界面: 其中database为空. 我当时也是在环境变量里面配置了TNS_ADMIN的环境变量为:如下 ...

  8. (Les17 移动数据)expdp/impdp

    oracle 11.2.0 expdp/impdp 数据泵参数   expdp参数=========================================================== ...

  9. 处理Model

    将Model对象归档解档 - CSDN博客 iOS archive(归档)的总结 - 苹果吧 - 博客园 IOS数据持久化之归档NSKeyedArchiver,iosnskeyedarchiver_I ...

  10. Framwork框架日志与配置工具的使用

    一.使用设置: 头文件的添加: ..\Framwork\Include\pthread_64; ..\Framwork\CommFramwork\include; ..\Framwork\Utilit ...