实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<style type="text/css">
.content{width: 80%; height: 350px; margin: 0 auto; }
</style>
<body>
<div class="content">
<div class="timespan">
</div>
</div>
</body>
<script type="text/javascript">
var starttime= new Date("2019/02/04");
setInterval(function(){
var nowtime=new Date();
var time= starttime-nowtime ;
var day = parseInt(time / 1000 / 60 / 60 / 24);
var hour = parseInt(time / 1000 / 60 / 60 % 24);
var minute = parseInt(time / 1000 / 60 % 60);
var seconds = parseInt(time / 1000 % 60);
$('.timespan').html("距离过年"+day+"天"+hour+"小时"+minute+"分钟"+seconds+"秒")
})
$(function(){
$('.content').css('background','pink')
$('.timespan').css({"color":"#fff","padding-top":"100px","text-align":"center","font-size":"50px"})
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>知识点</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="zfx">
</div>
<button type="button" id="but">隐藏</button>
<button type="button" class="but">显示</button>
<button type="button" class="jx">点我有惊喜</button>
<br>
<br>
<input type="text" value="" />
</body>
<script type="text/javascript">
$(function (){
$('#zfx').css({"width":"300px","height":"300px","background":"pink"})
$('#but').click(function(){
$('#zfx').css('display','none')
})
$('.but').click(function(){
$('#zfx').show(1000)
})
$("button.jx").click(function(){
$('#zfx').text("惊不惊喜，意不意外")
})
})
$(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
$("#zfx").mouseover(function(){
$("#zfx").text("浮动显示文字")
});
$("#zfx").mouseout(function(){
$("#zfx").text("")
})
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
