PHP一阶段 html+css+js 练习题汇总 / 憋错料

一、动态时钟

 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(‘&nbsp‘);
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(‘&nbsp‘);
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>

原文地址：https://www.cnblogs.com/1301694f/p/8331406.html

时间： 2024-08-28 21:12:57

PHP一阶段 html+css+js 练习题汇总

PHP一阶段 html+css+js 练习题汇总的相关文章

最新Node.js 资源汇总

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

html+css+js实现复选框全选与反选

赵雅智：js知识点汇总

如何用正则匹配后缀名不为.jpg, .css, .js, .html, .htm, .png的文件

WordPress引入css/js方法总结

asp.net MVC发布iis无法加载css,js和图片

springMvc整合Freemarker引入CSS,JS文件404的问题

nginx访问css js 图片等静态资源，报404或无法定向访问到