javascript设计网页作品,javascript网站设计

这篇具有很好参考价值的文章主要介绍了javascript设计网页作品,javascript网站设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

大家好,小编来为大家解答以下问题,html+css+javascript网页制作案例教程素材,javascript设计网页作品,现在让我们一起来看看吧!

简单案例
    • 案例一:完成“鼠标经过切换图片”的案例
    • 案例二:完成“百度换肤效果”的案例
    • 案例三:完成“鼠标展示”的案例
    • 案例四:完成“表单验证”的案例;改进并完成对密码进行确认操作,参考“注册.html”
    • 案例五:结合改进的“表单验证”优化“模态框”案例(自行设计)。
    • 案例六:完成“二级联动菜单”的案例
    • 案例七:完成“星星案例”的案例
    • 案例八:完成“图片的切换”的案例
    • 案例九:计时器
    • 案例十:完成“文件格式验证”的案例
    • 案例十一:完成“左右轮播图”的案例

案例一:完成“鼠标经过切换图片”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/images/jd1.png" id="demo" />
		<>
			var demo = document.getElementById("demo");
			demo.onmouseover = function(){
				demo.src = "img/images/jd2.png"
			}
			demo.onmouseout = function(){
				demo.src = "img/images/jd1.png"
			}
		</>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例二:完成“百度换肤效果”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			body{
				background: url(img/1.jpg) top center;
			}
			.box{
				height: 200px;
				background: rgba(255,255,2555,.3);
				text-align: center;
				padding-top: 50px;
			}
		</style>
		<>
