javaScript简单项目案例

js简单案例

案例一：完成多分支案例“年龄层判断”（代码和效果图）。
案例二：完成“prompt()方法及动态输入实现矩形周长面积计算”的案例（代码和效果图）。
案例三：完成“二维数组的数据访问实现试题展示”的案例（代码和效果图）。
案例四：完成“考试倒计时的实现”的案例（代码和效果图）。
案例五：完成“随机点名器的实现”的案例（代码和效果图）
案例六：完成“下拉列表框的应用”的案例（代码和效果图）。
案例七：完成“正则表达式实现表单严谨验证”的案例（代码和效果图）。
案例八：完成“计算器功能实现”的案例（代码和效果图）。
案例九：完成“视频体彩 11 选 5 的实现方案2”的案例（代码和效果图）。
案例十：完成“动态增加表格的行和单元格”的案例（代码和效果图）。
案例十一:完成“动态删除表格的行”的案例（代码和效果图）。
案例十二：完成“表格复选的全选功能”的案例（代码和效果图）。
案例十三：完成“动态选中并删除表格多行”的案例（代码和效果图）。
案例十四：完成“用getElementByID方法实现加法器”的案例（代码和效果图）。
案例十五：完成“实现简易选项卡”的案例（代码和效果图）。
案例十六：完成“动物像册”的案例（代码和效果图）。

！！本篇均为博主课堂上实验案例，目的是为了托管代码，所以会有不足之处

案例一：完成多分支案例“年龄层判断”（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>年龄层判断</title></head><body><script>var age=19;if(age>=18){alert("adult");}else if(age>=6){alert("teenager");}else{alert("kid");}if(age){document.write("Hello");}else{document.write("BYE");}</script></body>
</html>

效果图：

案例二：完成“prompt()方法及动态输入实现矩形周长面积计算”的案例（代码和效果图）。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>矩形周长面积计算</title></head><body><script>var w=prompt("请输入矩形的宽","1");var h=prompt("请输入矩形的高","1");alert("矩形的周长为："+2*(parseFloat(h)+parseFloat(w)));alert("矩形的面积为："+h*w);</script></body>
</html>

效果图：

案例三：完成“二维数组的数据访问实现试题展示”的案例（代码和效果图）。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>试题展示</title></head><body><script>var questions = new Array();var questionxz = new Array();var answers = new Array();questions[0]="下列选项中（ ）可以用来检索下拉列表框中被选项目的索引号。";questionxz[0]=["A.selectedLndex","B.options","C.length","D.lenght"];answers[0]='A';questions[1]="在javaScript中（ ）方法可以对数组元素进行排序。";questionxz[1]=["A.add()","B.join()","C.sort()","D.length()"];answers[1]="C";for(var i=0;i<questions.length;i++){document.write(questions[i]+"<br />");for(var j=0;j<4;j++){document.write(questionxz[i][j]+"<br />");}document.write("答案是"+answers[i]+"<br />");}</script></body>
</html>

效果图：

案例四：完成“考试倒计时的实现”的案例（代码和效果图）。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>考试倒计时</title><style>#time{height: 100px;padding: 20px 5px 5px 126px;background: ;color: #0000FF;font-size:28px;}</style></head><body><div id="time"></div><img id="im" src="img/考试倒计时2.jpg" /><script>var im=document.getElementById("im");var time=document.getElementById("time");var ks=new Date;var msks=ks.getTime();var js=msks+60*60*1000;function jsover(){var syfz=Math.floor((js-new Date().getTime())/(1000*60));var sym=Math.floor((js-new Date().getTime()-syfz*1000*60)/1000);if(syfz<5) {//time.style.background="url(img/考试倒计时1.jpg) no-repeat";im.src="img/考试倒计时1.jpg"}if(syfz<2){im.src="img/考试倒计时3.jpg"//time.style.background="url(img/考试倒计时1.jpg)no_repeat";}if(syfz<0){time.innerHTML="";clearInterval(timeID);}else{time.innerHTML="高考结束还剩"+syfz+"分"+sym+"秒";}}timeID=setInterval("jsover()",1000);</script></body>
</html>

效果图：

案例五：完成“随机点名器的实现”的案例（代码和效果图）

代码：


