收藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<style>
div{
margin: 200px auto;
height: 100px;width: 800px;line-height: 100px;border-radius: 10px;background:rgba(0,255,100,0.8);color: white;text-align: center;}
</style>
</head>
<body>
<div>
<h1></h1>
</div>
</body>
<script>
$(function(){
function timeshow(){
var timeNow = new Date().getTime();
var timeThen = Date.parse("2019-05-01")
var timeLeft = timeThen-timeNow;
var dayLeft = Math.floor(timeLeft/86400000);
var hourLeft = Math.floor((timeLeft%86400000)/3600000);
var minLeft = Math.floor((timeLeft%3600000)/60000);
var secLeft = Math.floor((timeLeft%60000)/1000);
var timeShow = "距离五一放假还有 -"+dayLeft+"- 天 -"+hourLeft+"- 小时 -"+minLeft+"- 分 -"+secLeft+"- 秒";
$('h1').text(timeShow);
}
setInterval(timeshow,100);
})
</script>
</html>点击 "运行实例" 按钮查看在线实例
效果图
思路与总结：
1、用date对象的geTime方法和parse方法分别获取当前时间与目标时间的毫秒数（距离1970年），相减得到与目标日期的毫秒差；再用除法和取模，得到天、时、分秒，并拼接为字符串
2、用$()选择器选择h1标签对应的元素，把拼接好的字符串用text()方法给这个元素
3、用setInterval方法执行代码块
*text()方法将直接输出带格式的字符串内容， 也将直接输出，不会转为空格
*除了明确定义触发条件的方法，jquery编程中，其他代码应该放到$(function(){})中
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
