通过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 相关文章推荐
jquery 与NVelocity 产生冲突的解决方法
Jun 13 Javascript
分享一个asp.net pager分页控件
Jan 04 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
jQuery 3.0 的变化及使用方法
Feb 01 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
Angular2使用Angular CLI快速搭建工程(一)
May 21 Javascript
如何将百度地图包装成Vue的组件的方法步骤
Feb 12 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 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
JSON两种结构之对象和数组的理解
2016/07/19 PHP
jquery的flexigrid无法显示数据提示获取到数据
2013/07/19 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
JS实现支持Ajax验证的表单插件
2016/03/24 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
2016/04/15 Javascript
jQuery文字横向滚动效果的实现代码
2016/05/31 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
nodejs实现超简单生成二维码的方法
2018/03/17 NodeJs
vue element table 表格请求后台排序的方法
2018/09/28 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
2019/05/06 Javascript
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python做反被爬保护的方法
2019/07/01 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Django模型中字段属性choice使用说明
2020/03/30 Python
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
八年级生物教学反思
2014/01/22 职场文书
网络技术专业求职信
2014/02/18 职场文书
护理中职生求职信范文
2014/02/24 职场文书
学习交流会主持词
2014/04/01 职场文书
作风转变心得体会
2014/09/02 职场文书
大学生作弊检讨书
2014/09/11 职场文书
治庸问责心得体会
2014/09/12 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
专家推荐信范文
2015/03/26 职场文书
买卖合同纠纷代理词
2015/05/25 职场文书
北京爱情故事观后感
2015/06/12 职场文书
Python django中如何使用restful框架
2021/06/23 Python
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python
python和anaconda的区别
2022/05/06 Python