一、动态时钟
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.先建立HTML 58 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次 prompt 14 //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.length 13 右循环为arr.length 左循环为arr.length-1 14 --> 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>