通过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 相关文章推荐
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
js 剪切板应用clipboardData详细解析
Dec 17 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
js实现键盘控制DIV移动的方法
Jan 10 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
9102年webpack4搭建vue项目的方法步骤
Feb 20 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
JS实现音量控制拖动
Jan 15 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上传图片类及用法示例
2016/05/11 PHP
google地图的路线实现代码
2009/08/20 Javascript
Jquery中val()表单取值赋值的实例代码
2013/08/15 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
EasyUI Pagination 分页的两种做法小结
2016/07/09 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
jQuery实现动态删除LI的方法
2017/05/30 jQuery
vue2中filter()的实现代码
2017/07/09 Javascript
Vue中父组件向子组件通信的方法
2017/07/11 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
详解angular笔记路由之angular-router
2017/09/12 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
2020/04/26 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
2020/07/11 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python获取linux主机ip的简单实现方法
2016/04/18 Python
tensorflow实现简单的卷积网络
2018/05/24 Python
Python 实现文件打包、上传与校验的方法
2019/02/13 Python
Python API 自动化实战详解(纯代码)
2019/06/11 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
对python中return与yield的区别详解
2020/03/12 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
法制宣传标语集锦
2014/06/25 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
年底个人总结范文
2015/03/10 职场文书
2015年加油站工作总结
2015/05/13 职场文书