JavaScript案例:倒计时
2024-10-21 11:56:06
展示效果:
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时</title>
<style>
a{
/*去除下划线*/
text-decoration: none;
color: black;
font-size: 20px;
}
span{
color: skyblue;
font-size: 25px;
}
</style>
</head>
<body>
<div>
<a href="#">现在是北京时间:</a>
<span>2022</span>
<a href="#">年</a>
<span>5</span>
<a href="#">月</a>
<span>5</span>
<a href="#">日</a>
<span>19</span>
<a href="#">:</a>
<span>50</span>
<a href="#">:</a>
<span>54</span>
</div>
<div>
<a href="#">敌军还有</a>
<span>5</span>
<a href="#">秒到达战场······</a>
</div>
<script>
var box = document.getElementsByTagName("div");
var spa = document.getElementsByTagName("span");
// 日期
setInterval(function () {
var data = new Date();
// 获取年
var year = data.getFullYear();
// 获取月
var mouth = data.getMonth()+1;
// 获取日
var day = data.getDate();
// 获取时
var hour = data.getHours();
// 获取分
var mini = data.getMinutes();
// 获取秒
var sec = data.getSeconds();
// 补齐两位数
if (mini<10){
mini = "0" + mini;
}
if (sec<10){
sec = "0" + sec;
}
// 获取到的年赋值给第一个span标签
spa[0].innerText = year;
spa[1].innerText = mouth;
spa[2].innerText = day;
spa[3].innerText = hour;
spa[4].innerText = mini;
spa[5].innerText = sec;
},1000)
var timer = 6;
setInterval(function () {
if (timer<=0){
box[1].innerText = "时间已到,全军出击!!!";
box[1].style.color = "red";
box[1].style.fontSize = "20px";
}else {
timer--;
spa[6].innerText = timer;
}
},1000)
</script>
</body>
</html>
最新文章
- [C#] 了解过入口函数 Main() 吗?带你用批处理玩转 Main 函数
- Android—基于微信开放平台v3SDK,开发微信支付填坑。
- jdk安装及环境变量配置
- SAS提供的机器学习算法
- Yii2的深入学习--入口文件
- 白话Https
- 使用ocr的自动备份还原ocr
- 什么是 Web API
- JETTY嵌入式Web容器的开发
- Canopy使用教程 (3)
- iOS-NSThread使用
- Flie类
- starting Intent from ProcessRecord with revoked permission android.permission.CALL_PHONE 的错误
- Django之逆向解析url
- PHP-FPM进程数的设定
- Java虚拟机:类加载机制详解
- java四则运算生成器
- IDEA第七章----插件
- 构建web应用之——文件上传
- SpringBoot集成Thymeleaf模板引擎