/*			window.οnlοad=function(){//页面加载完毕之后,放在任何地方
				内部放js
			}*/
			window.onload=function(){
				/*var demo1 = document.getElementById("demo1");
				var demo2 = document.getElementById("demo2");
				var demo3 = document.getElementById("demo3");
				demo1.onclick = function(){
					document.body.style.backgroundImage="url(img/1.jpg)";
				}
				demo2.οnclick= function(){
					document.body.style.backgroundImage="url(img/2.jpg)";
				}
				demo3.onclick = function(){
					document.body.style.backgroundImage="url(img/3.jpg)";
				}*/
				var demo = document.getElementsByName("demo");
				demo[0].onclick = function(){
					document.body.style.backgroundImage="url(img/1.jpg)";
				}
				demo[1].onclick= function(){
					document.body.style.backgroundImage="url(img/2.jpg)";
				}
				demo[2].onclick = function(){
					document.body.style.backgroundImage="url(img/3.jpg)";
				}
				
			}
		</>
	</head>
	<body>
		<div class="box">
			<img src="img/1.jpg" alt="" width="150" name = "demo"/>
			<img src="img/2.jpg" alt="" width="150" name = "demo"/>
			<img src="img/3.jpg" alt="" width="150" name = "demo"/>
		</div>
		
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例三:完成“鼠标展示”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			#box{
				height:70px;
				width: 360px;
				padding-top: 360px;
				border:1px solid #ccc;
				margin: 100px auto;
				overflow: hidden;
				background: url(img/01big.jpg) no-repeat;
			}
			#box li{
				float: left;
			}
			#box ul{
				overflow: hidden;
				border-top: 1px solid #ccc;
			}
		</style>
		<>
			window.onload = function(){
				var box = document.getElementById("box");
				function mfn(liid,bg){
					var obj = document.getElementById(liid);
					obj.onmouseover = function(){
						box.style.backgroundImage=bg;
					}
				}
				mfn("li01","url(img/01big.jpg)");
				mfn("li02","url(img/02big.jpg)");
				mfn("li03","url(img/03big.jpg)");
				mfn("li04","url(img/04big.jpg)");
				mfn("li05","url(img/05big.jpg)");
				
			}
		</>
	</head>
	<body> 
		<div id="box">
			<ul>
				<li id="li01" ><img src="img/01.jpg" alt=""  name="bg"/></li>
				<li id="li02"><img src="img/02.jpg" alt=""  name="bg"/></li>
				<li id="li03"><img src="img/03.jpg" alt=""  name="bg" /></li>
				<li id="li04"><img src="img/04.jpg" alt=""  name="bg" /></li>
				<li id="li05"><img src="img/05.jpg" alt=""  name="bg" /></li>
			</ul>
		</div>
		
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例四:完成“表单验证”的案例;改进并完成对密码进行确认操作,参考“注册.html”

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		< type="text/java">
			//验证用户名
			function focus_username(){
				var divobj = document.getElementById("result_username");
				divobj.innerHTML="(请输入你的用户名)";
				divobj.style.color="#CCCCCC";
			}
			function blur_username(){
				var inputobj = document.form1.username;
				var divobj = document.getElementById("result_username");
				if(inputobj.value==""){//当用户名为空
					divobj.innerHTML = "(对不起,用户名不能为空)";
					divobj.style.color = "red";
					return false;
					
				}else if(inputobj.value.length<5 || inputobj.value.length>20){
					divobj.innerHTML = "(对不起,用户名长度只能为5-20个字符之间)";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}
			}
			//验证密码
			function focus_userpwd(){
				var divobj = document.getElementById("result_userpwd");
				divobj.innerHTML="(请输入你的密码)";
				divobj.style.color="#CCCCCC";
			}
			function blur_userpwd(){
				var inputobj = document.form1.userpwd;
				var divobj = document.getElementById("result_userpwd");
				if(inputobj.value==""){//当用户名为空
					divobj.innerHTML = "(对不起,密码不能为空)";
					divobj.style.color = "red";
					return false;
					
				}else if(inputobj.value.length<5 || inputobj.value.length>20){
					divobj.innerHTML = "(对不起,密码长度只能为5-20个字符之间)";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}
			}
			//再次输入密码确认
			function focus_confirm(){
				var divobj = document.getElementById("result_confirm");
				divobj.innerHTML = "(请再次输入密码)";
				divobj.style.color="#CCCCCC";	
			}
			function blur_confirm(){
				var inputobjco = document.form1.confirm;
				var divobj = document.getElementById("result_confirm");
				var inputobjpasswd = document.form1.userpwd;
				if(inputobjpasswd.value==inputobjco.value){
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}else{
					divobj.innerHTML = "(两次密码不一致,请重新输入)";
				    divobj.style.color="red";	
				    return false;
				}
				
			}
			function checkEorm(){
				var username = blur_username();
				var userpwd =  blur_userpwd();
				var confirm = blur_confirm();
				if(username && userpwd && confirm){
					return true;
				}else{
					return false;
				}
			}
			
		</>
	</head>
	<body>
		<form name="form1" method="post" action="https://www.csdn.net/" onsubmit="return checkEorm()">
			<table width="600px" border="1"m bordercolor="#ccc" rules="all" align="center" cellpadding="5">
				<tr>
					<th colspan="3" bgcolor="crimson">新用户注册</th>
				</tr>
				<tr>
					<td width="80px" align="right">用户名</td>
					<td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td>
					<td width="350"><div id="result_username"></div></td>
				</tr>
				<tr>
					<td width="80" align="right">密码</td>
					<td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
					<td><div id="result_userpwd"></div></td>
				</tr>
				<tr>
					<td width="80" align="right">密码确认</td>
					<td><input type="password" name="confirm" onfocus="focus_confirm()" onblur="blur_confirm()"/></td>
					<td><div id="result_confirm"></div></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td colspan="2"><input type="submit" value="注册" /></td>
				</tr>
			</table>
		</form>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例五:结合改进的“表单验证”优化“模态框”案例(自行设计)Deepl降重。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<>
			//鼠标停留边颜色
		</>
		<style type="text/css">
			.main{
				text-align: center;
			}
			#div1{
				position: fixed;
				width: 1080px;
				height: 608px;
				background:url(img/QQ背景.jpg);
				align-content: center;
				left: 20%;
				top: 0%;
				
			}
			#div2{
				margin-left: 140px;
				margin-top:3px;
				float: left;
			}
			#div3{
				width: auto;
				margin-left:300px ;
				margin-top:20px;
				float: left;
			}
			#div4{
				width: 1080px;
				height: 100px;
				
			}
			form{
				
			}
			table{
				width: auto;
				margin: 10px;
				font-size: 25px;
				font-family:courier;
			}
			#div5{
				margin-left: 200px;
				width: 500px;
				height: 100px;
				
			}
			#div5_1{
				width: 230px;
				height: 55px;
				margin-left: 8px;
				float: left;
				font-size: 50px;
				font-family:;
			}
			#div5_2{
				//margin-left: 90px;
				float: right;
				
				width: 260px;
				height: 55px;
				color: crimson;
				font-size: 20px;
				
			}
			#div5_3{
				font-size: 30px;
				font-family:"bradley hand itc";
				color:antiquewhite;
			}
			#div6{
				margin-right: 20px;
				float: right;
				width: 700px;
				height: 370px;
				
			}
			#div6_1{
				margin-top: 10px;
				float: left;
			}
			#div6_2{
				margin-top: 10px;
				float: right;
			}
			#mask{
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.5);
				position: fixed;
				top: 0; 
				left: 0;
				display: none;
			}
			#box{
				width: 500px;
				height: 350px;
				background-color:cornflowerblue;
				position: fixed;
				top: 50%;
				left: 50%;
				margin: -250px 0 0 -200px;
				display: none;
			}
			#box span{
				position: absolute;
				
				right: 10px;
				width: 15px;
				height: 15px;
				font-size: 30px;
				cursor: pointer;
			}
			#box-1{
				margin-left: 200px;
				float: left;
				
			}
			#box-2{
				width: 495px;
				height: 180px;
				
				margin-top: 90px;
				background-color:floralwhite;
				
			}
			
			#box-2-1{
				margin: 1px;
				
				
			}
			#box-2-2-1{
				width: 100px;
				height: 25px;
				
				float: left;
				margin-left: 40px;
			}
			#box-3{
				float: left;
				margin-left: 120px;
				margin-top: 20px;
				width: 237px;
				height: 38px;
			}
		</style>
		<>
			//菜单鼠标经过特效
			function omsu(id){
				var id = document.getElementById(id);
				id.style.backgroundColor="azure"
			}
			function omst(id){
				var id = document.getElementById(id);
				id.style.background="none";
			}
			//点击登录,产生页面
			function dll(){
				var dl = document.getElementById("dl");
				var mask = document.getElementById("mask");
				var box = document.getElementById("box");
				mask.style.display = "block";
				box.style.display = "block";
				//alert("的好时机");
			}
			//点击×号消除页面
			function cc(){
				var clone_all = document.getElementById("clone_all");
				mask.style.display = "none";
				box.style.display = "none";
			}
			//验证用户名
			function focus_username(){
				var divobj = document.getElementById("result_username");
				divobj.innerHTML="请输入你的账号";
				divobj.style.color="#CCCCCC";
			}
			function blur_username(){
				var inputobj = document.form1.username;
				var divobj = document.getElementById("result_username");
				if(inputobj.value==""){//当用户名为空
					divobj.innerHTML = "用户名不能为空";
					divobj.style.color = "red";
					return false;
					
				}else if(inputobj.value.length<5 || inputobj.value.length>20){
					divobj.innerHTML = "账号必须5-20位";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}
			}
			//验证密码
			function focus_userpwd(){
				var divobj = document.getElementById("result_userpwd");
				divobj.innerHTML="请输入你的密码";
				divobj.style.color="#CCCCCC";
			}
			function blur_userpwd(){
				var inputobj = document.form1.userpwd;
				var divobj = document.getElementById("result_userpwd");
				if(inputobj.value==""){//当用户名为空
					divobj.innerHTML = "密码不能为空";
					divobj.style.color = "red";
					return false;
					
				}else if(inputobj.value.length<5 || inputobj.value.length>20){
					divobj.innerHTML = "密码必须5-20位";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}
			}
			function checkEorm(){
				var username = blur_username();
				var userpwd =  blur_userpwd();
				if(username && userpwd){
					window.location.href="https://im.qq.com/";
				}else{
					return false;
				}
			}
		</>
	</head>
	<body>
		
		<div id="div1">
			<div id="mask"></div>
			<div id="box">
				<div id="box-1"><img src="img/登录QQ企鹅标志.JPG"> </div>
				<span id="clone_all" onclick="cc()">×</span>
				<div id=box-2>
					<div id="box-2-1">
						<br />
						<form name="form1"  method="post" >
						<table id="table2">
							<tr>
								<td>账号:<input onfocus="focus_username()" name="username" onblur="blur_username()" ></td>
								<td id="result_username"></td>
							</tr>
							<tr>
								<td>密码:<input type="password" onfocus="focus_userpwd()" onblur="blur_userpwd()" name="userpwd"></td>
								<td id="result_userpwd" ></td>
							</tr>
						</table>
					</form>
					</div>
					<div id="box-2-2">
						<div id="box-2-2-1"><input type="checkbox">自动登录</div>
						<div id="box-2-2-1"><input type="checkbox">记住密码</div>
						<div id="box-2-2-1"><input type="checkbox">找回密码</div>
					</div>
					
				</div>
				<div id="box-3" onclick="checkEorm()"><img src="img/登录按钮.JPG"></div>
			</div>
			<div id = "div4">
				<div id="div2">
				<form>
				<table>
					<tr>
						<td ><img src="img/QQ标志.JPG"</td>
						<td id="td1" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">首页</td>
						<td id="td2" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">下载</td>
						<td id="td3" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">动态</td>
					</tr>
				</table>
			</form>
			</div>
			<div id="div3">
				<form>
				<table cellpadding="5">
					<tr>
						<td id="td4" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">注册</td>
						<td id="td5" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ会员</td>
						<td id="td6" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ安全</td>
					</tr>                                                               
				</table>
			</form>
			</div>
			</div>
			<div id="div5">
				<div id = "div5_1">QQ·PC版</div>
				<div id ="div5_2" ><br>点击这里登录:<input type="button" value="登录" onclick="dll()" ></div>
				<div id="div5_3">全新改版,给你焕然一新的感觉!!!</div>
			</div>
			<div id="div6">
				<div id="div6_1"><img height="350px" width="300px" src="img/QQ界面.JPG"/></div>
				<div id="div6_2"><img  height="350px" width="400px" src="img/聊天界面.JPG" /></div>
			</div>
			
		</div>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例六:完成“二级联动菜单”的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		< type="text/java">
			var  arr_province =["请选择省市","北京市","上海市","重庆市","深圳市","广东省"];
			var arr_city = [
				["请选择城市/地区"],
				["东城区","西城区"],
				["宝山区","长宁区"],
				["和平区","和平区","河北区"],
				["俞中区"],
				["福田区"],
				["广州市"]
			];
			//二级联动初始化
			function initt(){
				var province = document.form1.province;
				var city = document.form1.city;
				var len = arr_province.length
				
				//alert(city)
				province.length=len;
				for(var i=0;i<len;i++){
					province.options[i].text = arr_province[i];
					province.options[i].value= arr_province[i];
				}
				var index=2;
				province.selectedIndex = index;
				var len = arr_city[index].length;
				city.length=len;
				for(var i=0; i<len;i++){
					city.options[i].text = arr_city[index][i];
					city.options[i].value= arr_city[index];
				}
				
			}
			function chage_select(index){
					//alert(index);
					var city = document.form1.city;
				    var len = arr_city[index].length;
				    //alert(len);
				    city.length=len;	
					for(var i=0; i<len;i++){
					city.options[i].text = arr_city[index][i];
					city.options[i].value= arr_city[index][i];
				    }
			}
		</>
	</head>
	<body onload="initt()">
		<form name="form1">
		        省份:
		    <select name="province" onchange="chage_select(this.selectedIndex)"></select>
		      城市:
		     <select name="city"></select>
		</form>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例七:完成“星星案例”的案例

