实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>灭绝师太老师第一堂课的作业1</title>
<script src="js/jq_3.3.1_mi.js"></script>
</head>
<style>
.header{width:1000px; height:100px; background-color: brown; text-align: center;color: cornsilk;margin: 0 auto;}
h1{line-height: 100px;}
.banner{width:1080px; bor der: 3px solid red;margin: 0 auto;}
.banner .box{ height: 250px; width:250px; background-color: crimson; border-radius:250px; margin: 0 auto;}
.banner h2{ line-height:250px; text-align:center; color: darkgray;font-size:20px;}
button{font-size: 25px; text-align: center; width:180px; margin:10px; margin-left: 100px;color: darkgreen; background-color: ghostwhite;
}
.qingkong{margin-left:950PX;}
textarea{resize:none; border-radius:17px; outline:none;}
p{ text-align:center; font-size:20px; color: brown;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
</style>
<body>
<div class="header">
<h1>灭绝老师布置的作业一</h1>
</div>
<div class="banner">
<div class="box">
<h2>拿着我练习一下</h2>
</div>
<button id="btn">消失吧</button>
<button class="btn">出来吧</button>
<button id="bta">改变吧</button>
</div>
<p>灭绝老师真的了不起</p>
<button class="qingkong">把所有页面清空把</button>
<form>
<label for="liuyan"> <h1>请留言吧</h1></label>
<br>
<textarea id="liuyan" cols="300" rows="20"></textarea>
</form>
</body>
<script>
$('#btn').click(function(){
$('.box').css('display','none')
})
$('.btn').click(function(){
$('.box').show(1500);
})
/* $(':button').click(function(){
$('.box').css('background-color','#015245');
})
*/
$('#bta').click(function(){
$('.box').css('background-color','#015245');
})
$('p').mouseover(function(){
$(this).css('background-color','#012535')
})
$('p').mouseleave(function(){
$(this).css('background-color','#FFF')
})
$('.qingkong').click(function(){
$('*').hide();
})
$('textarea').focus(function(){
$(this).css("border","1px solid red");
})
$('textarea').blur(function(){
$(this).css("border","1px solid #000");
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>灭绝老师作业2-写时钟</title>
<style>
.jia{height:500px; width:1902px; background-color: blanchedalmond; margin: 0 auto;}
h1,h2{ text-align: center; li ne-height:500px; color: brown; text-shadow:0.5px 1px #333; font-weight:bold;}
h1{padding-top: 230px;}
</style>
<script src="js/jq_3.3.1_mi.js"></script>
</head>
<body>
<div class="jia">
<div>
<h1>2019年农历春节倒计时：</h1> <h2></h2>
</div>
</div>
</body>
<script>
$(function(){
function shi(){
var d= Date.parse("Feb 05,2019");
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);
$('h2').text(days+"天"+hours+"小时"+minus+"分钟"+secos+"秒");
}
setInterval(shi,1000);
})
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
