效果图:

具体代码

  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. A blog about Core Animation and other iOS graphics framework

    A blog about Core Animation and other iOS graphics frameworks. https://www.calayer.com/

  2. Android笔记之 Web Service 基础

    一.Web Service是什么? 就是网络服务.依据W3C的定义,WebServices(Web服务)是一个用于支持网络间不同机器互操作的软件系统,它是一种自包括.自描写叙述和模块化的应用程序,它能 ...

  3. gluoncv faster_rcnn 参数修改

    https://github.com/dmlc/gluon-cv/blob/master/gluoncv/model_zoo/faster_rcnn/faster_rcnn.py 对你选用的模块,修改 ...

  4. 2、RabbitMQ-simplest thing(简单队列)

    1.项目准备: 使用maven的依赖 <dependencies> <dependency> <groupId>com.rabbitmq</groupId&g ...

  5. ethereumjs-vm/examples/run-transactions-complete

    1.设置账户: ethereumjs-vm/examples/run-transactions-complete/key-pair.json { "secretKey": &quo ...

  6. vue-scroll 底部无数据时,底部出现大片的空白

    vue-scroll放在vue的项目中,实现下拉刷新的效果,但是发现,不能上拉的bug,上拉了之后,底部出现了一大段的空白,参照GitHub的问题,算是暂时解决了. 不能上拉的原因是:滑动标签里边的内 ...

  7. uva 10369 Arctic Network (最小生成树加丁点变形)

    The Department of National Defence(DND)wishestoconnectseveral northern outposts by a wireless networ ...

  8. 网络测量中基于Sketch方法的调查

    目录 LD Sketch SeqHash What's New reversible sketch Count-Sketch和Count-min sketch Diamond Sketch: Accu ...

  9. 清理 Xcode 10 记录

    1,清理 ~/Library/Developer/CoreSimulator/Devices 说明:该目录存放当前的所有模拟器,每个标识符代表一台机器,清理掉避免存在旧版本的模拟器缓存 执行: 关闭模 ...

  10. 【Python】01 - 常见用法随见随梳理

    1. range() 和 xrange()的区别 for x in range(5): print x for x in xrange(5): print x 这么看,range和xrange返回的值 ...