代码:

<!DOCTYPE html>
<html onclick="star()">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		     #span1{
		     	border: 1px solid red;
		     	width: 100px;
		     	display: inline-block;
		     	height: 20px;
		     	overflow: hidden;
		     }
		     #span2{
		     	display: inline-block;
		     	width: 0px;
		     	height: 20px;
		     }
		</style>
		<>
			var count=0;
			var dingshiqi;
			var shijian=0;
			var gametime;
			window.onload = init;
			function init(){
				document.body.bgColor="#6495ED";
			}
			
			function star(){
				var obj = document.createElement("img");
				obj.src="img/星星案例/xingxing.gif";
				var w=Math.floor(Math.random()*(90-30+1))+30;
				obj.width=w;
				//var x= event.clientX;
				//var y =event.clientY;
				var x = Math.floor(Math.random()*1300)+30;
				var y = Math.floor(Math.random()*500)+30;
				obj.style.position="absolute";
				obj.style.top = y +"px";
				obj.style.left = x+"px";
				document.body.appendChild(obj);
				obj.onclick=removestar;
				count++;
				countxingxing();
				document.getElementById("span2").style.width=count*5+"px";
			    document.getElementById("span2").style.backgroundColor="red";
			}
			
			function removestar(){
				this.parentNode.removeChild(this);
				count--;
				countxingxing();
			}
			function startxingxing(){
				window.setInterval("star()",1000);
				gametime=window.setInterval("youxishijian()",1000);
			}
			//暂停游戏
			function zanting(){
				alert("暂停游戏");
			}
			//星星个数 
			function countxingxing(){
				var shu =document.getElementById("count");
				if(count>20){
					alert("游戏结束");
					window.clearInterval(dingshiqi);
					window.clearInterval(gametime);
				}
				shu.innerHTML=count+"个星星";
			}
			//记录游戏时间
			function youxishijian(){
				var obj = document.getElementById("jishi");
				shijian++;
				obj.innerHTML="游戏进行"+shijian+"秒";
			}
		</>
	</head>
	<body>
	<span id= "count">0个星星</span>
	<input type="button" value= "点击开始游戏" onclick="startxingxing()"/>
	<input type="button" value="点击暂停游戏" onclick="zanting()"/>
	  <span id="jishi">游戏进行0秒</span>
	  <span id="span1"><span id="span2"></span></span>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例八:完成“图片的切换”的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 600px;
				border:1px solid red;
				overflow: hidden;
			}
			#img1{
				float: left;
			}
			#ull{
				float: right;
				margin: 0px;
				padding: 0px;
				margin: 0px 30px 0 0;
			}
			#ull li{
				list-style: none;
				border: 1px solid gray;
				padding: 0px;
				width: 30px;
				height: 20px;
				margin: 6px;
				line-height: 20px;
				text-align: center;
			}
		</style>
		<>
			var n=1;//图片标记数
			var dingshiqi;//图片动定时器
			window.onload=init;
			function init(){
				dingshiqi = window.setInterval("tupian()",1000);
				beijing= document.getElementById("li1");
				beijing.style.backgroundColor="orange";
			}
			//换图片函数
			function tupian(){
				var obj = document.getElementById("img1");
				n++;
				if(n>=7){
					n=1;
				}
				obj.src = "img/星星案例/dd_scroll_"+n+".jpg";
				for(var i=1;i<=6;i++){
					var li1=document.getElementById("li"+i);
					li1.style.backgroundColor="";
				}
				beijing = document.getElementById("li"+n);
				beijing.style.backgroundColor="orange";
			}
			//鼠标放上停止图片函数
			function stoptupian(){
				window.clearInterval(dingshiqi);
			}
			//鼠标离开图片继续动的函数
			function dongtupian(){
				dingshiqi=window.setInterval("tupian()",1000);
			}
			//鼠标放到li上停止图片查看指定的函数
			function tingtupian(i,lin){
				var obj = document.getElementById("img1");
				//该表对象src属性换图片
				n=i;
				obj.src="img/星星案例/dd_scroll_"+n+".jpg";
				//清除定时器
				window.clearInterval(dingshiqi);
				huanbeijing(lin);
			}
			//让定时器继续换图片
			function jixu(){
			dingshiqi= window.setInterval("tupian()",1000);
			}
			function huanbeijing(lin){
				for(var m=1;m<=6;m++){
						var li1 = document.getElementById("li"+m);
				        li1.style.backgroundColor="";
				}
				li1.style.backgroundColor="orange";
			}
		</>
	</head>
	<body>
		<img id="img1" src="img/星星案例/dd_scroll_1.jpg" onmouseout="dongtupian()" onmouseover="stoptupian()">
		<ul id="ull">
		   <li id="li1" onmouseover="tingtupian(1,this)" onmouseout="jixu()">1</li>
		   <li id="li2" onmouseover="tingtupian(2,this)" onmouseout="jixu()">2</li>
		   <li id="li3" onmouseover="tingtupian(3,this)" onmouseout="jixu()">3</li>
		   <li id="li4" onmouseover="tingtupian(4,this)" onmouseout="jixu()">4</li>
		   <li id="li5" onmouseover="tingtupian(5,this)" onmouseout="jixu()">5</li>
		   <li id="li6" onmouseover="tingtupian(6,this)" onmouseout="jixu()">6</li>	
		</ul>
		
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例九:计时器

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div{
				font-size: 60px;
				margin:0  auto;
				width: 900px;
				border: 1px solid red;
				text-align: center;
			}
		</style>
		< type="text/java">
			var n1=window.setInterval("fn()",5000);
			function fn(){      //显示时间函数
				var d1=new Date;
				var obj=document.getElementById("div");
				obj.innerHTML=d1.toLocaleDateString();
			}
			function qingchu(){
				window.clearInterval(n1);
			}
			function jixu(){
				n1=window.setInterval("fn()",1000);
			}
			window.setTimeout("qingchu()",600);
		</>
	</head>
	
	<body>
		<div id="div">
			<input type="button" value="清除定时器" onclick="qingchu()">
			<input type="button" value="继续定时器" onclick="jixu()">
		</div>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例十:完成“文件格式验证”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="file" name="" id="File"/><span></span>;
	</body>
