通过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 相关文章推荐
关于Jqzoom的使用心得 jquery放大镜效果插件
Apr 12 Javascript
javascript 词法作用域和闭包分析说明
Aug 12 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
JavaScript中this详解
Sep 01 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
Node.js API详解之 timer模块用法实例分析
May 07 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php获取当前月与上个月月初及月末时间戳的方法
2016/12/05 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
js传值 判断
2006/10/26 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
nodejs教程之异步I/O
2014/11/21 NodeJs
原生JS京东轮播图代码
2017/03/22 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
js链表操作(实例讲解)
2017/08/29 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
vue 实现剪裁图片并上传服务器功能
2018/03/01 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
关于js陀螺仪的理解分析
2019/04/11 Javascript
Vue.js组件props数据验证实现详解
2019/10/19 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
python thread 并发且顺序运行示例
2009/04/09 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python实现读Excel写入.txt的方法
2018/04/29 Python
pytorch实现CNN卷积神经网络
2020/02/19 Python
python实现PCA降维的示例详解
2020/02/24 Python
pytorch SENet实现案例
2020/06/24 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
2014最新离职证明范本
2014/09/12 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
2016秋季田径运动会广播稿
2015/12/21 职场文书
python操作xlsx格式文件并读取
2021/06/02 Python
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python
vue封装数字翻牌器
2022/04/20 Vue.js