<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>随机点名器</title><style type="text/css">#bodybj {background: url(img/开灯.jpg)  no-repeat center top;}       #box {margin: auto;width: 550px;font-size: 66px;height: 94px;color: #138eee;text-align: center;margin-top: 250px;}           #bt {margin: auto;width: 200px;text-align: center;margin-top: 75px;color:aquamarine;font-size: 25px;cursor: pointer;}</style></head><body id="bodybj" background="img/开灯.jpg"><div id="box">亲，准备好点名了吗</div><div id="bt" onclick="doit()">开始点名</div><script>var namelist=["王思聪","王健林","马云","赵丽颖","迪丽热巴","古力娜扎","马化腾"];var mytime=null;function doit(){var bt=window.document.getElementById("bt");if(mytime==null){bt.innerHTML="停止点名";show();}else{bt.innerHTML="开始点名";clearInterval(mytime);mytime=null;}}function show(){var box=window.document.getElementById("box");var num=Math .floor(Math.random()*100000)%namelist.length;box.innerHTML=namelist[num];mytime=setTimeout("show()",1);}</script></body>
</html>

效果图：

案例六：完成“下拉列表框的应用”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function disable(){x.disabled=true;}function enable(){x.disabled=false;}function getlength(){alert(x.length);}function changesize(){x.size=4;}function selectmultiple(){x.multiple=true;}function getindex(){alert(x.selectedIndexx);}function getoptions(){var txt="选中的选项";var i;for(i=0;i<x.length;i++){if(x.options[i].selected){txt=txt+"\n"+x.options[i].txt;}}}function changeText(){x.options[x.selectedIndex].text="甜瓜";}function removeoption(){x.remove(x.selectedIndex);}</script></head><body><form><select id="myselect"><option value="水果1">苹果</option><option value="水果2">梨子</option><option vallue="水果3">梨子</option><option value="水果4">橙子</option></select><br /><br /><input type="button" onclick="disable()" value="禁用列表" /><input type="button" onclick="enable()" value="启用列表" /><input type="button" onclick="getlength()" value="列表有几种选择" /><input type="button" onclick="changesize()" value="修改列表大小" /><input type="button" onclick="selectmultiple()" value="选择多个" /><p>在你点击“选择多个”按钮之前，尽量选择一个以上的选项（通过按shift或ctrl键）然后尝试点击</p><input type="button" onclick="getindex()" value="弹出选中索引" /><input type="button" onclick="getoptions()" value="输出选中选项" /><input type="button" onclick="changeText()" value="设置你的选项" /><input type="button" onclick="removeoption()" value="移除你的选项" /></form><script>var x=document.getElementById("myselect");document.write(alert("form的子对象select的值是：",x.value));x.onchange=function(){alert("from的子对象select的值是："+x.value);}</script></body>
</html>

效果图：

