js时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv = "content-type" content="text/html;charset=utf-8"/>
		<script src="js.js" type="text/javascript" language="javascript">
		</script>
	</head>
	<body>
		<form>
			<input type = "text" id = "time" />
			<input type = "button" value = "启动时钟" onclick = "start()"/>
			<input type = "button" value = "关闭时钟" onclick = "stop()"/>
		</form>
	</body>
</html>

//js.js
var timer;
function start(){
	timer = window.setInterval(time,1000);///设置定时器  第一个参数表示要干什么  第二个参数表示时间间隔   返回一个时钟,用于区别其他时钟以及关闭
}
function time(){
	var date = new Date();///获得一个Date对象
	var datestr = date.toLocaleTimeString();///取得时间  没有年月日  
	document.getElementById("time").value = datestr;
}
function stop(){
	window.clearInterval(timer);///关闭时钟  参数为设置时钟时的返回值
}

另一时钟  用于只执行一次的时钟

//jsdemo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<meta http-equiv = "content-type" content="text/html;charset=utf-8"/>

<script src="js.js" type="text/javascript" language="javascript">

</script>

</head>

<body>

<form>

<input type = "button" value = "启动时钟" onclick = "waithello();"/>

<a href = "javascript:cancel();">取消</a>

</form>

</body>

</html>

//js.js

var time1;
function waithello(){
	time1 = window.setTimeout("alert(‘hello‘)",3000);///window.setTimeout(f,时间) 第一个参数是要执行的内容 可以是一个方法,第二个是间隔的时间,
	//用于将一个操作延迟一定的时间  执行一次
}
function cancel(){
	//用于当不想将操作延迟时  可以打断延迟,取消延迟
	window.clearTimeout(time1);
}

js时钟,布布扣,bubuko.com

时间: 2024-10-09 21:53:52

js时钟的相关文章

js时钟显示

<script type="text/javascript"> onload=function(){ start(); clock = window.setInterval('start()',1000); btn = document.getElementById('btn'); btn.addEventListener('click',timeOut); btnTxt = btn.childNodes[0]; } function start(){ var date =

js 时钟特效

时钟特效 CreateTime--2018年2月24日15:11:23 Author:Marydon 实现方式:都是基于HTML5的canvas标签实现的 款式一 借助jQuery插件实现 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="

html css js 时钟 计时器

时钟 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title>    <script>      var _hmt = _hmt || [];      (function() {       var hm = document.createElement("script"

FlipClock.js时钟,计数,3D翻转插件

1.FlipClock.js能够自动定义计数,时钟的翻牌效果,调用简单,下面简单记录下用法 2.官网地址:http://www.flipclockjs.com/ 3.调用2个文件 <link href="/assets/css/flipclock.css" rel="stylesheet" type="text/css"> <script src="/assets/js/flipclock/flipclock.min.

css3和原生js时钟

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width:200px; height:200px; border-radius: 50%; border:1px solid #000; position: relative; mar

js时钟demo

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><title>无标题文档</title><style type="text/css"> *{ margin:0; padding:0; font-size:40px; } .container{ position:relative; width:

JS时钟钟表

<!DOCTYPE html> <html>    <head>        <meta charset="utf-8" />        <title></title>        <style> .clock{                width: 600px;                height: 600px;                background: url(im

JS 时钟

<script language=javascript> function Year_Month(){ var now = new Date(); var yy = now.getFullYear(); var mm = now.getMonth()+1; var cl = '<font color="#666666">'; if (now.getDay() == 0) cl = '<font color="#666666">';

react.js 时钟组件

React是用于构建用户界面的 JavaScript 库,React 组件使用一个名为 render() 的方法, 接收数据作为输入,输出页面中对应展示的内容. React除了可以使用外部传入的数据以外 (通过 this.props 访问传入数据), 组件还可以拥有其内部的状态数据 (通过 this.state 访问状态数据). 当组件的状态数据改变时, 组件会调用 render() 方法重新渲染.效果图没用样式写一下,凑合着看吧! 实例模拟: <style> .list{ list-styl