收藏
批改状态：未批改
老师批语：
1选择器
元素选择器，id选择器，类选择器，类型选择器，属性选择器，层次选择器
实际应用中可以很好的结合css样式，比js简便很多；
2事件
$(documnet).ready()加载
$(selector).click()点击事件
还有其他的，js中需要在前边加上on，jQuery中没有；
3结合之前的知识，实现倒计时以及换背景颜色
<!DOCTYPE html>
<html>
<head>
<title>jquery的学习-倒计时</title>
<link rel="icon" type="image/x-icon" href="static/images/favicon.ico">
<!-- 两种引入方式，一种是本地，一种是线上； -->
<!-- <script type="text/javascript" src="static/jquery-3.3.1.min.js"></script> -->
<script src="https://code.jquery.com/jquery-3.11.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{
margin: 70px 320px;
position:relative;
width: 400px;
}
li{
list-style: none;
width: 80px;
height: 30px;
box-shadow:2px inset;
border-top-right-radius: 25px;
line-height: 30px;
text-align: center;
background: rgba(95,8,33,0.6);
float: left;
}
div{
font-size: 36px;
width: 1200px;
height: 180px;
margin: 100px auto;
background: #82d743;
line-height: 180px;
text-align: center;
color:#fff;
position: absolute;top:0px;right: 400px;
float: left;
}
</style>
</head>
<body>
<ul>
<li id="id0" style="background: skyblue;">天蓝</li>
<li id="id1" style="background: pink;">红色</li>
<li id="id2" style="background: yellow;">黄色</li>
<li id="id3" style="background: orange;">橙色</li>
<li id="id4" style="background: green;">绿色</li>
</ul>
<div>
<p>2019年清明节倒计时:<span> </span></p>
</div>
<script type="text/javascript">
$('#id0').click(function(){
$('div').css('background','skyblue');
})
$('#id1').click(function(){
$('div').css('background','pink');
})
$('#id2').click(function(){
$('div').css('background','yellow');
})
$('#id3').click(function(){
$('div').css('background','orange');
})
$('#id4').click(function(){
$('div').css('background','green');
})
$(function(){
function Ro(){
var d=Date.parse("Apr 05,2019") //返回1970到括号里的值的毫秒数
var date=new Date();//获取当前时间
var dd=date.getTime()//返回距1970到现在的毫秒数
var rd=Math.floor((d-dd)/1000);
var days=Math.floor(rd/3600/24);
var hours=Math.floor(rd%(3600*24)/3600);
var mins=Math.floor((rd%3600)/60);
var seds=Math.floor(rd%60);
$('span').text(days+"天"+hours+"小时"+mins+"分钟"+seds+"秒");
}
setInterval(Ro,1000);
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