</html>
<>
	var file = document.getElementById("File");
	file.onchange = function(){
		var path = this.value;//得到现在的文件路径
		var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase();
	    if(suxxif == ".JPG" || suxxif == ".PNG"){
	    	
		      this.nextSibling.innerHTML="格式正确";
	    }else{
		     this.nextSibling.innerHTML = "格式错误的";
	    }
	}
	
</>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例十一:完成“左右轮播图”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,ul,ol,li,img{margin: 0;padding: 0;list-style: none;}
			#box{width: 490px;
			     height: 170px;
			     padding: 5px;
			     position: relative;
			     border: 1px solid #ccc;
			     margin: 100px auto 0;
			     overflow: hidden;
			     }
			.ad{
				width: 490px;
				height: 170px;
				overflow: hidden;
				position: relative;
			}
			#box img{
				width: 490px;
			}
			.ad ol {
					position: absolute;;
					right: 10px;
					bottom: 10px;
				}
			.ad ol li{
				width: 20px;
				height: 20px;
				line-height: 20px;
				border: 1px solid #ccc;
				text-align: center;
				background: #fff;
				float: left;
				margin-right: 10px;
				cursor: pointer;
				display:inline
			}
			.ad ol li.current{
				background: yellow;
			}
			.ad ul li{
				float: left;
			}
			.ad ul{
				position: absolute;
				top: 0;
				width: 2940px;
			}
			.ad ul li.current{
				display: block;
			}
			#arr{
				display: none;
			}
			#arr span{
				width: 40px;
				height: 40px;
				position: absolute;
				left: 5px;
				top:50%;
				margin-top:-20px ;
				background: #000;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight: bold;
				font-family: '黑体';
				font-size: 30px;
				color: #fff;
				opacity: 0.3;
				border: 1px solid #fff;
			}
			#arr #right{
				right: 5px;
				left: auto;
			}
		</style>
	</head>
	<body>
		<div id="box" class=""all">
			<div class="ad">
				<ul id="imgs">
					<li><img src="img/ig1/1.jpg" /></li>
					<li><img src="img/ig1/2.jpg" /></li>
					<li><img src="img/ig1/3.jpg" /></li>
					<li><img src="img/ig1/4.jpg" /></li>
					<li><img src="img/ig1/5.jpg" /></li>
				</ul>
			</div>
			<div id="arr"><span id="left"><</span><span id="right">></span></div>
		</div>
		<>
	function $(id){return document.getElementById(id)}
	var box = document.getElementById("box");
	box.onmouseover = function(){
		$("arr").style.display = "block";
	}
	box.onmouseout = function(){
		$("arr").style.display = "none"
	}
	$("right").onclick = function(){
		target -=490;
	}
	$("left").onclick = function(){
		target +=490;	
	}
	//缓动动画
	var leader = 0,target = 0;
	setInterval(function(){
		if(target >=0){
			target = 0;
		}else if(target <= -1960){
			target = -1960;
		}
		leader = leader + (target - leader)/10;
		$("imgs").style.left = leader + "px";
	},30)
</>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能文章来源地址https://www.toymoban.com/news/detail-807451.html

