js练习 获取时间 三种弹框

Posted ping4

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js练习 获取时间 三种弹框相关的知识,希望对你有一定的参考价值。

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>


 

以上是关于js练习 获取时间 三种弹框的主要内容,如果未能解决你的问题,请参考以下文章

JS浏览器的三种弹框:

4种弹框

4种弹框

Selenium中三种弹框的使用

前端开发--js弹框

js按钮确认删除提示以及js的三种弹出框简单介绍