案例七：完成“正则表达式实现表单严谨验证”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>正则表达式实现表单严谨验证</title></head><body><form name="cform" method="post" action="实验二三元运算符实现图片切换.html" onsubmit="return checkForm();">用户账号：<input name="user" /><br />用户密码：<input name="pass" type="password" /><br /><input type="submit" value="验证" /></form><script>function checkForm(){//验证账号var user=cform.user.value;var pass=cform.pass.value;if(!(/^[a-zA-Z]\w{3,15}$/.test(user))){alert("用户账号由字母、数字、下划线、字母开头，4-16位");cform.user.select();return false;}if(!(/^\w{4,16}$/.test(pass))){alert("密码由4~16位字符组成");cform.pass.select();return false;}return true;}</script></body>
</html>

效果图：

案例八：完成“计算器功能实现”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>计算器功能实现</title> <style type="text/css">#sDiv {          text-align: center;border: solid 1px;width: 200px;border-radius: 15px}#t {border: solid 1px;width: 150px;border-radius: 15px;margin: 10px 0;font-size: 20px;padding: 0 3px;} input[type=button] {width: 30px;height: 30px;margin: 4px;font-size: 20px;} #equ {width: 150px;font-size: 26px;padding-bottom: 30px;}</style></head>   <body><div id="sDiv"><input type="text" name="box" id="box" value="" /><br/><input type="button" name="" id="" value="1" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="2" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="3" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="4" onclick="calCulate(this.value)" /><br /><input type="button" name="" id="" value="5" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="6" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="7" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="8" onclick="calCulate(this.value)" /><br /><input type="button" name="" id="" value="9" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="0" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="." onclick="calCulate(this.value)" /><input type="button" name="" id="" value="C" onclick="s(' ' )" /><br/><input type="button" name="" id="" value="+" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="-" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="*" onclick="calCulate(this.value)" /><input type="button" name="" id="" value="/" onclick="calCulate(this.value)" /><br/><input type="button" name="" id="equ" value="=" onclick="e(this.value)" /></div><script>input = document.getElementById('box');function s(v) {input.value = v}function calCulate(v) {input.value += v}function e() {try {s(eval(input.value))} catch (e) {s('Error')}}function operator(type) {switch (type) {case "backspace":var str = input.value;//str = (str != "0") ? str : "";str = str.substr(0, str.length - 1);str = (str != "") ? str : "0";input.value = str;break;case "opposite":input.value = -input.value;break;case "percent":input.value = input.value / 100;break;case "pow":input.value = Math.pow(input.value, 2);break;case "sqrt":input.value = Math.sqrt(input.value);break;}}</script></body></html>

效果图：

案例九：完成“视频体彩 11 选 5 的实现方案2”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>体彩实现</title></head><body><img src="img/体彩.jpg" /><script>var arr = [];//建立一个空数组function add() {number = Math.floor(Math.random() * 11 + 1);//获取随机数for (x in arr)if (arr[x] == number)return;//发现重复数字返回 arr.push(number)//压入数组}do {add();} while (arr.length < 5)/*输出数组*/for (x in arr)if (arr[x] < 10)arr[x] = '0' + arr[x];//格式化输出document.write("<h1 style='color: firebrick'>本期的幸运号码：", arr.join("  "), "</h1>");</script></body>
</html>

效果图：

案例十：完成“动态增加表格的行和单元格”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><table id="info" align="center" width="300" border="1"><caption>学生基本信息统计表</caption><tr><th>学号</th><th>姓名</th><th>年龄</th></tr></table><button onclick="add()">增加一行</button><script>function add(){var tab=document.getElementById("info");var r=tab.insertRow(1);var c1=r.insertCell(0);var c2=r.insertCell(1);var c3=r.insertCell(2);c1.innerHTML='364656';c2.innerHTML='小曼';c3.innerHTML='19';}</script></body>
</html>

效果图：

案例十一:完成“动态删除表格的行”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>function del(a){var index=a.parentNode.parentNode.rowIndex;document.getElementById("mytable").deleteRow(index);}</script></head><body><table id="mytable" border="1"><tr><td>行1</td><td><a onclick="del(this)">删除</a></td></tr><tr><td>行2</td><td><input type="button" value="删除" onclick="del(this)"</td></tr><tr><td>行3</td><td><input type="button" value="删除" onclick="del(this)"></td></tr></table></body>
</html>

效果图：

案例十二：完成“表格复选的全选功能”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格复选的全选功能</title><style type="text/css">table{border-collapse: collapse;}td{text-align: center;border: 1px solid;}</style></head><body><table id="tb"><caption><h2>请选择前端设计参考书</h2></caption><tr style="font-weight: bold;"><td><input id="all" type="checkbox" value="全选" onclick="all_check()"</td><td>书称</td><td>价格（元）</td><td>数量</td></tr><tr><td><input name="ic" type="checkbox" value="1" onclick="single_check()"</td><td>JavaScript入门提高</td><td>39</td><td>6</td></tr><tr><td><input name="ic" type="checkbox" value="2" onclick="single_check()"</td><td>JavaScript编程艺术</td><td>29</td><td>5</td></tr><tr><td><input name="ic" type="checkbox" value="3" onclick="single_check()"</td><td>锋利的javaScript</td><td>36</td><td>9</td></tr><tr><td><input name="ic" type="checkbox" value="3" onclick="single_check()"</td><td>javaScript权威</td><td>59</td><td>5</td></tr><tr><td colspan="4" style="text-align: left;font-weight: 900;">删除选中项</td></tr></table><script>var oinput = document.getElementsByName("ic");var allcheck=document.getElementById("all");var tb=document.getElementById("tb");function all_check(){for(var i=0;i<oinput.length;i++){if(allcheck.checked==true){oinput[i].checked=true;}else{oinput[i].checked=false;}}}function single_check(){var j=0;for (var i=0;i<oinput.length;i++) {if(oinput[i].checked==true){j=j+1;}}if(j==oinput.length){//当所有的都被选中allcheck.checked=true;//全选按钮打勾}else{allcheck.checked=false;}}</script></body>
</html>

效果图;

案例十三：完成“动态选中并删除表格多行”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格复选的全选功能</title><style type="text/css">table{width: 600px;border: 1 solid #007108;border-collapse: collapse;background-color: #d9ffdc;text-align: center;padding: 5px;}td{text-align: center;border: 1px solid;}</style></head><body><table id="tb"><caption><h2>我的购物车</h2></caption><tr style="font-weight: bold;"><td><input id="all" type="checkbox" value="全选" onclick="all_check()"</td><td>商品1</td><td>价格（元）</td><td>数量</td></tr><tr><td><input name="ic" type="checkbox" value="1" onclick="single_check()"</td><td>商品2</td><td>39</td><td>6</td></tr><tr><td><input name="ic" type="checkbox" value="2" onclick="single_check()"</td><td>商品3</td><td>29</td><td>5</td></tr><tr><td><input name="ic" type="checkbox" value="3" onclick="single_check()"</td><td>商品4</td><td>36</td><td>9</td></tr><tr><td><input name="ic" type="checkbox" value="3" onclick="single_check()"</td><td>商品5</td><td>59</td><td>5</td></tr><tr><td colspan="4" style="text-align: center;font-weight: 900; "onclick="tremove()">删除选中项</td></tr></table><script>var oinput = document.getElementsByName("ic");var allcheck=document.getElementById("all");var tb=document.getElementById("tb");function all_check(){for(var i=0;i<oinput.length;i++){if(allcheck.checked==true){oinput[i].checked=true;}else{oinput[i].checked=false;}}}function single_check(){var j=0;for (var i=0;i<oinput.length;i++) {if(oinput[i].checked==true){j=j+1;}}if(j==oinput.length){//当所有的都被选中allcheck.checked=true;//全选按钮打勾}else{allcheck.checked=false;}}function tremove(){for(var k=0;k<oinput.length;k++){if(oinput[k].checked==true){tb.deleteRow(k+1);k=-1;}}}</script></body>
</html>

效果图：

案例十四：完成“用getElementByID方法实现加法器”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input id="tx1" placeholder="111" />+<input id="tx2" placeholder="222" />=<span id="s1"></span><br /><button onclick="jis()">计算</button><script>function jis(){var t1=document.getElementById("tx1").value;var t2=document.getElementById("tx2").value;document.getElementById("s1").innerHTML=parseFloat(t1)+parseFloat(t2);}</script></body>
</html>

效果图：

案例十五：完成“实现简易选项卡”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>简易选项卡</title><style>body,ul,li{margin: 0;padding: 0;}body{font: 12px/1.5 tahoma;}#outer{width: 450px;margin: 10px auto;}#tab{overflow: hidden;zoom: 1;background: #000;border:1px solid #000 ;}#tab li{float: left;color: #fff;height: 30px;line-height: 30px;list-style-type: none;padding: 0 20px;}#tab li.current{color: #000;background: #ccc;}#content{border: 1px solid #000;border-top-width: 0;}#content ul{line-height: 25px;display: none;margin: 0 30px;padding: 2px;}</style><script>window.onload=function(){var oLi=document.getElementById("tab").getElementsByTagName("li");var oUl=document.getElementById("content").getElementsByTagName("ul");for(var i=0;i<oLi.length;i++){oLi[i].index=i;oLi[i].onmouseover=function(){for(var n=0;n<oLi.length;n++){oLi[n].className="";}this.className="current";for(var n=0;n<oUl.length;n++){oUl[n].style.display="none";}oUl[this.index].style.display="block";}}}</script></head><body><div id=outer><ul id="tab"><li class="current">第一课</li><li>第二课</li><li>第三课</li></ul><div id="content"><ul style="display: block;"><li>网页特效原理</li><li>响应用户操作</li><li>提示框效果</li><li>事件驱动</li><li>元素属性操作</li><li>动手编写</li><li>引入函数</li><li>网页换肤效果</li></ul><ul ><li>撒旦发射点</li><li>给v撒旦v</li><li>撒v噶啥的</li><li>过不少地方v吧</li><li>按国标</li><li>古巴的v啊</li><li>光度法v噶</li><li>安徽广东</li></ul><ul ><li>地方都是</li><li>不会的萨芬</li><li>王菲的</li><li>爱侣v从</li><li>不敢发士大夫</li><li>不会的吧</li><li>爱国VS</li><li>阿飞的v下</li></ul></div></div></body>
</html>

效果图:

案例十六：完成“动物像册”的案例（代码和效果图）。

代码：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#imagegallery li{display: inline;/*不会换行*/list-style: none;}#imagegallery img{width: 300px;height: 200px;}</style></head><body><h1>动物相册</h1><ul id="imagegallery"><li><a href="img/动物1.jpg" title="狗狗"><img src="img/动物1.jpg" alt="狗"/></a></li><li><a href="img/动物2.jpg" title="鸡鸡"><img src="img/动物2.jpg" alt="鸡"/></a></li><li><a href="img/动物3.jpg" title="狮狮"><img src="img/动物3.jpg" alt="狮"/></a></li><li><a href="img/动物4.jpg" title="猫猫"><img src="img/动物4.jpg" alt="猫"/></a></li></ul><img id="placeholder" src="img/动物2.jpg" alt="动物相册" /><p id="description">选择你喜欢的图片</p><script>function showPic(whichpic){var source = whichpic.getAttribute("href");var placeholder=document.getElementById("placeholder");placeholder.setAttribute("src",source);var text=whichpic.getAttribute("title");var desription=document.getElementById("description");desription.firstChild.nodeValue=text;}window.onload=function(){var gallery=document.getElementById("imagegallery");var links = gallery.getElementsByTagName("a");for (var i=0;i<links.length;i++) {links[i].onclick=function(){showPic(this);return false;}}}</script></body>
</html>

效果图：

javaScript简单项目案例相关推荐

javaScript动画项目案例
javaScript动画项目案例示例代码:我的github demo效果演示示例:我的demo网站 1.动画库编写匀速运动案例一效果:匀速运动 <!DOCTYPE html> &l ...
PHP简单项目案例（改进版）
最近开学php,下午闲着没事干,想着做个小项目练练手,也就是用php写个网页,对数据库里的东西实现增删改查,下面给大家分享一下,由于本人的业务能力尚浅,大家有啥建议我很欢迎哦! 简单效果: 1.打开网 ...
JavaScript 简单项目代码
登录界面效果图: <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
c#课程设计简单题目_《C#项目案例》课程设计题目
1 < C# 项目案例>课程设计题目一.课程设计的基本目标 1 .通过本次课程设计,熟练掌握开发语言 C# 和开发环境-- .NET . 开发语言的熟练需要通过编写一定长度的代码( 1 ...
JavaScript小项目之BMI值计算
项目题目: 实现BMI值计算器项目作用: 复习JavaScript课程知识,学习DOM基础知识,熟悉document对象的使用,实现简单的BMI计算器页面. JavaScript小项目系列前言一 ...
数据可视化-echarts入门、常见图表案例、超详细配置解析及项目案例
文章目录数据可视化-echarts入门.常见图表案例及项目案例一.简介一.数据可视化简介二.echarts简介三.echarts特点四.ZRender介绍二.Echarts的基本使用一 ...
SpringBoot 整合WebSocket 简单实战案例
前言这个简单实战案例主要目的是让大家了解websocket的一些简单使用. 另外使用stomp方式的: <Springboot 整合 WebSocket ,使用STOMP协议 ,前后端整合实战 ...
Javascript 简单介绍
0 计算机组成 * 线程 cpu 内存主板显卡游戏热贵 8000 集成显卡软件 - 应用软件:浏览器(Chrome/IE/Firefox).QQ.Sublime.Word 压缩 - 系统软 ...
转发：11个web前端开发实战项目案例+源码！拿走就是了
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_43793782/arti ...

javaScript简单项目案例

js简单案例

案例一：完成多分支案例“年龄层判断”（代码和效果图）。

案例二：完成“prompt()方法及动态输入实现矩形周长面积计算”的案例（代码和效果图）。

案例三：完成“二维数组的数据访问实现试题展示”的案例（代码和效果图）。

案例四：完成“考试倒计时的实现”的案例（代码和效果图）。

案例五：完成“随机点名器的实现”的案例（代码和效果图）

案例六：完成“下拉列表框的应用”的案例（代码和效果图）。

案例七：完成“正则表达式实现表单严谨验证”的案例（代码和效果图）。

案例八：完成“计算器功能实现”的案例（代码和效果图）。

案例九：完成“视频体彩 11 选 5 的实现方案2”的案例（代码和效果图）。

案例十：完成“动态增加表格的行和单元格”的案例（代码和效果图）。

案例十一:完成“动态删除表格的行”的案例（代码和效果图）。

案例十二：完成“表格复选的全选功能”的案例（代码和效果图）。

案例十三：完成“动态选中并删除表格多行”的案例（代码和效果图）。

案例十四：完成“用getElementByID方法实现加法器”的案例（代码和效果图）。

案例十五：完成“实现简易选项卡”的案例（代码和效果图）。

案例十六：完成“动物像册”的案例（代码和效果图）。

javaScript简单项目案例相关推荐

最新文章

热门文章