JS第四课

公告

昵称：夜雨初凉
园龄： 4年
粉丝： 0
关注： 1

+加关注

随笔分类

随笔档案

阅读排行榜

Posted on 2021-09-06 16:32 夜雨初凉阅读(32) 评论(0) 编辑收藏举报

倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			var num=5;
			function Timewait(){
				var sec=document.getElementById("sec");
				//alert(sec.innerHTML);
				num=num-1; //num--
				sec.innerHTML=num+"秒钟后自动跳转或者点击直接跳转";
				if(num==0){
					//倒计时结束,直接跳转
					location.href="首页.html";
				}
				//实现循环调用的效果
				setTimeout("Timewait()",1000);
			}
		</script>
	</head>
	<body onload="Timewait()">
		<h1>注册成功!</h1>
		<a href="首页.html" id="sec">5秒钟后自动跳转或者点击直接跳转</a>
	</body>
</html>

JS调用CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				/*css的语法
				background-color: yellow;		
				font-size: 20px;
				*/
			}
		
		</style>
		<script>
			function changeColor(v){
				//alert(1);
				//onchange改变时,只有当选择了某一个下拉的选项才会有反应
				//[object HTMLSelectElement]
				//var sel=document.getElementById("sel");
				//value取选中的值
				//alert(sel.value);
				
				//css样式 
				//background-color: yellow;	
				//font-size: 20px;
				//js样式
				//style.backgroundColor="颜色"
				//style.fontSize="20px";
				//背景色 
				document.body.style.backgroundColor=v.value;
				//v.value;
			}
		</script>
	</head>
	<body>
		<!--当前this元素-->
		<select onchange="changeColor(this)" id="sel">
			<!--
			如果有value值,默认会获取value的值
			如果没有value值,默认会获取显示值
			-->
			<option value="white">请选择</option>
			<option value="red">红色</option>
			<option value="green">绿色</option>
			<option value="blue">蓝色</option>
		</select>
		
		<h1>长沙华瑞IT教育</h1>
	</body>
</html>

全选取消

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//checked 选中状态 true选中/false为选中
			function setAll(){
				//获取id为all的input标签元素
				var all=document.getElementById("all");
				//获取name为car的input标签元素(多个)--数组
				var car=document.getElementsByName("car");
				for(var i=0;i<car.length;i++){
					if(all.checked){
						//选中	
						car[i].checked=true;			
					}else{
						//未选中
						car[i].checked=false;	
					}
				}
			}
			
			function checkAll(){
				//获取id为all的input标签元素
				var all=document.getElementById("all");
				//获取name为car的input标签元素(多个)--数组
				var car=document.getElementsByName("car");
				var len=0;
				//循环判断car选中的数量是否和总数量相同
				for(var i=0;i<car.length;i++){
					if(car[i].checked){
						len++;
					}
				}
				//alert(len);
				//如果相同,all选中
				if(len==car.length){
					all.checked=true;
				}else{
					//如果不同,all取消选中
					all.checked=false;
				}			
				
			}
		</script>
	</head>
	<body>
		<input type="checkbox" id="all" onchange="setAll()"/>全选
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="checkbox" name="car" onchange="checkAll()"/>奔驰
		<input type="checkbox" name="car" onchange="checkAll()"/>宝马
		<input type="checkbox" name="car" onchange="checkAll()"/>奥迪
		<input type="checkbox" name="car" onchange="checkAll()"/>长城
		<input type="checkbox" name="car" onchange="checkAll()"/>红旗
	</body>
</html>

显示隐藏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function dis(){
				var bn=document.getElementById("bn");
				//alert(bn.style.display);
				//判断当前的状态
				if(bn.style.display=="block"){
					//当显示的时候,就隐藏
					bn.style.display="none";
				}else if(bn.style.display=="none"){
					//当隐藏的时候,就显示
					bn.style.display="block";
				}
			}
		</script>
	</head>
	<body>
		<h3 onclick="dis()" style="cursor: pointer;">2021电影排行top5</h3>
		<!--css如何隐藏none/显示block-->
		<ul id="bn" style="display: block;">
			<li>屏住呼吸</li>
			<li>失控玩家</li>
			<li>头号玩家</li>
			<li>扫黑风暴</li>
			<li>觉醒年代</li>
		</ul>
		
		<hr/>
		<script>
			//显示(不占位)
			function disShow(){
				var ig=document.getElementById("ig");
				//inline显示 -- 行级标签
				//block显示 -- 块级标签(独占一行)
				ig.style.display="inline";
			}
			
			//隐藏(不占位)
			function disHide(){
				var ig=document.getElementById("ig");
				ig.style.display="none";
			}
			
			//显示(占位)
			function visShow(){
				var ig=document.getElementById("ig");
				//显示visible
				ig.style.visibility="visible";
			}
			//隐藏(占位)
			function visHide(){
				var ig=document.getElementById("ig");
				//隐藏hidden
				ig.style.visibility="hidden";
			}
			
		</script>
		<img src="img/2.gif" id="ig" />
		<input type="button" value="显示(不占位)" onclick="disShow()" />
		<input type="button" value="隐藏(不占位)" onclick="disHide()"/>
		
		<input type="button" value="显示(占位)" onclick="visShow()"/>
		<input type="button" value="隐藏(占位)" onclick="visHide()"/>
	</body>
</html>