js练习 获取时间 三种弹框 过滤选择器 过滤选择器 移入移出的事件的练习 hide，show或者.style.display="block" 的练习
js 时间的显示（循环刷新获取时间）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="a">
</div>
<input type="button" onclick="clearTime()" value="清除" />
<script type="text/javascript">
window.onload=show();
// 进入页面开始加载
function show(){
var d = new Date();
var h = d.getHours();
var m = d.getMinutes();
var s = d.getSeconds();
var a = document.getElementById("a");
a.innerHTML=h+"时"+m+"分"+s+"秒";
}
var si = setInterval("show()",1000);
function clearTime(){
// 不能用clear(可能是关键字)
clearInterval(si);
}
</script>
<!--边看边思考规律，以便于记住-->
</body>
</html>
js 三种弹框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" onclick="aa()" value="警告" />
<input type="button" onclick="bb()" value="确定" />
<input type="button" onclick="cc()" value="提示" />
<script type="text/javascript">
function aa(){
alert("警告框");
}
function bb(){
var flag = confirm("确定选择吗");
if (flag==true) {
alert("已确定");
}else {
alert("已取消");
}
}
function cc(){
var str = prompt("请输入","admin");
alert(str);
}
</script>
</body>
</html>
js 过滤选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="">0000</div>
<div id="">11111</div>
<div id="">22222</div>
<div id="">33333</div>
<div id="">4444</div>
<div id="">55555</div>
<div id="">6666</div>
<div id="">7777</div>
<input type="button" onclick="show()" value="选择" />
<script type="text/javascript">
function show(){
// alert($("div:first").html()) 第一
// alert($("div:last").html()) 末尾
//var a = $("div:even"); 偶数
//var a = $("div:odd") 奇数
//var a = $("div:eq(3)") 列表第四个
var a = $("div:not(:eq(3))")
for(var i=0;i<a.length;i++){
alert(a[i].innerHTML);
}
}
// 过滤选择器
</script>
</body>
</html>
js this选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title><script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<ul>
<li>admin1</li>
<li>admin2</li>
<li>admin3</li>
<li>admin4</li>
<li>admin5</li>
</ul>
<script type="text/javascript">
$("li").click(function(){
alert($(this).html())
})
</script>
</body>
</html>
js 移入移出的事件的练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title> <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
p,div,h1{
color: black;
</style>
</head>
<body>
<li>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</li>
<li>自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</li>
<li>岛上书店</li>
<script type="text/javascript">
$("li").mouseout(function(){
$(this)[0].style.color="black"
// 不能用id去标记
})
$("li").mouseover(function(){
$(this)[0].style.color="red"
})
</script>
</body>
</html>
js hide，show或者.style.display="block" 的练习
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>你是人间的四月天</title>
<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
body,h1,h2,p,div{margin: 0; padding: 0;}
body{font-size: 14px; line-height: 28px; font-family: "微软雅黑";}
#book{
margin: 0 auto;
width: 800px;
overflow: hidden;
padding-top: 10px;
}
img{float: left; margin-right: 10px;}
h1{font-size: 32px; line-height: 45px;}
.intro{clear: both; display: none;}
h2{line-height: 45px; background: #999999; padding-left: 15px; color: #ffffff;}
.intro p{text-indent: 2em;}
.title{
font-size: 24px;
color: #0000ff;
}
</style>
</head>
<body>
<div id="book">
<img src="images/book.gif" /><h1>你是人间的四月天</h1>
<p>
笑响亮了四面风<br/>
轻灵在春的光艳中交舞看变<br/>
你是一月早天的云烟<br/>
黄昏吹着风的软<br/>
....<br/>
<a href="#" id="a" onclick="show()">查看全部</a><br/>
<a href="#" id="b" onclick="show1()" style="display: none;">收起</a><br/>
</p>
<div class="intro" id="c">
<h2>内容简介</h2>
<p>你是人间四月天是永正图书推出的“比烟花寂寞”系列之三。“比烟花寂寞”系列包括《民国女子》《爱眉小札》《你是人间四月天》《你是我眉心未完的诗》。这系列以前所未有的包装形式推出，引起读者尖叫连连。一经上市，便引发各大报纸、媒体的一致报道。
</p><p>有人崇拜她，把她当做女神、偶像；也有人放出话来，“喜欢她的女人，品行有问题；喜欢她的男人，脑子有问题。”
</p><p>她是缺乏幽娴品德的女人，她喜好与人辩论，她用诗句表达她的哀愁，她精通文理，学贯中西。她对文学和艺术，具有本能的、直接的感悟。生长富贵，命运坎坷，修养让她把热情藏在里面，热情却是她生活的支柱。
她，就是那个万千宠爱于一身的一代才女——林徽因。
</p><p>《你是人间四月天》是林徽因的一本小说、诗歌、散文、剧本集，几乎收录了林徽因所有的经典文学作品。其散文成就颇大，虽然数量不多，但风格独特，知识性强。诗歌尤多，其诗作融人中国古典诗歌和西方唯美派的一些表现手法，每篇文章都是她灵动思绪和满腹才华的凝结。她的语言温婉淡雅，如行云流水，又如拂面的春风。可以说。她的文字拥有超越时间的魅力。笔下流露出令人惊讶的对民间百态的深谙。</p>
</div>
</div>
<script type="text/javascript">
function show(){
// var a=document.getElementById("b");
//// class无法实现,需用id标记
// a.style.display="block"
$("#a").hide();
$("#b").show();
$("#c").show();
}
function show1(){
$("#a").show();
$("#b").hide();
$("#c").hide();
}
</script>
</body>
</html>
