JavaScript 倒计时器,闹钟功能
2024-10-01 21:14:39
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js实现倒计时</title>
<style>
div{
position:absolute;
width:400px;
height:50px;
left:50%;
top:50%; } span {
text-align: center;
font-size:40px;
} </style>
</head>
<body> <div id="container"> <span id="demo"></span> </div>
</body>
<script> function clock(mytime){ //设置要倒计时的时间
var stime=new Date(mytime).getTime();
// 获取目前的时间
var ntime=new Date().getTime();
var dtime=stime-ntime; if(dtime>0){//可以在此处设置闹钟 var days = Math.floor(dtime / (1000 * 60 * 60 * 24));
var hours = Math.floor((dtime% (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((dtime % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((dtime % (1000 * 60)) / 1000);
document.getElementById("demo").innerHTML = days +"天" +hours +"时" + minutes +"分" +seconds +"秒";
}
else{//闹钟好了
var div=document.getElementById("container");
var audio=document.createElement("audio");
div.appendChild(audio);
audio.src="喜相逢.mp3";
audio.loop="loop";
audio.autoplay="autoplay"; } }
//重复调用
setInterval(clock,1000)
</script>
</html>
最新文章
- 一次基于etcd的分布式锁自动延时失败问题的排查
- Object.assign()方法
- C# Image Resizer
- [LeetCode] Copy List with Random Pointe
- Gentoo Linux 学习笔记1
- Container/Injection
- LR12集合点设置和多个负载生成器策略
- 不用安装Oracle客户端
- c++ 入门之深入探讨拷贝函数和内存分配
- AX_InventCounting
- cf796d 树,bfs好题!
- ORACLE安装入门篇OEL5.4安装ORACLE11g
- Executor框架(一)
- python所有基础
- CSS高速制作图片轮播的焦点
- Windows最全快捷键
- 配置bond
- 开源高性能网络库Libevent的简介
- PDF文件如何转成markdown格式
- 记CM+kerberos环境停电后无法启动报错An error: (java.security.PrivilegedActionException: javax.security.sasl.SaslException: GSS initiate failed [Caused by GSSException: No valid credentials provided (Mechanism leve
热门文章
- MVC ValidateInput(false)页面验证失效的解决方案
- C# Dapper 基本使用 增删改查事务等
- Python正则表达式初识(六)
- HDU-5307 He is Flying (FFT)
- 统计学习:《贝叶斯思维统计建模的Python学习法》中文PDF+英文PDF+代码
- 学习推荐《精通Python网络爬虫:核心技术、框架与项目实战》中文PDF+源代码
- expr---计算工具
- 03014_properties配置文件
- 【Henu ACM Round#15 B】A and B and Compilation Errors
- 【hiho39】二分&#183;归并排序之逆序对