简单案例
    • 案例一:完成“鼠标经过切换图片”的案例
    • 案例二:完成“百度换肤效果”的案例
    • 案例三:完成“鼠标展示”的案例
    • 案例四:完成“表单验证”的案例;改进并完成对密码进行确认操作,参考“注册.html”
    • 案例五:结合改进的“表单验证”优化“模态框”案例(自行设计)。
    • 案例六:完成“二级联动菜单”的案例
    • 案例七:完成“星星案例”的案例
    • 案例八:完成“图片的切换”的案例
    • 案例九:计时器
    • 案例十:完成“文件格式验证”的案例
    • 案例十一:完成“左右轮播图”的案例

案例一:完成“鼠标经过切换图片”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/images/jd1.png" id="demo" />
		<>
			var demo = document.getElementById("demo");
			demo.onmouseover = function(){
				demo.src = "img/images/jd2.png"
			}
			demo.onmouseout = function(){
				demo.src = "img/images/jd1.png"
			}
		</>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例二:完成“百度换肤效果”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			body{
				background: url(img/1.jpg) top center;
			}
			.box{
				height: 200px;
				background: rgba(255,255,2555,.3);
				text-align: center;
				padding-top: 50px;
			}
		</style>
		<>
/*			window.οnlοad=function(){//页面加载完毕之后,放在任何地方
				内部放js
			}*/
			window.onload=function(){
				/*var demo1 = document.getElementById("demo1");
				var demo2 = document.getElementById("demo2");
				var demo3 = document.getElementById("demo3");
				demo1.onclick = function(){
					document.body.style.backgroundImage="url(img/1.jpg)";
				}
				demo2.οnclick= function(){
					document.body.style.backgroundImage="url(img/2.jpg)";
				}
				demo3.onclick = function(){
					document.body.style.backgroundImage="url(img/3.jpg)";
				}*/
				var demo = document.getElementsByName("demo");
				demo[0].onclick = function(){
					document.body.style.backgroundImage="url(img/1.jpg)";
				}
				demo[1].onclick= function(){
					document.body.style.backgroundImage="url(img/2.jpg)";
				}
				demo[2].onclick = function(){
					document.body.style.backgroundImage="url(img/3.jpg)";
				}
				
			}
		</>
	</head>
	<body>
		<div class="box">
			<img src="img/1.jpg" alt="" width="150" name = "demo"/>
			<img src="img/2.jpg" alt="" width="150" name = "demo"/>
			<img src="img/3.jpg" alt="" width="150" name = "demo"/>
		</div>
		
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例三:完成“鼠标展示”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			#box{
				height:70px;
				width: 360px;
				padding-top: 360px;
				border:1px solid #ccc;
				margin: 100px auto;
				overflow: hidden;
				background: url(img/01big.jpg) no-repeat;
			}
			#box li{
				float: left;
			}
			#box ul{
				overflow: hidden;
				border-top: 1px solid #ccc;
			}
		</style>
		<>
			window.onload = function(){
				var box = document.getElementById("box");
				function mfn(liid,bg){
					var obj = document.getElementById(liid);
					obj.onmouseover = function(){
						box.style.backgroundImage=bg;
					}
				}
				mfn("li01","url(img/01big.jpg)");
				mfn("li02","url(img/02big.jpg)");
				mfn("li03","url(img/03big.jpg)");
				mfn("li04","url(img/04big.jpg)");
				mfn("li05","url(img/05big.jpg)");
				
			}
		</>
	</head>
	<body> 
		<div id="box">
			<ul>
				<li id="li01" ><img src="img/01.jpg" alt=""  name="bg"/></li>
				<li id="li02"><img src="img/02.jpg" alt=""  name="bg"/></li>
				<li id="li03"><img src="img/03.jpg" alt=""  name="bg" /></li>
				<li id="li04"><img src="img/04.jpg" alt=""  name="bg" /></li>
				<li id="li05"><img src="img/05.jpg" alt=""  name="bg" /></li>
			</ul>
		</div>
		
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例四:完成“表单验证”的案例;改进并完成对密码进行确认操作,参考“注册.html”

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>注册页面</title>
		< type="text/java">
			//验证用户名
			function focus_username(){
				var divobj = document.getElementById("result_username");
				divobj.innerHTML="(请输入你的用户名)";
				divobj.style.color="#CCCCCC";
			}
			function blur_username(){
				var inputobj = document.form1.username;
				var divobj = document.getElementById("result_username");
				if(inputobj.value==""){//当用户名为空
					divobj.innerHTML = "(对不起,用户名不能为空)";
					divobj.style.color = "red";
					return false;
					
				}else if(inputobj.value.length<5 || inputobj.value.length>20){
					divobj.innerHTML = "(对不起,用户名长度只能为5-20个字符之间)";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}
			}
			//验证密码
			function focus_userpwd(){
				var divobj = document.getElementById("result_userpwd");
				divobj.innerHTML="(请输入你的密码)";
				divobj.style.color="#CCCCCC";
			}
			function blur_userpwd(){
				var inputobj = document.form1.userpwd;
				var divobj = document.getElementById("result_userpwd");
				if(inputobj.value==""){//当用户名为空
					divobj.innerHTML = "(对不起,密码不能为空)";
					divobj.style.color = "red";
					return false;
					
				}else if(inputobj.value.length<5 || inputobj.value.length>20){
					divobj.innerHTML = "(对不起,密码长度只能为5-20个字符之间)";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}
			}
			//再次输入密码确认
			function focus_confirm(){
				var divobj = document.getElementById("result_confirm");
				divobj.innerHTML = "(请再次输入密码)";
				divobj.style.color="#CCCCCC";	
			}
			function blur_confirm(){
				var inputobjco = document.form1.confirm;
				var divobj = document.getElementById("result_confirm");
				var inputobjpasswd = document.form1.userpwd;
				if(inputobjpasswd.value==inputobjco.value){
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}else{
					divobj.innerHTML = "(两次密码不一致,请重新输入)";
				    divobj.style.color="red";	
				    return false;
				}
				
			}
			function checkEorm(){
				var username = blur_username();
				var userpwd =  blur_userpwd();
				var confirm = blur_confirm();
				if(username && userpwd && confirm){
					return true;
				}else{
					return false;
				}
			}
			
		</>
	</head>
	<body>
		<form name="form1" method="post" action="https://www.csdn.net/" onsubmit="return checkEorm()">
			<table width="600px" border="1"m bordercolor="#ccc" rules="all" align="center" cellpadding="5">
				<tr>
					<th colspan="3" bgcolor="crimson">新用户注册</th>
				</tr>
				<tr>
					<td width="80px" align="right">用户名</td>
					<td><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" /></td>
					<td width="350"><div id="result_username"></div></td>
				</tr>
				<tr>
					<td width="80" align="right">密码</td>
					<td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>
					<td><div id="result_userpwd"></div></td>
				</tr>
				<tr>
					<td width="80" align="right">密码确认</td>
					<td><input type="password" name="confirm" onfocus="focus_confirm()" onblur="blur_confirm()"/></td>
					<td><div id="result_confirm"></div></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td colspan="2"><input type="submit" value="注册" /></td>
				</tr>
			</table>
		</form>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例五:结合改进的“表单验证”优化“模态框”案例(自行设计)Deepl降重。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<>
			//鼠标停留边颜色
		</>
		<style type="text/css">
			.main{
				text-align: center;
			}
			#div1{
				position: fixed;
				width: 1080px;
				height: 608px;
				background:url(img/QQ背景.jpg);
				align-content: center;
				left: 20%;
				top: 0%;
				
			}
			#div2{
				margin-left: 140px;
				margin-top:3px;
				float: left;
			}
			#div3{
				width: auto;
				margin-left:300px ;
				margin-top:20px;
				float: left;
			}
			#div4{
				width: 1080px;
				height: 100px;
				
			}
			form{
				
			}
			table{
				width: auto;
				margin: 10px;
				font-size: 25px;
				font-family:courier;
			}
			#div5{
				margin-left: 200px;
				width: 500px;
				height: 100px;
				
			}
			#div5_1{
				width: 230px;
				height: 55px;
				margin-left: 8px;
				float: left;
				font-size: 50px;
				font-family:;
			}
			#div5_2{
				//margin-left: 90px;
				float: right;
				
				width: 260px;
				height: 55px;
				color: crimson;
				font-size: 20px;
				
			}
			#div5_3{
				font-size: 30px;
				font-family:"bradley hand itc";
				color:antiquewhite;
			}
			#div6{
				margin-right: 20px;
				float: right;
				width: 700px;
				height: 370px;
				
			}
			#div6_1{
				margin-top: 10px;
				float: left;
			}
			#div6_2{
				margin-top: 10px;
				float: right;
			}
			#mask{
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,.5);
				position: fixed;
				top: 0; 
				left: 0;
				display: none;
			}
			#box{
				width: 500px;
				height: 350px;
				background-color:cornflowerblue;
				position: fixed;
				top: 50%;
				left: 50%;
				margin: -250px 0 0 -200px;
				display: none;
			}
			#box span{
				position: absolute;
				
				right: 10px;
				width: 15px;
				height: 15px;
				font-size: 30px;
				cursor: pointer;
			}
			#box-1{
				margin-left: 200px;
				float: left;
				
			}
			#box-2{
				width: 495px;
				height: 180px;
				
				margin-top: 90px;
				background-color:floralwhite;
				
			}
			
			#box-2-1{
				margin: 1px;
				
				
			}
			#box-2-2-1{
				width: 100px;
				height: 25px;
				
				float: left;
				margin-left: 40px;
			}
			#box-3{
				float: left;
				margin-left: 120px;
				margin-top: 20px;
				width: 237px;
				height: 38px;
			}
		</style>
		<>
			//菜单鼠标经过特效
			function omsu(id){
				var id = document.getElementById(id);
				id.style.backgroundColor="azure"
			}
			function omst(id){
				var id = document.getElementById(id);
				id.style.background="none";
			}
			//点击登录,产生页面
			function dll(){
				var dl = document.getElementById("dl");
				var mask = document.getElementById("mask");
				var box = document.getElementById("box");
				mask.style.display = "block";
				box.style.display = "block";
				//alert("的好时机");
			}
			//点击×号消除页面
			function cc(){
				var clone_all = document.getElementById("clone_all");
				mask.style.display = "none";
				box.style.display = "none";
			}
			//验证用户名
			function focus_username(){
				var divobj = document.getElementById("result_username");
				divobj.innerHTML="请输入你的账号";
				divobj.style.color="#CCCCCC";
			}
			function blur_username(){
				var inputobj = document.form1.username;
				var divobj = document.getElementById("result_username");
				if(inputobj.value==""){//当用户名为空
					divobj.innerHTML = "用户名不能为空";
					divobj.style.color = "red";
					return false;
					
				}else if(inputobj.value.length<5 || inputobj.value.length>20){
					divobj.innerHTML = "账号必须5-20位";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}
			}
			//验证密码
			function focus_userpwd(){
				var divobj = document.getElementById("result_userpwd");
				divobj.innerHTML="请输入你的密码";
				divobj.style.color="#CCCCCC";
			}
			function blur_userpwd(){
				var inputobj = document.form1.userpwd;
				var divobj = document.getElementById("result_userpwd");
				if(inputobj.value==""){//当用户名为空
					divobj.innerHTML = "密码不能为空";
					divobj.style.color = "red";
					return false;
					
				}else if(inputobj.value.length<5 || inputobj.value.length>20){
					divobj.innerHTML = "密码必须5-20位";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "<img src='img/ok.gif' />";
					return true;
				}
			}
			function checkEorm(){
				var username = blur_username();
				var userpwd =  blur_userpwd();
				if(username && userpwd){
					window.location.href="https://im.qq.com/";
				}else{
					return false;
				}
			}
		</>
	</head>
	<body>
		
		<div id="div1">
			<div id="mask"></div>
			<div id="box">
				<div id="box-1"><img src="img/登录QQ企鹅标志.JPG"> </div>
				<span id="clone_all" onclick="cc()">×</span>
				<div id=box-2>
					<div id="box-2-1">
						<br />
						<form name="form1"  method="post" >
						<table id="table2">
							<tr>
								<td>账号:<input onfocus="focus_username()" name="username" onblur="blur_username()" ></td>
								<td id="result_username"></td>
							</tr>
							<tr>
								<td>密码:<input type="password" onfocus="focus_userpwd()" onblur="blur_userpwd()" name="userpwd"></td>
								<td id="result_userpwd" ></td>
							</tr>
						</table>
					</form>
					</div>
					<div id="box-2-2">
						<div id="box-2-2-1"><input type="checkbox">自动登录</div>
						<div id="box-2-2-1"><input type="checkbox">记住密码</div>
						<div id="box-2-2-1"><input type="checkbox">找回密码</div>
					</div>
					
				</div>
				<div id="box-3" onclick="checkEorm()"><img src="img/登录按钮.JPG"></div>
			</div>
			<div id = "div4">
				<div id="div2">
				<form>
				<table>
					<tr>
						<td ><img src="img/QQ标志.JPG"</td>
						<td id="td1" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">首页</td>
						<td id="td2" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">下载</td>
						<td id="td3" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">动态</td>
					</tr>
				</table>
			</form>
			</div>
			<div id="div3">
				<form>
				<table cellpadding="5">
					<tr>
						<td id="td4" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">注册</td>
						<td id="td5" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ会员</td>
						<td id="td6" onmouseover="omsu(this.id)" onmouseleave="omst(this.id)">QQ安全</td>
					</tr>                                                               
				</table>
			</form>
			</div>
			</div>
			<div id="div5">
				<div id = "div5_1">QQ·PC版</div>
				<div id ="div5_2" ><br>点击这里登录:<input type="button" value="登录" onclick="dll()" ></div>
				<div id="div5_3">全新改版,给你焕然一新的感觉!!!</div>
			</div>
			<div id="div6">
				<div id="div6_1"><img height="350px" width="300px" src="img/QQ界面.JPG"/></div>
				<div id="div6_2"><img  height="350px" width="400px" src="img/聊天界面.JPG" /></div>
			</div>
			
		</div>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例六:完成“二级联动菜单”的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		< type="text/java">
			var  arr_province =["请选择省市","北京市","上海市","重庆市","深圳市","广东省"];
			var arr_city = [
				["请选择城市/地区"],
				["东城区","西城区"],
				["宝山区","长宁区"],
				["和平区","和平区","河北区"],
				["俞中区"],
				["福田区"],
				["广州市"]
			];
			//二级联动初始化
			function initt(){
				var province = document.form1.province;
				var city = document.form1.city;
				var len = arr_province.length
				
				//alert(city)
				province.length=len;
				for(var i=0;i<len;i++){
					province.options[i].text = arr_province[i];
					province.options[i].value= arr_province[i];
				}
				var index=2;
				province.selectedIndex = index;
				var len = arr_city[index].length;
				city.length=len;
				for(var i=0; i<len;i++){
					city.options[i].text = arr_city[index][i];
					city.options[i].value= arr_city[index];
				}
				
			}
			function chage_select(index){
					//alert(index);
					var city = document.form1.city;
				    var len = arr_city[index].length;
				    //alert(len);
				    city.length=len;	
					for(var i=0; i<len;i++){
					city.options[i].text = arr_city[index][i];
					city.options[i].value= arr_city[index][i];
				    }
			}
		</>
	</head>
	<body onload="initt()">
		<form name="form1">
		        省份:
		    <select name="province" onchange="chage_select(this.selectedIndex)"></select>
		      城市:
		     <select name="city"></select>
		</form>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例七:完成“星星案例”的案例

