PHP一階段 html+css+js 練習題彙總

時間 2019-11-22

標籤 php 階段 html+css+js html css 練習題彙總欄目 PHP 简体版

原文原文鏈接

1、動態時鐘javascript

 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>

View Code

2、實現簡單計算器，分別輸入兩個數和一個運算符號，計算結果。計算過程使用一個帶參數和帶返回值得函數封裝實現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 
 9 
10 <body>
11 <!--一、實現簡單計算器，分別輸入兩個數和一個運算符號，計算結果。計算過程使用一個帶參數和帶返回值得函數封裝實現（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>

View Code

3、彩票36選7 不重java

 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 }

View Code

4、生成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.注意定義空值，清空每次賦值的

View Code

5、水仙花數dom

 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>

View Code

6、用*號作一個菱形ide

 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>

View Code

7、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>

View Code

8、斐波那契數列第20個數是什麼ui

 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>

View Code

9、男士身高與體重的關係是：身高－１００＝體重；　女士：身高－１１０＝體重。this

上下浮動３公斤屬正常。
輸入性別，身高，體重，輸出：正常？偏胖？偏瘦？spa

 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>

View Code

10、青歌賽打分、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 //一、定義一個數組
13 //二、循環20次  prompt
14 //三、循環比較得出最高分，最低分
15 //四、求和減去最高分，最低分
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>

View Code

11、實現輪播圖_鼠標放上和移開關聯自動輪播

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>table表格正選/反選、輪播圖</title>
 6 <!--三張圖片，每張圖片，鼠標放上去以後出現左右箭頭houver，點擊左滑，右滑--離開時箭頭消失-->
 7 <!--
 8 1.三張圖片重疊
 9 2.點擊以後自動跳轉
10 3.循環次數爲arr.length
11  右循環爲arr.length  左循環爲arr.length-1
12 -->
13 <script>
14     window.onload = function(){
15         
16     }
17     //    圖片顯示的元素
18     var img_change = document.getElementById('img_change');
19     //    圖片路徑數組
20     var imgarray = ['imge/1.jpg','imge/2.jpg','imge/3.jpg'];
21     //    圖片替換的索引值
22     var num = 1;
23     var img_val = '';
24     var timeI = '';
25 
26 //    上一張
27     function top_img(){
28 //        設置標籤的src屬性
29 //        兼容點擊上一張以後num的值
30         if(num >= 2){
31             num = -1; 
32         }
33         img_change.setAttribute('src',imgarray[num+1]);
34         num--;
35         if(num < -1){
36             num = 1;
37         }
38     }
39     
40 //    下一張
41     function next(){
42 //        設置標籤的src屬性
43 //        兼容點擊上一張以後num的值
44         if(num <= -1){
45             num = 2;
46         }
47         img_change.setAttribute('src',imgarray[num]);
48         num++;
49         if(num >= imgarray.length){
50             num = 0;
51         }
52     }
53     timeI = setInterval('next()',1000);
54 //    移入中止自動播放
55     function stop(){
56         clearInterval(timeI);
57     }
58 //    移出自動開始播放
59     function start(){
60         timeI = setInterval('next()',1000);
61     }
62 </script>
63 </head>
64 
65 <body>
66     <input type="button" value="上一張" onClick="top_img()">
67     <img id="img_change" onMouseOver="stop()" onMouseOut="start()" src="imge/1.jpg" alt="">
68     <input type="button" value="下一張" onClick="next()">
69 </body>
70 </html>

View Code

 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 </scri