效果图:

具体代码

  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. 使用python编写svn钩子

    同上一篇trac中安装插件的文章的出发点一样,感觉用文档和口头制定规则在执行上会有偏差并且需要经常引导新人去熟悉规则. 所以,又费了几个小时去琢磨怎么改进svn提交代码的钩子,现有的钩子的功能比较简单 ...

  2. Monkeyrunner命令

    1.使用Monkeyrunner脚本命令时,需要导入模块才能使用模块的脚本命令,Monkeyrunner的常用模块有 MonkeyRunner,MonkeyDevice,MonkeyImage,Mon ...

  3. Java8 Stream()关于在所有用户的所有上传记录中,找出每个用户最新上传记录

    原创文章:转载请标明出处 https://www.cnblogs.com/yunqing/p/9504196.html 首先分析相当于如下,在所有的猫中,每个名字的猫都保留年龄最小的一个 import ...

  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. react+webpack搭建项目

    一.环境准备 ①node ②npm 二.开始搭建 ①使用npm安装create-react-app工具,在cmd命令行中输入: npm install -g create-react-app ②使用命 ...

  6. 微服务之数据同步Porter

    Porter是一款数据同步中间件,主要用于解决同构/异构数据库之间的表级别数据同步问题. 背景 在微服务架构模式下深刻的影响了应用和数据库之间的关系,不像传统多个服务共享一个数据库,微服务架构下每个服 ...

  7. SQL-还原数据库,数据库提示正在还原中的处理办法

    还原数据库时,提示还原成功,可是数据库列表中该数据库显示正在还原中: 执行此命令即可: RESTORE DATABASE EnterPriseBuilding WITH RECOVERY 1. 至少有 ...

  8. iOS中UITextField常用设置和方法

    //初始化textField并设置位置及大小 UITextField *text = [[UITextField alloc]initWithFrame:CGRectMake(, , , )]; // ...

  9. MySQL学习【第五篇SQL语句上】

    一.mysql命令 1.连接服务端命令 1.mysql -uroot -p123 -h127.0.0.1 2.mysql -uroot -p123 -S /tmp/mysql.sock 3.mysql ...

  10. shell习题第8题:监控nginx的502状态

    [题目要求] 服务器上跑的是LNMP环境,近期总是有502现象.502为网站访问的状态码,200正常,502错误是nginx最为普遍的错误状态码. 由于502只是暂时的,并且只要一重启php-fpm服 ...