代码:

<!DOCTYPE html>
<html onclick="star()">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		     #span1{
		     	border: 1px solid red;
		     	width: 100px;
		     	display: inline-block;
		     	height: 20px;
		     	overflow: hidden;
		     }
		     #span2{
		     	display: inline-block;
		     	width: 0px;
		     	height: 20px;
		     }
		</style>
		<>
			var count=0;
			var dingshiqi;
			var shijian=0;
			var gametime;
			window.onload = init;
			function init(){
				document.body.bgColor="#6495ED";
			}
			
			function star(){
				var obj = document.createElement("img");
				obj.src="img/星星案例/xingxing.gif";
				var w=Math.floor(Math.random()*(90-30+1))+30;
				obj.width=w;
				//var x= event.clientX;
				//var y =event.clientY;
				var x = Math.floor(Math.random()*1300)+30;
				var y = Math.floor(Math.random()*500)+30;
				obj.style.position="absolute";
				obj.style.top = y +"px";
				obj.style.left = x+"px";
				document.body.appendChild(obj);
				obj.onclick=removestar;
				count++;
				countxingxing();
				document.getElementById("span2").style.width=count*5+"px";
			    document.getElementById("span2").style.backgroundColor="red";
			}
			
			function removestar(){
				this.parentNode.removeChild(this);
				count--;
				countxingxing();
			}
			function startxingxing(){
				window.setInterval("star()",1000);
				gametime=window.setInterval("youxishijian()",1000);
			}
			//暂停游戏
			function zanting(){
				alert("暂停游戏");
			}
			//星星个数 
			function countxingxing(){
				var shu =document.getElementById("count");
				if(count>20){
					alert("游戏结束");
					window.clearInterval(dingshiqi);
					window.clearInterval(gametime);
				}
				shu.innerHTML=count+"个星星";
			}
			//记录游戏时间
			function youxishijian(){
				var obj = document.getElementById("jishi");
				shijian++;
				obj.innerHTML="游戏进行"+shijian+"秒";
			}
		</>
	</head>
	<body>
	<span id= "count">0个星星</span>
	<input type="button" value= "点击开始游戏" onclick="startxingxing()"/>
	<input type="button" value="点击暂停游戏" onclick="zanting()"/>
	  <span id="jishi">游戏进行0秒</span>
	  <span id="span1"><span id="span2"></span></span>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例八:完成“图片的切换”的案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 600px;
				border:1px solid red;
				overflow: hidden;
			}
			#img1{
				float: left;
			}
			#ull{
				float: right;
				margin: 0px;
				padding: 0px;
				margin: 0px 30px 0 0;
			}
			#ull li{
				list-style: none;
				border: 1px solid gray;
				padding: 0px;
				width: 30px;
				height: 20px;
				margin: 6px;
				line-height: 20px;
				text-align: center;
			}
		</style>
		<>
			var n=1;//图片标记数
			var dingshiqi;//图片动定时器
			window.onload=init;
			function init(){
				dingshiqi = window.setInterval("tupian()",1000);
				beijing= document.getElementById("li1");
				beijing.style.backgroundColor="orange";
			}
			//换图片函数
			function tupian(){
				var obj = document.getElementById("img1");
				n++;
				if(n>=7){
					n=1;
				}
				obj.src = "img/星星案例/dd_scroll_"+n+".jpg";
				for(var i=1;i<=6;i++){
					var li1=document.getElementById("li"+i);
					li1.style.backgroundColor="";
				}
				beijing = document.getElementById("li"+n);
				beijing.style.backgroundColor="orange";
			}
			//鼠标放上停止图片函数
			function stoptupian(){
				window.clearInterval(dingshiqi);
			}
			//鼠标离开图片继续动的函数
			function dongtupian(){
				dingshiqi=window.setInterval("tupian()",1000);
			}
			//鼠标放到li上停止图片查看指定的函数
			function tingtupian(i,lin){
				var obj = document.getElementById("img1");
				//该表对象src属性换图片
				n=i;
				obj.src="img/星星案例/dd_scroll_"+n+".jpg";
				//清除定时器
				window.clearInterval(dingshiqi);
				huanbeijing(lin);
			}
			//让定时器继续换图片
			function jixu(){
			dingshiqi= window.setInterval("tupian()",1000);
			}
			function huanbeijing(lin){
				for(var m=1;m<=6;m++){
						var li1 = document.getElementById("li"+m);
				        li1.style.backgroundColor="";
				}
				li1.style.backgroundColor="orange";
			}
		</>
	</head>
	<body>
		<img id="img1" src="img/星星案例/dd_scroll_1.jpg" onmouseout="dongtupian()" onmouseover="stoptupian()">
		<ul id="ull">
		   <li id="li1" onmouseover="tingtupian(1,this)" onmouseout="jixu()">1</li>
		   <li id="li2" onmouseover="tingtupian(2,this)" onmouseout="jixu()">2</li>
		   <li id="li3" onmouseover="tingtupian(3,this)" onmouseout="jixu()">3</li>
		   <li id="li4" onmouseover="tingtupian(4,this)" onmouseout="jixu()">4</li>
		   <li id="li5" onmouseover="tingtupian(5,this)" onmouseout="jixu()">5</li>
		   <li id="li6" onmouseover="tingtupian(6,this)" onmouseout="jixu()">6</li>	
		</ul>
		
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例九:计时器

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div{
				font-size: 60px;
				margin:0  auto;
				width: 900px;
				border: 1px solid red;
				text-align: center;
			}
		</style>
		< type="text/java">
			var n1=window.setInterval("fn()",5000);
			function fn(){      //显示时间函数
				var d1=new Date;
				var obj=document.getElementById("div");
				obj.innerHTML=d1.toLocaleDateString();
			}
			function qingchu(){
				window.clearInterval(n1);
			}
			function jixu(){
				n1=window.setInterval("fn()",1000);
			}
			window.setTimeout("qingchu()",600);
		</>
	</head>
	
	<body>
		<div id="div">
			<input type="button" value="清除定时器" onclick="qingchu()">
			<input type="button" value="继续定时器" onclick="jixu()">
		</div>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例十:完成“文件格式验证”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="file" name="" id="File"/><span></span>;
	</body>
