通过js控制时间,一秒一秒自己动的实例


Posted in Javascript onOctober 25, 2017

1、第一种形式

<html>
 <head>
 <title>时间</title>
 <script type="text/javascript">
setInterval("showtime()", 1000);
function showtime() {
var date = new Date();
var time = date.getHours() + ":" + date.getMinutes() + ":"
+ date.getSeconds();
document.getElementById("timeBox").value = time;
}
</script>
 </head>
 <body>
 <div style="text-align:center;">
  当前时间:<input type="text" name="timeBox" id="time" />
 </div>
 </body>
</html>

2、第二种形式

<html>
 <head>
 <title>时间</title>
 <script type="text/javascript">
 //获得当前时间,刻度为一千分一秒 
 function showLeftTime() {  
 var now = new Date();  
 var year = now.getFullYear();  
 var month = now.getMonth() + 1;  
 var day = now.getDate();  
 var hours = now.getHours();  
 var minutes = now.getMinutes();  
 var seconds = now.getSeconds();  
 document.all.show.innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + ""; 
 //document.getElementById("show").innerHTML = "" + year + "年" + month + "月" + day + "日</br> " + hours + ":" + minutes + ":" + seconds + "";  
  
 //一秒刷新一次显示时间 
 setTimeout(showLeftTime, 1000); 
 } 
 
 </script> 
 </head>
 <body onload="showLeftTime()">
 <label id="show"></label><br/>
 <!-- <script type="text/javaScript">
 showLeftTime();
 </script> -->
 </body>
</html>

以上这篇通过js控制时间,一秒一秒自己动的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js下弹出窗口的变通
Apr 18 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
详解Node.js中的事件机制
Sep 22 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
React Native如何消除启动时白屏的方法
Aug 08 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 #Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
Oct 25 #Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 #Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 #Javascript
浅谈Vue的加载顺序探讨
Oct 25 #Javascript
JavaScript模块模式实例详解
Oct 25 #Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 #Javascript
You might like
国外十大最流行的PHP框架排名
2013/07/04 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
jQuery Masonry瀑布流插件使用详解
2014/11/17 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
js带点自动图片轮播幻灯片特效代码分享
2015/09/07 Javascript
JavaScript正则表达式匹配 div  style标签
2016/03/15 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
Python和perl实现批量对目录下电子书文件重命名的代码分享
2014/11/21 Python
Python科学计算之Pandas详解
2017/01/15 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Python基础学习之类与实例基本用法与注意事项详解
2019/06/17 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
python如何调用java类
2020/07/05 Python
实例讲解利用HTML5 Canvas API操作图形旋转的方法
2016/03/22 HTML / CSS
品恩科技软件测试面试题
2014/10/26 面试题
母亲80寿诞答谢词
2014/01/16 职场文书
音乐教学反思
2014/02/02 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
青春雷锋观后感
2015/06/10 职场文书
2015年中学图书馆工作总结
2015/07/22 职场文书
安全教育培训制度
2015/08/06 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android