----简易京东30分钟倒计时----

最新推荐文章于 2024-04-04 12:32:48 发布

在校小白！！！

最新推荐文章于 2024-04-04 12:32:48 发布

阅读量180

点赞数 2

分类专栏：小白入门文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_47621353/article/details/112947499

版权

小白入门专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简易京东30分钟倒计时

（html+js+css）
**
（一起加油不喜勿喷）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>京东倒计时</title>
	<style type="text/css">
		#box{
			background-color: red;
			width: 250px;
			height: 300px;
			position: absolute;
			
		}
		td{
			background-color:rgb(171,171,171);
		}
		#box>table{
			margin-left: 25px;
		}
		input{
			width: 60px;
			height: 60px;
			background-color:rgb(171,171,171);
			border:0px;
			font-size: 30px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="box">
		<table style="width: 200px;height: 100px">
			<tr>
				<td>
					<input type="text" name="" id="hour" value="00">
				</td>
				<td>
					<input type="text" name="" id="minute" value="30">
				</td>
				<td>
					<input type="text" name="" id="second" value="60" style="">
				</td>
			</tr>
			<tr style="background-color: rgb(255,0,0);">
				<td colspan="3" style="width: 180px;height: 200px;text-align: center;">
					<span><font size="6" weight ="5px">京东秒杀</font></span>
				</td>
			</tr>
		</table>
	</div>
	<script type="text/javascript">
		var hour = document.getElementById('hour');//获取小时
		var minute = document.getElementById('minute');//获取分钟
		var second = document.getElementById('second');//获取秒数
		var i = second.value;
		//书写一个30分钟倒计时函数
		function second01(){
			i--;
			second.value = i;
			if (i < 10) {
				second.value = '0' + second.value;
			}
			// console.log(typeof i);测试代码 文本框中的值是number类型
			if (i == 0) {//如果i等于0就执行里面的操作
				minute.value = minute.value - 1;//分钟-1
				i = 60;//同时秒重新变为60
			}
			if (minute == 0) {
				alert('倒计时结束！')
			}
		}
		setInterval(second01,1000);
	</script>
</body>
</html>

在这里插入图片描述

在校小白！！！

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
----简易京东30分钟倒计时----

**简易京东30秒倒计时（html+js+css）**（一起加油不喜勿喷）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>京东倒计时</title> <style type="text/css"> #box{ background-color: red; width: 250px; height: 300px;
复制链接

扫一扫