一、动态时钟
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>动态时钟</title> 6 <script type="text/javascript"></script> 7 </head> 8 ?9 <body>10 <h3 onClick="showtime(this)" id="as1"></h3>11 </body>12 </html>13 14 15 <script>16 ????var weq=document.getElementById(‘as1‘); ???17 ????function showtime(){18 ????????var dy=new Date();19 ????????var year=dy.getFullYear(),20 ????????????month=dy.getMonth(),21 ????????????date=dy.getDate();22 ????????????23 ????????var hours=dy.getHours(),24 ????????????mients=dy.getMinutes(),25 ????????????semiao=dy.getSeconds();26 ????????if(month<10){27 ????????????var jia="0"+(month+1);28 ????????}else{29 ????????????jia=+(month+1);30 ????????}31 ????????if(date<10){32 ????????????var jian="0"+(date+1);33 ????????}else{34 ????????????jian=+(date+1);35 ????????}36 ????????var time=year+"-"+jia+"-"+jian+" "+hours+":"+mients+":"+semiao;37 ????????weq.innerHTML=time;38 ????}39 ????window.onload=function(){40 ?????time = setInterval("showtime()",1000);41 }42 43 </script>二、实现简单计算器，分别输入两个数和一个运算符号，计算结果。计算过程使用一个带参数和带返回值得函数封装实现
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>计算器</title> 6 <script type="text/javascript"></script> 7 </head> 8 ?9 10 <body>11 <!--1、实现简单计算器，分别输入两个数和一个运算符号，计算结果。计算过程使用一个带参数和带返回值得函数封装实现（10分）-->12 <p>请输入数1:<input type="text" id="numone" value=""></p>13 <p>请输入数2:<input type="text" id="numtwo" value=""></p>14 <p>请选择符号:<select>15 ????<option >+</option>16 ????<option>-</option>17 ????<option>*</option>18 ????<option>/</option>19 </select></p>20 21 <span><input type="button" value="计算" onClick="jisuan()"></span>22 <input type="text" ?id="numhe" value="">23 24 </body>25 </html>26 <script>27 28 var sum=‘‘;29 function jisuan(){30 ????var one=document.getElementById(‘numone‘).value,31 ????????two=document.getElementById(‘numtwo‘).value,32 ????????num=document.getElementById(‘numhe‘);33 ?????console.log(one); console.log(two);34 ????var shuxing=document.getElementsByTagName(‘select‘)[0].value;35 ????????36 ?????????if(shuxing == ‘+‘){37 ?????????sum=parseInt(one) + parseInt(two);38 ?????????}else if(shuxing == ‘-‘){39 ?????????sum=parseInt(one) - parseInt(two);40 ?????????}else if(shuxing == ‘*‘){41 ?????????sum=parseInt(one) * parseInt(two);42 ?????????}else if(shuxing == ‘/‘){43 ?????????sum=parseInt(one) / parseInt(two);44 ?????????}45 ????num.value=sum;46 ????}47 48 </script>三、彩票36选7 不重
1 var arr=[]; 2 var sum=""; 3 var flag=1 4 for(i=0;i<7;i++){ 5 ????sum=parentInt(Math.random()*35+1); 6 ????for(var j in arr){ 7 ????????if(sum=arr[j]){ 8 ????????????flag=0; 9 ????????????break;10 ????????????}11 ????}12 ????????if(flag==0){13 ????????????i--;14 ????????}else{15 ???????????arr[i]=sum;16 ????????}17 ????18 ????????console.log(arr[i]);19 }四、生成4个随机数当做验证码
1 利用DOM进行表单验证 2 ?3 例：生成4个随机数当做验证码 4 ?5 //HTML输出程序 6 ?7 验证码：<div id="yzm" onClick="huanyizhang"></div><br> 8 ?9 请输入验证码：<input type="text" id="shuru"><br>10 11 <button onClick="yz">验证</button><span id="sp"></span>12 13 var arr=[0，2,1,3,5,4,8,6]; ???//定义一个数组，用于存放随机数14 15 var yzm1=document.getElementById("yzm"); ??//获取yzm的元素16 17 var str=""; ??????????//定义一个空的变量用于情空以前赋值的验证码18 19 ???????function huanyizhang(){ ??????//定义一个方法用于重新生成验证码20 21 ???????for(var i=0;i<4;i++){ ????????????//定义循环次数22 23 ???????var xb=Math.random()*arr.length; ?????//定义一个变量用于存放随机生成的验证码24 25 ???????str=str+arr[xb]; ??????????????// 将验证码存放到变量中26 27 ???????}28 29 yzm1.innerHTML=str; ??????????//将变量输出到表单中30 31 }32 33 var shuru1=document.getElementById("shuru").value; ????????//获取用户输入的验证码的值34 35 var trueorfalse=document.getElementById("sp").innerHTML ????//获取最终判断结果span标签的值36 37 function yz(){ ???????????//定义一个方法用来验证输入的结果是否正确38 39 ???????if(shuru1==str){ ????//当正确时输出40 41 ??????????????trueorfalse="验证码输入正确";42 43 ???????}else{ ??????????????//当错误时输出44 45 ??????????????trueorfalse="验证码输入错误";46 47 ???????}48 49 ?????????????50 51 }52 53 ?54 55 思路：56 57 1.先建立HTML58 59 2.观察需要获取的值，和想要输入的值60 61 3.定义变量获取想要的元素并添加js事件62 63 注意及易错64 65 1.注意要输入的值是不是表单元素，表单元素需要用.value来获值，非表单元素需要用innerHTML来获取66 67 2.注意定义空值，清空每次赋值的五、水仙花数
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>水仙花数</title> 6 <script type="text/javascript" src="shuixianhuashu.js"></script> 7 <script> 8 ????for(var i=100;i<1000;i++) 9 ????{10 ????????var a=parseInt(i/100);11 ????????var b=parseInt(i/10%10);12 ????????var c=parseInt(i%10);13 ????????if(a*a*a+b*b*b+c*c*c==i)14 ????????????{15 ????????????????console.log(i);16 ????????????}17 ????}18 </script>19 </head>20 21 <body>22 23 </body>24 </html>六、用*号做一个菱形
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>*号菱形</title> 6 <script type="text/javascript"></script> 7 </head> 8 <body> 9 </body>10 </html>11 <script>12 var line=7;13 ????for(var i=0;i<line;i++) { 14 ????????if(i<=3) {15 ????????????for(var j=0;j<=line-i-4;j++) {16 ????????????????document.write(‘ ‘);17 ????????????}18 ????????????for(var j=0;j<i*2+1;j++) {19 ????????????????document.write(‘*‘);20 ????????????}21 ????????} else {22 ???????for(var j=0;j<=i-line+4;j++) {23 ????????????????document.write(‘ ‘);24 ????????????}25 ???????for(var j=(line-i)*2-1;j>0;j--) {26 ????????????????document.write(‘*‘);27 ????????????}28 ????}29 ??????document.write(‘<br />‘);30 }31 </script>七、100元购物卡，牙刷5元，香皂2元、洗发水15元 有几种组合每个的个数
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>购物卡</title> 6 <script type="text/javascript" src="gouwukati.js"></script> 7 <script> 8 ????var num = 0; 9 for(var i = 0; i<=20;i++){10 ????for(var j = 0; j<=50;j++){11 ????????for(var k = 0; k<=6;k++){12 ????????????if(i*5+j*2+k*15 == 100){13 ????????????????num++;14 ????????????????console.log("第"+num+"种：牙刷"+i+"个,香皂"+j+"个,洗发水"+k);15 ????????????}16 ????????}17 ????}18 }19 console.log("总共有"+num+"种情况");20 </script>21 </head>22 23 <body>24 </body>25 </html>八、斐波那契数列 第20个数是什么
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>斐波那契数列 ?第20个数是什么</title> 6 <script type="text/javascript" src="yibaishudehe.js"></script> 7 <script> 8 ????var n=prompt("请输入第几个数"); 9 var a=0;10 var b=0;11 for(var a=0;a<n;a++){12 ??b=a+b;13 if(a<100){14 ?????console.log(b);15 ????}16 }17 </script>18 </head>19 <body>20 </body>21 </html>九、男士身高与体重的关系是：身高－１００＝体重； 女士：身高－１１０＝体重。
上下浮动３公斤属正常。
???输入性别，身高，体重，输出：正常？偏胖？偏瘦？
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title> 输入性别，身高，体重，输出：正常？偏胖？偏瘦？</title> 6 <script type="text/javascript" src="shuzu.js"></script> 7 <script> 8 ????var six=prompt("性别"); 9 var h=prompt("身高");10 var w=prompt("体重");11 var i="正常";12 var j="偏胖";13 var k="偏瘦";14 switch(six){15 ????case "男":16 ????????var cha=w-h-100;17 ????????if(cha>=-3&&cha<=3){18 ????????????console.log(i);19 ????????}20 ????????else if(cha>3){21 ????????????console.log(j);22 ????????}23 ????????else{24 ????????????console.log(k);25 ????????}26 ????????break;27 ????case "女":28 ????????var cha=w-h-110;29 ????????if(cha>=-3&&cha<=3){30 ????????????console.log(i);31 ????????}32 ????????else if(cha>3){33 ????????????console.log(j);34 ????????}35 ????????else{36 ????????????console.log(k);37 ????????}38 ????????break;39 }40 ????</script>41 </head>42 43 <body>44 </body>45 </html>十、青歌赛打分、20位评委给一个选手打分、去掉一个最高分、去掉一个最低分，求平均得分、去掉两个分？
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="dafen.js"></script> 7 <script> 8 //青歌赛打分、20位评委给一个选手打分、 9 //去掉一个最高分、去掉一个最低分10 //求平均得分、去掉两个分11 //12 //1、定义一个数组13 //2、循环20次 ?prompt14 //3、循环比较得出最高分，最低分15 //4、求和减去最高分，最低分16 var arr=[];17 var sun=0;18 for(var a=0;a<4;a++){19 ????arr[a]=parseInt(prompt("请输入分数"));20 }21 var max=arr[0];22 var min=arr[0];23 for(var b=0;b<4;b++){24 ????if(max < arr[b]){25 ????????max = arr[b];26 ????}27 ????if(min > arr[b]){28 ????????min = arr[b];29 ????}30 ????sun=sun+arr[b];31 }32 console.log(((sun-max-min)/2)); ???33 </script>34 </head>35 <body>36 </body>37 </html>十一、实现轮播图_鼠标放上和移开 关联自动轮播
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>轮播图</title> 6 <style></style> 7 </head> 8 <!--三张图片，每张图片，鼠标放上去之后出现左右箭头houver，点击左滑，右滑--离开时箭头消失--> 9 <!--10 1.三张图片重叠11 2.点击之后自动跳转12 3.循环次数为arr.length13 ?右循环为arr.length ?左循环为arr.length-114 -->15 <body>16 <div>17 ????<button onClick="ttp()">上一张</button>18 ????<img src="imge/1.jpg" onMouseOver="stopSetin()" onMouseOut="zaikaishi()" alt="" id="imge1" >19 ????<button onClick="xia()">下一张</button>20 </div>21 </body>22 </html>23 <script type="text/javascript">24 ????window.onload=function(){25 ????????26 ????}27 ????var n=1;28 ????var arr=["imge/1.jpg",‘imge/2.jpg‘,‘imge/3.jpg‘];29 ????var ?imclass=document.getElementById(‘imge1‘);30 ????function xia(){31 ????????imclass.setAttribute("src",arr[n]);32 ????????n++;33 ????????if(n >= arr.length){34 ????????????n=0;35 ????????}36 ????}37 ????function ttp(){38 ????????imclass.setAttribute("src",arr[n]);39 ????????n--;40 ????????if(n < 0){41 ????????????n=arr.length-1;42 ????????}43 ????}44 ????stre=setInterval("xia()",1000);45 ????function stopSetin(){46 ????????clearInterval(stre);47 ????}48 ????function zaikaishi(){49 ????????stre=setInterval("xia()",1000);50 ????}51 </script>PHP一阶段 html+css+js 练习题汇总
原文地址：https://www.cnblogs.com/1301694f/p/8331406.html