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

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

简单案例

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

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

代码：

	
		
		
	
	
		
		
			var demo = document.getElementById("demo");
			demo.onmouseover = function(){
				demo.src = "img/images/jd2.png"
			}
			demo.onmouseout = function(){
				demo.src = "/img/a6/jd1.png"
			}
		
	

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

代码：

	
		
		
		
			*{margin: 0;padding: 0;}
			body{
				background: url(/img/d1/1.jpg) top center;
			}
			.box{
				height: 200px;
				background: rgba(255,255,2555,.3);
				text-align: center;
				padding-top: 50px;
			}
		
		
/*			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/d1/1.jpg)";
				}
				demo2.οnclick= function(){
					document.body.style.backgroundImage="url(/img/02/2.jpg)";
				}
				demo3.onclick = function(){
					document.body.style.backgroundImage="url(/img/c3/3.jpg)";
				}*/
				var demo = document.getElementsByName("demo");
				demo[0].onclick = function(){
					document.body.style.backgroundImage="url(/img/d1/1.jpg)";
				}
				demo[1].onclick= function(){
					document.body.style.backgroundImage="url(/img/02/2.jpg)";
				}
				demo[2].onclick = function(){
					document.body.style.backgroundImage="url(/img/c3/3.jpg)";
				}
				
			}
		
	
	
		
			
			
			
		
		
	

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

代码：

	
		
		
		
			*{
				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;
			}
		
		
			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)");
				
			}
		
	
	 
		
			

				

				

				

				

				

			
		
		
	

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

代码：

	
		
		
		
			//验证用户名
			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.length20){
					divobj.innerHTML = "(对不起，用户名长度只能为5-20个字符之间)";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "";
					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.length20){
					divobj.innerHTML = "(对不起，密码长度只能为5-20个字符之间)";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "";
					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 = "";
					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;
				}
			}
			
		
	
	
		
			

				

					
新用户注册
				
				

					
用户名
					

					

				
				

					
密码
					

					

				
				

					
密码确认
					

					

				
				

					

					

				
			
		
	

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

	
		
		
		
			//鼠标停留边颜色
		
		
			.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;
			}
		
		
			//菜单鼠标经过特效
			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.length20){
					divobj.innerHTML = "账号必须5-20位";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "";
					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.length20){
					divobj.innerHTML = "密码必须5-20位";
					divobj.style.color = "red";
					return false;
				}else{
					divobj.innerHTML = "";
					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;
				}
			}
		
	
	
		
		
			
			
				 
				×
				
					
						

						
						

							

								
账号:
								

							
							

								
密码:
								

							
						
					
					
					
						自动登录
						记住密码
						找回密码
					
					
				
				
			
			
				
				
				

					

						
<img src="/img/b0/QQ标志.JPG"
						
首页
						
下载
						
动态
					
				
			
			
			
				
				

					

						
注册
						
QQ会员
						
QQ安全
					
                                                               
				
			
			
			
			
				QQ·PC版
				
点击这里登录：
				全新改版，给你焕然一新的感觉!!!
			
			
				
				
			
			
		
	

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

	
		
		
		
			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];
				    }
			}
		
	
	
		
		        省份：
		    
		      城市：
		     
		
	

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

代码：

	
		
		
		
		     #span1{
		     	border: 1px solid red;
		     	width: 100px;
		     	display: inline-block;
		     	height: 20px;
		     	overflow: hidden;
		     }
		     #span2{
		     	display: inline-block;
		     	width: 0px;
		     	height: 20px;
		     }
		
		
			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+"秒";
			}
		
	
	
	0个星星
	
	
	  游戏进行0秒
	  
	

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

	
		
		
		
			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;
			}
		
		
			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";
			}
		
	
	
		
		

		   
1
		   
2
		   
3
		   
4
		   
5
		   
6
	
		
		
	

案例九：计时器

代码：

	
		
		
		
			#div{
				font-size: 60px;
				margin:0  auto;
				width: 900px;
				border: 1px solid red;
				text-align: center;
			}
		
		
			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);
		
	
	
	
		
			
			
		
	

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

代码：

	
		
		
	
	
		;
	


	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 = "格式错误的";
	    }
	}
	

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

代码：

	
		
		
		
			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;
			}
		
	
	
		
			
				

					

					

					

					

					

				
			
			
		
		
	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)