通过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 计算图片加载数量的代码
Jan 01 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
JavaScript的Number对象的toString()方法
Dec 18 Javascript
JavaScript+canvas实现七色板效果实例
Feb 18 Javascript
正则表达式(语法篇推荐)
Jun 24 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
详解angular 中的自定义指令之详解API
Jun 20 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
微信小程序swiper使用网络图片不显示问题解决
Dec 13 Javascript
JavaScript Tab菜单实现过程解析
May 13 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中读取和写入WORD文档的代码
2008/04/09 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
用js实现多域名不同文件的调用方法
2007/01/12 Javascript
js AspxButton的客户端操作
2009/06/26 Javascript
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
JavaScript String.replace函数参数实例说明
2013/06/06 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
vue router仿天猫底部导航栏功能
2017/10/18 Javascript
JsChart组件使用详解
2018/03/04 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
如何在Angular应用中创建包含组件方法示例
2019/03/23 Javascript
python连接MySQL数据库实例分析
2015/05/12 Python
python删除列表内容
2015/08/04 Python
Python2实现的LED大数字显示效果示例
2017/09/04 Python
用python实现百度翻译的示例代码
2018/03/09 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
Python 在局部变量域中执行代码
2020/08/07 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
Django通过设置CORS解决跨域问题
2020/11/26 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
意大利宠物用品购物网站:Bauzaar
2018/09/15 全球购物
学校个人对照检查材料
2014/08/26 职场文书
解放思想演讲稿
2014/09/11 职场文书
施工安全协议书范本
2014/09/26 职场文书
具结保证书范本
2015/05/11 职场文书