</html>
<>
	var file = document.getElementById("File");
	file.onchange = function(){
		var path = this.value;//得到现在的文件路径
		var suxxif = path.substr(path.lastIndexOf(".")).toUpperCase();
	    if(suxxif == ".JPG" || suxxif == ".PNG"){
	    	
		      this.nextSibling.innerHTML="格式正确";
	    }else{
		     this.nextSibling.innerHTML = "格式错误的";
	    }
	}
	
</>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

案例十一:完成“左右轮播图”的案例

代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,ul,ol,li,img{margin: 0;padding: 0;list-style: none;}
			#box{width: 490px;
			     height: 170px;
			     padding: 5px;
			     position: relative;
			     border: 1px solid #ccc;
			     margin: 100px auto 0;
			     overflow: hidden;
			     }
			.ad{
				width: 490px;
				height: 170px;
				overflow: hidden;
				position: relative;
			}
			#box img{
				width: 490px;
			}
			.ad ol {
					position: absolute;;
					right: 10px;
					bottom: 10px;
				}
			.ad ol li{
				width: 20px;
				height: 20px;
				line-height: 20px;
				border: 1px solid #ccc;
				text-align: center;
				background: #fff;
				float: left;
				margin-right: 10px;
				cursor: pointer;
				display:inline
			}
			.ad ol li.current{
				background: yellow;
			}
			.ad ul li{
				float: left;
			}
			.ad ul{
				position: absolute;
				top: 0;
				width: 2940px;
			}
			.ad ul li.current{
				display: block;
			}
			#arr{
				display: none;
			}
			#arr span{
				width: 40px;
				height: 40px;
				position: absolute;
				left: 5px;
				top:50%;
				margin-top:-20px ;
				background: #000;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				font-weight: bold;
				font-family: '黑体';
				font-size: 30px;
				color: #fff;
				opacity: 0.3;
				border: 1px solid #fff;
			}
			#arr #right{
				right: 5px;
				left: auto;
			}
		</style>
	</head>
	<body>
		<div id="box" class=""all">
			<div class="ad">
				<ul id="imgs">
					<li><img src="img/ig1/1.jpg" /></li>
					<li><img src="img/ig1/2.jpg" /></li>
					<li><img src="img/ig1/3.jpg" /></li>
					<li><img src="img/ig1/4.jpg" /></li>
					<li><img src="img/ig1/5.jpg" /></li>
				</ul>
			</div>
			<div id="arr"><span id="left"><</span><span id="right">></span></div>
		</div>
		<>
	function $(id){return document.getElementById(id)}
	var box = document.getElementById("box");
	box.onmouseover = function(){
		$("arr").style.display = "block";
	}
	box.onmouseout = function(){
		$("arr").style.display = "none"
	}
	$("right").onclick = function(){
		target -=490;
	}
	$("left").onclick = function(){
		target +=490;	
	}
	//缓动动画
	var leader = 0,target = 0;
	setInterval(function(){
		if(target >=0){
			target = 0;
		}else if(target <= -1960){
			target = -1960;
		}
		leader = leader + (target - leader)/10;
		$("imgs").style.left = leader + "px";
	},30)
</>
	</body>
</html>

网页设计与制作js,人工智能
网页设计与制作js,人工智能

到了这里,关于javascript设计网页作品,javascript网站设计的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包