收藏
批改状态：未批改
老师批语：
使用parse() 方法获取目标时间到时间戳的毫秒数 new Date(); 获取当前时间 .getTime获取当前时间到时间戳的毫秒数,然后相减再使用取余的方法转换成天,小时,分钟等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"src="jquery-3.3.1.min.js">
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
font-size: 36px;
width: 1200px;
height: 180px;
margin: 100px auto;
background: #82d743;
line-height: 180px;
text-align: center;
color: #fff;
}
</style>
<title>倒计时</title>
</head>
<body>
<div>
<p>距离春节倒计时 <span></span> </p>
</div>
<script type="text/javascript">
$(document).ready(function(){
function RO(){
//parse() 方法可解析一个日期时间字符串,并返回1970/1/1午夜距离该日期时间的毫秒数;时间戳
//返回目标日期与时间戳之间的毫秒数
var d=Date.parse("2020/01/24");
var date= new Date();
//返回当前时间到时间戳的毫秒
var dd=date.getTime();
//取秒
var rd=Math.floor((d-dd)/1000);
var days=Math.floor(rd/86400);
var hours=Math.floor(rd%86400/3600);
var minus=Math.floor(rd%3600/60);
var secos=Math.floor(rd%60);
$('span').text(days+'天'+hours+'小时'+minus+'分'+secos+'秒');
}
setInterval(RO,1);
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结:
1:学习了jquery的两种引入方法
2:if(typeof $=='undefined')来测试jq有没有引入成功
3:入口就绪函数: $(document).ready(function(){}) 或 $(function(){})
4:选择器: 元素选择器$('body') id选择器$('#box') class选择器$('.box') 匹配多个选择器$('#box,.box') 类型选择器$('li.list')
属性选择器$('[href]') $("a[target='_blank']") 层级选择器 $('父级元素>子级元素') $('祖先元素 后代元素') 比较选择器 大于$(':gt(x)') 小于$(':lt(x)') 等于$(':eq(x)')
5:事件的使用 例:$('button').click(function() 点击事件
6:实例: 倒计时
parse() 返回指定日期到时间戳的毫秒数 具体的取时间的实现,就是逻辑算数问题了 也是固定不变的.
Date.parse("Apr 05,2019") 也可以Date.parse("2019/4/5") 或2019/04/05
这节课程不难 在琢磨文本框输入时间 然后页面显示倒计时 要是琢磨出来了 我会更新代码的
感谢老师
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
