实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQ事件</title>
<link rel="stylesheet" type="text/css" href="">
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.main{
width: 100%;
}
.container{
width: 1000px;
height: 150px;
background: red;
margin: 20px auto;
text-align: center;
line-height: 150px;
color:#fff;
font-size: 30px
}
</style>
</head>
<body>
<div class="main">
<div class="container">
<p>距离清明节还有<span> </span></p>
</div>
<span>点击变色</span>
</div>
<script type="text/javascript">
//入口函数
$(function(){
//检测jQ是否加载成功
if(typeof $=='undefined'){
console.log('JQ未成功加载');
}else{
console.log('JQ加载成功');
}
//jQ事件：格式：$('选择器').事件( function(){} )
$('.main>span').css('display','none');
$('.main>span').click(function(){
$('body').css('background','#ccc');
})
//倒计时
function count_down(){
var d=Date.parse("Apr 05,2019");
var date=new Date();
var dd=date.getTime();
var a=Math.floor((d-dd)/86400000);//天
var b=Math.floor(((d-dd)%86400000)/3600000)//小时
var c=Math.floor((((d-dd)%86400000)%3600000)/60000)//分钟
var e=Math.floor(((((d-dd)%86400000)%3600000)%60000)/1000)//秒
$('p>span').text(a+"天"+b+"时"+c+"分钟"+e+"秒");
}
setInterval(count_down,1);
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例