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 = "https://blog.csdn.net/ai_lover_cat/article/details/img/images/jd1.png"}

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

代码：

*{margin: 0;padding: 0;}body{background: url(https://blog.csdn.net/ai_lover_cat/article/details/img/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(https://blog.csdn.net/ai_lover_cat/article/details/img/1.jpg)";}demo2.οnclick= function(){document.body.style.backgroundImage="url(https://blog.csdn.net/ai_lover_cat/article/details/img/2.jpg)";}demo3.onclick = function(){document.body.style.backgroundImage="url(https://blog.csdn.net/ai_lover_cat/article/details/img/3.jpg)";}*/var demo = document.getElementsByName("demo");demo[0].onclick = function(){document.body.style.backgroundImage="url(https://blog.csdn.net/ai_lover_cat/article/details/img/1.jpg)";}demo[1].onclick= function(){document.body.style.backgroundImage="url(https://blog.csdn.net/ai_lover_cat/article/details/img/2.jpg)";}demo[2].onclick = function(){document.body.style.backgroundImage="url(https://blog.csdn.net/ai_lover_cat/article/details/img/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 pobj = document.getElementById("result_username");pobj.innerHTML="(请输入你的用户名)";pobj.style.color="#CCCCCC";}function blur_username(){var inputobj = document.form1.username;var pobj = document.getElementById("result_username");if(inputobj.value==""){//当用户名为空pobj.innerHTML = "(对不起，用户名不能为空)";pobj.style.color = "red";return false;}else if(inputobj.value.length20){pobj.innerHTML = "(对不起，用户名长度只能为5-20个字符之间)";pobj.style.color = "red";return false;}else{pobj.innerHTML = "";return true;}}//验证密码function focus_userpwd(){var pobj = document.getElementById("result_userpwd");pobj.innerHTML="(请输入你的密码)";pobj.style.color="#CCCCCC";}function blur_userpwd(){var inputobj = document.form1.userpwd;var pobj = document.getElementById("result_userpwd");if(inputobj.value==""){//当用户名为空pobj.innerHTML = "(对不起，密码不能为空)";pobj.style.color = "red";return false;}else if(inputobj.value.length20){pobj.innerHTML = "(对不起，密码长度只能为5-20个字符之间)";pobj.style.color = "red";return false;}else{pobj.innerHTML = "";return true;}}//再次输入密码确认function focus_confirm(){var pobj = document.getElementById("result_confirm");pobj.innerHTML = "(请再次输入密码)";pobj.style.color="#CCCCCC";}function blur_confirm(){var inputobjco = document.form1.confirm;var pobj = document.getElementById("result_confirm");var inputobjpasswd = document.form1.userpwd;if(inputobjpasswd.value==inputobjco.value){pobj.innerHTML = "";return true;}else{pobj.innerHTML = "(两次密码不一致，请重新输入)";    pobj.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;}#p1{position: fixed;width: 1080px;height: 608px;background:url(img/QQ背景.jpg);align-content: center;left: 20%;top: 0%;}#p2{margin-left: 140px;margin-top:3px;float: left;}#p3{width: auto;margin-left:300px ;margin-top:20px;float: left;}#p4{width: 1080px;height: 100px;}form{}table{width: auto;margin: 10px;font-size: 25px;font-family:courier;}#p5{margin-left: 200px;width: 500px;height: 100px;}#p5_1{width: 230px;height: 55px;margin-left: 8px;float: left;font-size: 50px;font-family:;}#p5_2{//margin-left: 90px;float: right;width: 260px;height: 55px;color: crimson;font-size: 20px;}#p5_3{font-size: 30px;font-family:"bradley hand itc";color:antiquewhite;}#p6{margin-right: 20px;float: right;width: 700px;height: 370px;}#p6_1{margin-top: 10px;float: left;}#p6_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 pobj = document.getElementById("result_username");pobj.innerHTML="请输入你的账号";pobj.style.color="#CCCCCC";}function blur_username(){var inputobj = document.form1.username;var pobj = document.getElementById("result_username");if(inputobj.value==""){//当用户名为空pobj.innerHTML = "用户名不能为空";pobj.style.color = "red";return false;}else if(inputobj.value.length20){pobj.innerHTML = "账号必须5-20位";pobj.style.color = "red";return false;}else{pobj.innerHTML = "";return true;}}//验证密码function focus_userpwd(){var pobj = document.getElementById("result_userpwd");pobj.innerHTML="请输入你的密码";pobj.style.color="#CCCCCC";}function blur_userpwd(){var inputobj = document.form1.userpwd;var pobj = document.getElementById("result_userpwd");if(inputobj.value==""){//当用户名为空pobj.innerHTML = "密码不能为空";pobj.style.color = "red";return false;}else if(inputobj.value.length20){pobj.innerHTML = "密码必须5-20位";pobj.style.color = "red";return false;}else{pobj.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;}} ×

账号:
密码:

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

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

上一篇：网站建设与推广(网站构建与网络营销策略)
下一篇：基于java高校校园网站系统 (springboot框架)开题答辩常规问题和如何回答

其他文章

在线制作企业视频网站（在线企业视频制作平台）

企业网站策划建设方案（企业网站设计与规划方案）

设计一套企业网站多少钱（设计企业网站费用）