JavaScript水滴动态时钟和倒计时时钟

最新推荐文章于 2024-08-31 21:50:03 发布

想一起听海

最新推荐文章于 2024-08-31 21:50:03 发布

阅读量323

点赞数 2

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_68683361/article/details/126979751

版权

4.3 date对象的常用属性和方法

Dpale 对象包含日期和时间的相关信息。Dule对象没有任何属性，它只具有很多用于现

创建日期对象的语法如下:

var now = new Date();//获得当前的日期对象
var now = new Date(dateval);
var now = new date(year,month,date[,hours,[,minutes[,seconds[,ms]]]]);
//年月日时分秒

4.4构造自定义日期对象参数说明

构造自定义日期对象参数说明

参数

参数说明

now

必选项。要赋值为Date对象的变量名

必选项。如果是数字值，dateVal 表示指定日期从1970年1月1日0时0分经过的毫秒

dateVal

数。如果是字符串，则dateVal按照parse方法中的规则进行解析

year

必选项。完整的年份，如1976(而不是76)

month

必选项。表示月份，是从0到11之间的整数(1月至12月)

date

必选项。表示日期，是从1到31之间的整数

hours

可选项。如果提供了minutes, 则必须给出。表示小时，是从0到23的整数(午夜到1om)

minutes

可选项。如果提供了seconds, 则必须给出。表示分钟，是从0到59的整数

seconds

可选项。如果提供了milliseconds, 则必须给出。表示秒钟，是从0到59的整数
ms

可选项。表示毫秒，是从0到999的整数

Date对象常用的方法

方法

说明

getDate( )

返回Date对象中月份中的天数，其值介于1至31之间

getDayO

返回Date对象中的星期几，其值介于0至6之间

getHours( )

返回Date对象中的小时数，其值介于0至23之间

getMinutesO

返回Date对象中的分钟数，其值介于0至59之间

getSeconds(

返回Date对象中的秒数，其值介于0至59之间

getMonth()

返回Date对象中的月份，其值介于0至11之间

getFullYearO

返回Date对象中的年份，其值为四位数

getTime()

返回自某一时刻(1970年1月1日)以来的毫秒数

下面利用Date对象，-步步实现并完善一个走动时钟的效果，

我么也可以在边框中加入内部颜色和字体颜色列如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" style="background-color: aquamarine;color: gold;" name="time" id="time" value="" />
		<script type="text/javascript">
			setInterval(function() {
				var date = new Date()
				console.log(date)
				var year = date.getFullYear()
				var month = date.getMonth() + 1
				console.log(year, month)
				var day = date.getDate()
				console.log(day)
				var hour = date.getHours()
				var minutes = date.getMinutes()
				var seconds = date.getSeconds()
				var result = year + "年" + month + "月" + day + "日" + hour + ":" + minutes + ":" + seconds
				document.getElementById("time").value = result
			}, 1000)
		</script>
	</body>
</html>

5.0利用setInterval()函数实现倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="一分钟倒计时" onclick="daojishi()" />
		<label id="time">60</label>
		<script>
			function daojishi() {
				var time = 60;
				var interval = setInterval(function() {
					document.getElementById("time").innerHTML = time;
					time -= 1;
					if (time == -1) {
						clearInterval(interval)
						document.getElementById("time").innerHTML = "倒计时结束"
					}
				}, 1100)
			}
		</script>

	</body>
</html>