效果图:

具体代码

  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. 随手练——USACO 1.44 母亲的牛奶

    P1215 [USACO1.4]母亲的牛奶 Mother's Milk 洛谷 P1215:https://www.luogu.org/problemnew/show/P1215 解题思想:DFS 大一 ...

  2. adb命令篇 (转载)

    转自:https://www.cnblogs.com/ailiailan/p/7896534.html 1.抓log方法  (bat文件)  mkdir D:\logcat set /p miaosh ...

  3. 【vue】父向子组件传参、子组件向父传参

    1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...

  4. 6、Android---运用手机多媒体(待完成)

    6.1.程序运行在手机上 6.2.使用通知 通知是Android中比较由特色的一个功能 当某个应用程序需要向用户发出一些提示信息时 而该程序由不在前台的显示 就可以借助通知来实现 6.2.1.通知的基 ...

  5. php memcache分布式和要注意的问题

    Memcache的分布式介绍 memcached虽然称为“分布式”缓存服务器,但服务器端并没有“分布式”功能.服务器端仅包括内存存储功能,其实现非常简单.至于memcached的分布式,则是完全由客户 ...

  6. 新版剑指offer14 剪绳子

    int maxProduct(int length){ ) ; ) ; ) ; ; == ) numof3 -= ; )/; ,numof3))*(,numof2)); }

  7. 理解java的三大特性之多态

    所谓多态就是指程序中定义的引用变量所指向的具体类型和通过该引用变量发出的方法调用在编程时并不确定,而是在程序运行期间才确定,即一个引用变量倒底会指向哪个类的实例对象,该引用变量发出的方法调用到底是哪个 ...

  8. consul搭建(初步)

    http://www.cnblogs.com/java-zhao/p/5375132.html https://blog.csdn.net/u010246789/article/details/517 ...

  9. 在Java中使用Maven配置的版本信息

    我们在使用maven开发一些项目的时候需要知道当前的版本状态,但版本状态储存在pom.xml文件中,可以采用以下2种方式进行获取: 1. 采用xml解析的方式去获取pom文件的{project.ver ...

  10. 利用matplotlib绘画出二特征的散点图

    实例的所有数据来源于吴恩达教授的机器学习数据,特此感谢.数据源可以前往course下载. 本文主要目地在于绘画二维的散点图,至于scatter的用法可以参见我之前的博客. import pandas ...