通过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带下拉菜单和焦点图代码分享
Aug 24 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
Sep 06 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
vue router路由嵌套不显示问题的解决方法
Jun 17 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
Vue完整项目构建(进阶篇)
Feb 10 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
Aug 16 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 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获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
PHP环境搭建(php+Apache+mysql)
2016/11/14 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
JS 修改URL参数(实现代码)
2013/07/08 Javascript
JavaScript修改css样式style动态改变元素样式
2013/12/16 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
2016/12/26 Javascript
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
js取小数点后两位四种方法
2019/01/18 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
js实现查询商品案例
2020/07/22 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
python3编写C/S网络程序实例教程
2014/08/25 Python
Python中实现常量(Const)功能
2015/01/28 Python
用Python实现一个简单的多线程TCP服务器的教程
2015/05/05 Python
python Django模板的使用方法
2016/01/14 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Django ORM判断查询结果是否为空,判断django中的orm为空实例
2020/07/09 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
数据库方面面试题
2012/04/22 面试题
师范毕业生求职自荐信
2013/09/25 职场文书
优秀学生获奖感言
2014/02/15 职场文书
初三英语教学计划
2015/01/23 职场文书
个人求职自荐信范文
2015/03/06 职场文书
教师教育心得体会
2016/01/19 职场文书
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python