首页 web前端 js教程 JS实现实时反馈当前时间功能

JS实现实时反馈当前时间功能

Apr 16, 2018 pm 04:57 PM
javascript 时间

这次给大家带来JS实现实时反馈当前时间功能,JS实现实时反馈当前时间功能的注意事项有哪些,下面就是实战案例,一起来看一下。

javascript反馈系统时间

运用知识

JavaScript HTML DOM

HTML DOM 中的setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法setInterval(code,milliseconds)

code——代码(可以为函数)

milliseconds——在此调用的时间(毫秒)

因此,我们想让反馈的系统时间动起来,只需要让方法没隔1000毫秒调用一次就可以使显示的时间像闹钟一样动起来。

setInterval(function(){myTimer()},1000)

new Date()//获得当前时间
.toLocaleTimeString()//根据本地时间把Date对象的时间部分转换为字符串
.getElementById("clock")//返回带有指定 ID 的元素
.innerHTML=c; //将c返回给指定元素
登录后复制

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <p id="clock"></p>
</body>
<script>
  var a = setInterval(function(){myTimer()},1000);
  function myTimer(){
    var b = new Date();
    var c = b.toLocaleTimeString();
    document.getElementById("clock").innerHTML=c;
  }
</script>
</html>
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:



以上是JS实现实时反馈当前时间功能的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章

仓库:如何复兴队友
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热门文章标签

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

抖音10级灯牌多少钱?10级粉丝灯牌需要几天? 抖音10级灯牌多少钱?10级粉丝灯牌需要几天? Mar 11, 2024 pm 05:37 PM

抖音10级灯牌多少钱?10级粉丝灯牌需要几天?

小红书发布作品时间怎么设置?发布作品时间准确吗? 小红书发布作品时间怎么设置?发布作品时间准确吗? Mar 24, 2024 pm 01:31 PM

小红书发布作品时间怎么设置?发布作品时间准确吗?

艾尔登法环通关需要多久 艾尔登法环通关需要多久 Mar 11, 2024 pm 12:50 PM

艾尔登法环通关需要多久

Linux 文件时间查看技巧详解 Linux 文件时间查看技巧详解 Feb 21, 2024 pm 01:15 PM

Linux 文件时间查看技巧详解

gshock手表怎么调时间 gshock手表怎么调时间 Feb 21, 2024 pm 09:04 PM

gshock手表怎么调时间

电脑时间调整后仍不准确 电脑时间调整后仍不准确 Feb 19, 2024 pm 05:28 PM

电脑时间调整后仍不准确

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

简易JavaScript教程:获取HTTP状态码的方法

命运方舟困梦什么时候出 命运方舟困梦什么时候出 Mar 14, 2024 pm 03:00 PM

命运方舟困梦什么时候出

See all articles