通过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 相关文章推荐
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
javascript遍历控件实例详细解析
Jan 10 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
Jul 05 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
Apr 16 Javascript
JS+CSS3实现超炫的散列画廊特效
Jul 16 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
详解 TypeScript 枚举类型
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
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
Laravel框架实现的记录SQL日志功能示例
2018/06/19 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
分享几种好用的PHP自定义加密函数(可逆/不可逆)
2020/09/15 PHP
让网页根据不同IE版本显示不同的内容
2009/02/08 Javascript
javascript学习笔记(七)利用javascript来创建和存储cookie
2011/04/08 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
js 金额格式化来回转换示例
2014/02/23 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
js实现年月日表单三级联动
2020/04/17 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
微信小程序vant弹窗组件的实现方式
2020/02/21 Javascript
[02:35]DOTA2超级联赛专访XB 难忘一年九冠称王
2013/06/20 DOTA
Python复数属性和方法运算操作示例
2017/07/21 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
使用EduBlock轻松学习Python编程
2018/10/08 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
如何把python项目部署到linux服务器
2020/08/26 Python
如何用python 操作zookeeper
2020/12/28 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
食品流通安全承诺书
2014/05/22 职场文书
建筑安全责任书范本
2014/07/24 职场文书
听证通知书
2015/04/24 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
小学教代会开幕词
2016/03/04 职场文书
使用 Apache Dubbo 实现远程通信(微服务架构)
2022/02/12 Servers