通过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组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
详解vue数据渲染出现闪烁问题
Jun 29 Javascript
node.js基础知识小结
Feb 26 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
Aug 30 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 Javascript
React和Vue中监听变量变化的方法
Nov 14 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
原型和原型链 prototype和proto的区别详情
Nov 02 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下通过POST还是GET来传值
2008/06/05 PHP
PHP制作图形验证码代码分享
2014/10/23 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
form表单传递数组数据、php脚本接收的实例
2017/02/09 PHP
prototype 的说明 js类
2006/09/07 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
JavaScript阻止回车提交表单的方法
2015/12/30 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
javascript 作用于作用域链的详解
2017/09/27 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
python print 按逗号或空格分隔的方法
2018/05/02 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
linux安装Python3.4.2的操作方法
2018/09/28 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python变量、数据类型、数据类型转换相关函数用法实例详解
2020/01/09 Python
理解Django 中Call Stack机制的小Demo
2020/09/01 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
2020/11/28 Python
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
跑出一片天观后感
2015/06/08 职场文书