devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML+JS好例子集锦_html js实例

作者：代码探险家 | 2024-08-03 08:43:22

赞

踩

html js实例

HTML+JS好例子集锦

一些HTML+JavaScript好例子，有些例子照网络资料，包括： HTML+JS限时小学数学出题、打开对话框选择本地文件、 简单画布画板、 俄罗斯方块游戏、 落英纷飞动画 、随机点名器的示例、生成二维码等。从中感受HTML+JavaScript可以实现功能的强大。

基础知识参见  HTML5+CSS入门与提高学习系列 https://blog.csdn.net/cnds123/article/details/113860164
JavaScript入门与提高学习讲座系列文章 https://blog.csdn.net/cnds123/article/details/110119640

一、HTML+JS限时小学数学出题

先给出效果演示图：

源码如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>简单的出题计算</title>
  6.  
  7. <style type="text/css">
  8. body{font-family:Dunkin,"开心软件甜蜜蜜简体","Segoe","Segoe UI","微软雅黑",sans-serif;font-size:30px;background-color:#fff}
  9. input,button{font-family:Dunkin,"开心软件甜蜜蜜简体","Segoe","Segoe UI","微软雅黑",sans-serif;font-size:20px}
  10. .title{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#fff;z-index:3;}
  11. #ti{font-family:Dunkin,"Segoe","Segoe UI",sans-serif;font-size:50px;background-color:#fff}
  12. </style>
  13.  
  14. </head>
  15. <body>
  16.  
  17. <div class="title" id="title">
  18. 	<br><br><h3 align="center">简单的小学数学随机出题，限时</h3>
  19. 	<center><input type="button" value="开始答题" onclick="$('title').style.display='none';dati()"></center>
  20. </div>
  21.  
  22. <center>
  23. 	<br>
  24. 	<h2 id="ti">17+12</h2><br>
  25. 	<input type="text" id="texts"><br><br>
  26.                  <input type="button" value="判断" onclick="ok()">
  27.                  <input type="button" value="清除" onclick="cls()">
  28. 	<br><br>
  29. 	答对<span id="att1">0</span>题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;打错<span id="att2">0</span>题<br><span id="att3">60</span>
  30.                  
  31. </center>
  32.  
  33. <script>
  34. function $(i){
  35.         return document.getElementById(i)
  36. }
  37.  
  38. function rand(min,max){return Math.round(Math.random()*(max-min)+min)}
  39.  
  40. var dui=0,cuo=0,time=60,fu1=0,fu2=0,add=0,pd=29;
  41. function dati(){
  42.         dui=0;cuo=0;time=60
  43.         $("att1").innerHTML="0"
  44.         $("att2").innerHTML="0"
  45.         $("att3").innerHTML="倒计时：60"
  46.         var art=setInterval(function(){
  47.                 time--
  48.                 $("att3").innerHTML="倒计时：" + time
  49.                 if(time<=0){alert("时间到");$('title').style.display='';clearInterval(art)}
  50.         },1000)
  51.         document.getElementById("texts").focus(); //文本框获取焦点
  52.         tis()
  53. }
  54.  
  55. function tis(){
  56.         fu1=rand(5,100);fu2=rand(5,100);add=rand(0,1)
  57.         if(fu2>fu1){add=0}
  58.         if(add==0){pd=fu1+fu2}
  59.         if(add==1){pd=fu1-fu2}
  60.         $("ti").innerHTML=fu1+""+["+","-"][add]+""+fu2
  61. }
  62.  
  63. function ok(){
  64.         if($("texts").value==pd){dui++;$("att1").innerHTML=dui}else{cuo++;$("att2").innerHTML=cuo}
  65.         tis()
  66.        
  67. }
  68.  
  69. function cls(){
  70.         document.getElementById("texts").value = ""; //清空文本框
  71.         document.getElementById("texts").focus(); //文本框获取焦点
  72. }
  73.  
  74. </script>
  75.  
  76. </body>
  77. </html>

二、打开对话框选择本地文件

先给出效果演示图：

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6. </head>
  7. <body>
  8. <script>
  9. function show()
  10. {
  11.     var reader = new FileReader();
  12.     reader.onload = function() 
  13.     {
  14.        //document.body.innerText = this.result; 
  15.        //alert(this.result)
  16.        document.getElementById("content1").value = this.result; //将文本文件的内容读入textarea中
  17.     }
  18.     var f = document.getElementById("filePicker").files[0];
  19.     reader.readAsText(f);
  20. }
  21. </script>
  22. <input type="file" name="file" id="filePicker"/>
  23. <br>
  24. <input type="button" value = "显示"  onclick="show()"/>
  25. <br>
  26. <textarea id="content1" cols="50" rows="10">显示区</textarea>
  27. </body>
  28. </html>

三、 简单画布画板

先给出效果演示图：

 可以按着鼠标左键绘图写字，可以保存绘图。

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>canvas绘图板</title>
  6. <style>
  7.   canvas{
  8.       border:1px dashed black;}
  9. </style>
  10. <script type="text/javascript">
  11.   var canvas;
  12.   var context;
  13.   window.onload=function(){
  14.       canvas=document.getElementById("drawingCanvas");
  15.       context=canvas.getContext("2d");
  16.       context.fillStyle="rgb(255,255,255)";
  17.       context.fillRect(0,0,canvas.width,canvas.height);
  18.       context.strokeStyle="rgb(0,0,0)";
  19.       context.lineWidth=5;
  20.       canvas.onmousedown=startDrawing;
  21.       canvas.onmouseup=stopDrawing;
  22.       canvas.onmouseout=stopDrawing;
  23.       canvas.onmousemove=draw;
  24.   }
  25.  
  26.   var previousColorElement;
  27.   function changeColor(color,imgElement){
  28.       context.strokeStyle=color;
  29.       imgElement.className="Selected";
  30.       if(previousColorElement!=null){
  31.          previousColoeElement.className="";
  32.       }
  33.       previousColorElement=imgElement;
  34.   }
  35.  
  36.   var previousThicknessElement;
  37.   function changeThickness(thickness,imgElement){
  38.       context.lineWidth=thickness;
  39.       imgElement.className="Selected";
  40.       if(previousThicknessElement!=null){
  41.          previousThicknessElement.className="";
  42.       }
  43.       previousThicknessElement=imgElement;
  44.   }
  45.  
  46.   var isDrawing=false;
  47.   function startDrawing(e){
  48.       isDrawing=true;
  49.       context.beginPath();
  50.       context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);
  51.   }
  52.  
  53.   function draw(e){
  54.       if(isDrawing==true){
  55.          var x=e.pageX-canvas.offsetLeft;
  56.          var y=e.pageY-canvas.offsetTop;
  57.          context.lineTo(x,y);
  58.          context.stroke();
  59.       }
  60.   }
  61.  
  62.   function stopDrawing(){
  63.       isDrawing=false;
  64.   }
  65.  
  66.   function clearCanvas(){
  67.       context.fillStyle="rgb(255,255,255)";
  68.       context.fillRect(0,0,canvas.width,canvas.height);
  69.   }
  70.  
  71.   //canvas保存图片为png格式并下载到本地
  72.   function exportCanvasAsPNG(canvas_id, fileName) {
  73.  
  74.       var canvasElement = document.getElementById(canvas_id);
  75.  
  76.       var MIME_TYPE = "image/png";
  77.  
  78.       var imgURL = canvasElement.toDataURL(MIME_TYPE);
  79.  
  80.       var dlLink = document.createElement('a');
  81.       dlLink.download = fileName;
  82.       dlLink.href = imgURL;
  83.       dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
  84.  
  85.       document.body.appendChild(dlLink);
  86.       dlLink.click();
  87.       document.body.removeChild(dlLink);
  88.   }
  89.  
  90. </script>
  91. </head>
  92. <body>
  93. <div align="center">
  94.       COLOR<input type="color" id="colorSelect" onchange="changeColor(colorSelect.value,this);" value="rgb(255,255,255)"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  95.       WIDTH<input type="range" id="widthSelect" onchange="context.lineWidth=widthSelect.value;" min="1" max="20" value="5"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  96.       <button id="clearCanvas" onclick="clearCanvas();">CLEAR ALL</button>
  97.  
  98.       <button onclick="exportCanvasAsPNG('drawingCanvas','nianling')">SAVE</button>
  99.       <br/>
  100.       <canvas id="drawingCanvas" width="800" height="400"></canvas>
  101. </div>
  102. </body>
  103. </html>

四、 俄罗斯方块游戏

先给出效果演示图：

可以赢键盘上的箭头键移动或旋转方块

源码如下：

  1. <!doctype html>
  2. <HTML>
  3. <HEAD>
  4.  
  5. <title>Tetris</title>
  6. <script>window.resizeTo(410,450)</script>
  7. <style>
  8. <!--
  9. .MB
  10. {
  11.     BACKGROUND-COLOR: firebrick;
  12.     CURSOR: default;
  13.     HEIGHT: 22px;
  14.     WIDTH: 22px
  15. }
  16. .SB
  17. {
  18.     BACKGROUND-COLOR: slategray;
  19.     CURSOR: default;
  20.     HEIGHT: 22px;
  21.     WIDTH: 22px
  22. }
  23. .BK
  24. {
  25.     BACKGROUND-COLOR: white;
  26.     CURSOR: default;
  27.     HEIGHT: 22px;
  28.     WIDTH: 22px
  29. }
  30. .GT
  31. {
  32.     BORDER-BOTTOM: deepskyblue thin solid;
  33.     BORDER-LEFT: deepskyblue thin solid;
  34.     BORDER-RIGHT: deepskyblue thin solid;
  35.     BORDER-TOP: deepskyblue thin solid;
  36.     CURSOR: default
  37. }
  38. -->
  39. </style>
  40. <script>
  41. <!--
  42. var BX=new Array(4);
  43. var BY=new Array(4);
  44. var PX=new Array(4);
  45. var PY=new Array(4);
  46. var mTimer
  47. var firstView
  48. var gameState = 0;
  49.  
  50. function beginGame()
  51. {
  52.     gameState=0;
  53.     speed=1;
  54.     outTime=1100-speed*100;
  55.     score=0;
  56.     if(gameState!=0)return;
  57.     firstView=true;
  58.     for(j=0;j<16;j++)
  59.         for(i=0;i<10;i++)
  60.             setClass(i,j,"BK");
  61.     randBar();
  62.     gameState=1;
  63.     Play.disabled=true;
  64.     window.clearInterval(mTimer);
  65.     mTimer=window.setInterval("moveBar()",outTime);
  66. }
  67.  
  68. function keyControl()
  69. {
  70.     if(gameState!=1)return;
  71.     switch(event.keyCode){
  72.         case 37:{    //left
  73.             for(i=0;i<4;i++)if(BX[i]==0)return;
  74.             for(i=0;i<4;i++)if(getClass(BX[i]-1,BY[i])=="SB")return;
  75.             for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
  76.             for(i=0;i<4;i++)BX[i]=BX[i]-1;
  77.             for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
  78.             break;}
  79.         case 38:{    //up
  80.             var preMBarX=new Array(4);
  81.             var preMBarY=new Array(4);
  82.             var cx=Math.round((BX[0]+BX[1]+BX[2]+BX[3])/4);
  83.             var cy=Math.round((BY[0]+BY[1]+BY[2]+BY[3])/4);
  84.             for(i=0;i<4;i++){
  85.                 preMBarX[i]=Math.round(cx-cy+BY[i]);
  86.                 preMBarY[i]=Math.round(cx+cy-BX[i]);
  87.                 if(preMBarX[i]<0 || preMBarX[i]>9 || preMBarY[i]<0 || preMBarY[i]>15)return;
  88.                 if(getClass(preMBarX[i],preMBarY[i])=="SB")return;
  89.             }
  90.             for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
  91.             for(i=0;i<4;i++){
  92.                 BX[i]=preMBarX[i];
  93.                 BY[i]=preMBarY[i];
  94.             }
  95.             for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
  96.             break;}
  97.         case 39:{    //right
  98.             for(i=0;i<4;i++)if(BX[i]==9)return;
  99.             for(i=0;i<4;i++)if(getClass(BX[i]+1,BY[i])=="SB")return;
  100.             for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
  101.             for(i=0;i<4;i++)BX[i]=BX[i]+1;
  102.             for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
  103.             break;}
  104.         case 40:{    //down
  105.             moveBar();
  106.             break;}
  107.     }
  108. }
  109.  
  110. function delLine()
  111. {
  112.     for(i=0;i<4;i++)setClass(BX[i],BY[i],"SB");
  113.     for(j=0;j<16;j++){
  114.         dLine=true;
  115.         for(i=0;i<10;i++){
  116.             if(getClass(i,j)!="SB"){
  117.                 dLine=false;
  118.                 break;
  119.             }
  120.         }
  121.         if(dLine){
  122.             score=score+100;
  123.             for(k=j;k>0;k--)
  124.                 for(l=0;l<10;l++)
  125.                     setClass(l,k,getClass(l,k-1));
  126.             for(l=0;l<10;l++)setClass(l,0,"BK");
  127.         }
  128.     }
  129.     randBar();
  130.     speed=Math.floor(score/3000)+1;
  131.     outTime=1100-speed*100;
  132.     scoreBar.innerHTML="Score : " + score;
  133.     speedBar.innerHTML="Speed : " + speed;
  134.     window.clearInterval(mTimer);
  135.     mTimer=window.setInterval("moveBar()",outTime);
  136. }
  137.  
  138. function getClass(x,y){return GameBar.children[y].children[x].className;}
  139. function setClass(x,y,cName){GameBar.children[y].children[x].className=cName;}
  140.  
  141. function moveBar()
  142. {
  143.     if(gameState!=1)return;
  144.     dropLine=true;
  145.     for(i=0;i<4;i++)if(BY[i]==15)dropLine=false;
  146.     if(dropLine)for(i=0;i<4;i++)if(getClass(BX[i],BY[i]+1)=="SB")dropLine=false;
  147.     if(!dropLine){
  148.         window.clearInterval(mTimer);
  149.         delLine();
  150.         return;
  151.     }
  152.     for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");
  153.     for(i=0;i<4;i++)BY[i]=BY[i]+1;
  154.     for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
  155. }
  156.  
  157. function pauseGame()
  158. {
  159.     if(gameState==0)return;
  160.     if(event.srcElement.value=="Pause"){
  161.         gameState=2;
  162.         event.srcElement.value="Continue";
  163.         window.clearInterval(mTimer);
  164.     }
  165.     else{
  166.         gameState=1;
  167.         event.srcElement.value="Pause";
  168.         mTimer=window.setInterval("moveBar()",outTime);
  169.     }
  170. }
  171.  
  172. function fMnu(){return false;}
  173. document.oncontextmenu=fMnu;
  174.  
  175. function preview()
  176. {
  177.     if(previewWnd.style.display!="none")
  178.         previewWnd.style.display="none";
  179.     else
  180.         previewWnd.style.display="block";
  181. }
  182.  
  183. function replayGame()
  184. {
  185.     if(gameState!=1)return;
  186.     if(!confirm("Really want to re-start the game?"))return;
  187.     gameState=0;
  188.     window.clearInterval(mTimer);
  189.     beginGame();
  190. }
  191. function randBar()
  192. {
  193.     randNum=Math.floor(Math.random()*20)+1;
  194.     if(!firstView)
  195.         for(i=0;i<4;i++){
  196.             BX[i]=PX[i];
  197.             BY[i]=PY[i];
  198.         }
  199.     switch(randNum){
  200.         case 1:{
  201.             PX[0]=4;
  202.             PY[0]=0;
  203.             PX[1]=4;
  204.             PY[1]=1;
  205.             PX[2]=5;
  206.             PY[2]=1;
  207.             PX[3]=6;
  208.             PY[3]=1;
  209.             break;}
  210.         case 2:{
  211.             PX[0]=4;
  212.             PY[0]=0;
  213.             PX[1]=5;
  214.             PY[1]=0;
  215.             PX[2]=4;
  216.             PY[2]=1;
  217.             PX[3]=4;
  218.             PY[3]=2;
  219.             break;}
  220.         case 3:{
  221.             PX[0]=4;
  222.             PY[0]=0;
  223.             PX[1]=5;
  224.             PY[1]=0;
  225.             PX[2]=6;
  226.             PY[2]=0;
  227.             PX[3]=6;
  228.             PY[3]=1;
  229.             break;}
  230.         case 4:{
  231.             PX[0]=5;
  232.             PY[0]=0;
  233.             PX[1]=5;
  234.             PY[1]=1;
  235.             PX[2]=5;
  236.             PY[2]=2;
  237.             PX[3]=4;
  238.             PY[3]=2;
  239.             break;}
  240.         case 5:{
  241.             PX[0]=6;
  242.             PY[0]=0;
  243.             PX[1]=6;
  244.             PY[1]=1;
  245.             PX[2]=4;
  246.             PY[2]=1;
  247.             PX[3]=5;
  248.             PY[3]=1;
  249.             break;}
  250.         case 6:{
  251.             PX[0]=4;
  252.             PY[0]=0;
  253.             PX[1]=4;
  254.             PY[1]=1;
  255.             PX[2]=4;
  256.             PY[2]=2;
  257.             PX[3]=5;
  258.             PY[3]=2;
  259.             break;}
  260.         case 7:{
  261.             PX[0]=4;
  262.             PY[0]=0;
  263.             PX[1]=4;
  264.             PY[1]=1;
  265.             PX[2]=5;
  266.             PY[2]=0;
  267.             PX[3]=6;
  268.             PY[3]=0;
  269.             break;}
  270.         case 8:{
  271.             PX[0]=4;
  272.             PY[0]=0;
  273.             PX[1]=5;
  274.             PY[1]=0;
  275.             PX[2]=5;
  276.             PY[2]=1;
  277.             PX[3]=5;
  278.             PY[3]=2;
  279.             break;}
  280.         case 9:{
  281.             PX[0]=4;
  282.             PY[0]=0;
  283.             PX[1]=5;
  284.             PY[1]=0;
  285.             PX[2]=5;
  286.             PY[2]=1;
  287.             PX[3]=6;
  288.             PY[3]=1;
  289.             break;}
  290.         case 10:{
  291.             PX[0]=5;
  292.             PY[0]=0;
  293.             PX[1]=5;
  294.             PY[1]=1;
  295.             PX[2]=4;
  296.             PY[2]=1;
  297.             PX[3]=4;
  298.             PY[3]=2;
  299.             break;}
  300.         case 11:{
  301.             PX[0]=4;
  302.             PY[0]=1;
  303.             PX[1]=5;
  304.             PY[1]=1;
  305.             PX[2]=5;
  306.             PY[2]=0;
  307.             PX[3]=6;
  308.             PY[3]=0;
  309.             break;}
  310.         case 12:{
  311.             PX[0]=4;
  312.             PY[0]=0;
  313.             PX[1]=4;
  314.             PY[1]=1;
  315.             PX[2]=5;
  316.             PY[2]=1;
  317.             PX[3]=5;
  318.             PY[3]=2;
  319.             break;}
  320.         case 13:{
  321.             PX[0]=4;
  322.             PY[0]=0;
  323.             PX[1]=5;
  324.             PY[1]=0;
  325.             PX[2]=6;
  326.             PY[2]=0;
  327.             PX[3]=5;
  328.             PY[3]=1;
  329.             break;}
  330.         case 14:{
  331.             PX[0]=4;
  332.             PY[0]=0;
  333.             PX[1]=4;
  334.             PY[1]=1;
  335.             PX[2]=4;
  336.             PY[2]=2;
  337.             PX[3]=5;
  338.             PY[3]=1;
  339.             break;}
  340.         case 15:{
  341.             PX[0]=5;
  342.             PY[0]=0;
  343.             PX[1]=5;
  344.             PY[1]=1;
  345.             PX[2]=4;
  346.             PY[2]=1;
  347.             PX[3]=6;
  348.             PY[3]=1;
  349.             break;}
  350.         case 16:{
  351.             PX[0]=5;
  352.             PY[0]=0;
  353.             PX[1]=5;
  354.             PY[1]=1;
  355.             PX[2]=5;
  356.             PY[2]=2;
  357.             PX[3]=4;
  358.             PY[3]=1;
  359.             break;}
  360.         case 17:{
  361.             PX[0]=4;
  362.             PY[0]=0;
  363.             PX[1]=5;
  364.             PY[1]=0;
  365.             PX[2]=4;
  366.             PY[2]=1;
  367.             PX[3]=5;
  368.             PY[3]=1;
  369.             break;}
  370.         case 18:{
  371.             PX[0]=4;
  372.             PY[0]=0;
  373.             PX[1]=5;
  374.             PY[1]=0;
  375.             PX[2]=4;
  376.             PY[2]=1;
  377.             PX[3]=5;
  378.             PY[3]=1;
  379.             break;}
  380.         case 19:{
  381.             PX[0]=3;
  382.             PY[0]=0;
  383.             PX[1]=4;
  384.             PY[1]=0;
  385.             PX[2]=5;
  386.             PY[2]=0;
  387.             PX[3]=6;
  388.             PY[3]=0;
  389.             break;}
  390.         case 20:{
  391.             PX[0]=5;
  392.             PY[0]=0;
  393.             PX[1]=5;
  394.             PY[1]=1;
  395.             PX[2]=5;
  396.             PY[2]=2;
  397.             PX[3]=5;
  398.             PY[3]=3;
  399.             break;}
  400.     }
  401.     if(firstView){
  402.         firstView=false;
  403.         randBar();
  404.         return;
  405.     }
  406.     for(i=0;i<4;i++){
  407.         for(j=0;j<4;j++){
  408.             previewBar.children[j].children[i].className="BK";
  409.         }
  410.     }
  411.     for(i=0;i<4;i++)previewBar.children[PY[i]].children[PX[i]-3].className="MB";
  412.     for(i=0;i<4;i++){
  413.         if(getClass(BX[i],BY[i])!="BK"){
  414.             alert("Game Over!");
  415.             window.clearInterval(mTimer);
  416.             Play.disabled=false;
  417.             gameState=0;
  418.             return;
  419.         }
  420.     }
  421.     for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
  422. }
  423. // -->
  424. </script>
  425. </HEAD>
  426.  
  427. <BODY bgcolor="#EAF0F8" onkeydown="return keyControl();" topmargin="10" leftmargin="10" rightmargin="10" bottommargin="0" scroll=no>
  428. <table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%"><tr><td width="100%" height="100%" align="center">
  429. <table cellspacing=2 cellpadding=0 class=gt border=0 bordercolor="#EAF0F8" bgcolor="#EAF0F8">
  430. <tr>
  431. <td valign="top">
  432.     <table cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="#EAF0F8" style="">
  433.     <Tbody id=GameBar>
  434.     <tr><td nowrap class=BK> </td><td nowrap class=BK> </td><td nowrap class=BK> </td><td nowrap class=BK> </td><td nowrap class=BK> </td><td nowrap class=BK> 
  435.     </td><td nowrap class=BK> </td><td nowrap class=BK> </td><td nowrap class=BK> </td><td nowrap class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK>
  436.     </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> 
  437.     </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> 
  438.     </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> 
  439.     </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> 
  440.     </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr>
  441.     </tbody>
  442.     </table>
  443. </td>
  444. <td valign="top" align="center" style="padding: 10 10 0 10" bgcolor="#466285">
  445.     <table cellspacing=0 cellpadding=0 border=0>
  446.     <tr><td><font size=5 color=red face=consolas>Tetris</font></td></tr>
  447.     </table>
  448.     <table id="previewWnd" cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="#EAF0F8" bgcolor="#EAF0F8" style="margin-top:15">
  449.     <Tbody id="previewBar">
  450.     <tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr><tr><td class=BK> </td><td class=BK> </td><td class=BK> </td><td class=BK> </td></tr>
  451.     </tbody>
  452.     </table>
  453.     <table cellspacing=3 cellpadding=0 border=0 style="margin-top:15">
  454.         <tr><td><input type=button id="Play" style="font-family:Tahoma; font-size:9pt; width:100px" value="Play" onclick="return beginGame();"></td></tr>
  455.         <tr><td><input type=button id="Pause" style="font-family:Tahoma; font-size:9pt; width:100px" value="Pause" onclick="return pauseGame();"></td></tr>
  456.         <tr><td><input type=button id="Preview" style="font-family:Tahoma; font-size:9pt; width:100px" value="Preview" onclick="preview();"></td></tr>
  457.         <tr><td><input type=button id="Replay" style="font-family:Tahoma; font-size:9pt; width:100px" value="Replay" onclick="replayGame();"></td></tr>
  458.     </table>
  459.     <table cellspacing=3 cellpadding=0 border=0 style="font-family:Tahoma; font-size:9pt; font-weight: bold; margin-top:10">
  460.         <tr><td id=scoreBar style="color:#FFFFFF">Score : 0</td></tr>
  461.         <tr><td id=speedBar style="color:#FFFFFF">Speed : 1</td></tr>
  462.     </table>
  463. </td>
  464. </tr>
  465. </table>
  466. </td></tr></table>
  467. </BODY>
  468. </HTML>
  469. <script>
  470. function unSel()
  471. {
  472.     document.execCommand("Unselect");
  473.     window.setTimeout("unSel()",100);
  474. }
  475. unSel();
  476.  
  477. </script>

五、  落英纷飞动画

先给出效果演示图：

运行时花瓣动态飘落

源码如下：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.  
  5. <title></title>
  6. <style type="text/css">
  7. canvas{
  8.     position: absolute;
  9.     left: 0;
  10.     top: 0;
  11. }
  12. </style>
  13. </head>
  14. <body bgcolor="#000000">
  15. <canvas id="tree"></canvas>
  16. <canvas id="flower"></canvas>
  17. <script>
  18. //两个canvas
  19. var tree = document.getElementById("tree");
  20. tree.width = window.innerWidth;
  21. tree.height = window.innerHeight ;
  22. var tCxt = tree.getContext("2d");
  23. var flower = document.getElementById("flower");
  24. flower.width = window.innerWidth;
  25. flower.height = window.innerHeight ;
  26. var cxt = flower.getContext("2d");
  27.  
  28. var flowerList = [];//樱花列表
  29. var rootTop = 450 ;//树起点
  30. var flowerColor = "rgba(255,192,203,.3)" ;//花色
  31. var flowerColorDeep = "rgba(241,158,194,.5)" ;//花色深
  32. var treeColor2 = "rgba(255,192,203,.5)" ;//树枝颜色
  33. var treeColor = "#FFF" ;//树干颜色
  34. var fallList = [];//飘落樱花列表
  35. var g = 0.01 ;//重力加速度
  36. var gWind = 0.005;//风力加速度
  37. var limitSpeedY = 1;//速度上限
  38. var limitSpeedX = 1 ;//速度上限
  39.  
  40. cxt.shadowColor= "#FFF" ;
  41. cxt.shadowBlur = 10 ;
  42.  
  43. function drawTree(x,y,deg,step,type){
  44.     var deg1 = step%2 == 0 ? 0.1 : -0.1 ;
  45.     var x1 = x + Math.cos(deg+deg1) * (step+4) * 0.8 ;//以步长来判断枝干长度 x轴偏移大一些
  46.     var y1 = y + Math.sin(deg+deg1) * (step-1) * 0.8 ;//以步长来判断枝干长度 Y轴压缩一些
  47.     tCxt.beginPath();
  48.     tCxt.lineWidth = step/3;
  49.     tCxt.moveTo(x,y);
  50.     tCxt.lineTo(x1,y1);
  51.     tCxt.strokeStyle = (step > 5 ) ? treeColor : treeColor2 ;//细纸条都换成花的颜色
  52.     tCxt.stroke();
  53.     if(step > 20){//树干相交的位置有间隙，以一个圆填充
  54.         tCxt.fillStyle = treeColor ;
  55.         tCxt.arc(x,y,step/6,0,Math.PI*2);
  56.         tCxt.fill();
  57.     }
  58.     if(step < 3 || (step < 23 && Math.random() > 0.1)){
  59.         //末梢位置 画花瓣
  60.         var color = [flowerColorDeep,flowerColor,flowerColor][Math.round(Math.random()+0.2)] ;
  61.         var r = 2+Math.random()*2
  62.         tCxt.fillStyle = color ;
  63.         tCxt.arc(x1+Math.random()*3,y1+Math.random()*3,r,0,Math.PI)
  64.         tCxt.fill();
  65.         flowerList.push({x:x,y:y,sx:(Math.random()-0.5),sy:0,color:color,r:r,deg:deg});//保存下画樱花的位置
  66.     }
  67.     step -- ;
  68.     if(step > 0){
  69.         drawTree(x1,y1,deg,step,type);
  70.         if(step%3 == 1 && step > 0 && step < 30)
  71.             drawTree(x1,y1,deg+0.2 + 0.3 * Math.random(),Math.round(step/1.13));//右分叉
  72.         if(step%3 == 0 && step > 0 && step < 30)
  73.             drawTree(x1,y1,deg-0.2 - 0.3 * Math.random(),Math.round(step/1.13));//左分叉
  74.     }
  75. }
  76.  
  77. drawTree(tree.width/2,rootTop,-Math.PI/2,30,1);//执行
  78.  
  79. var len = flowerList.length ;
  80. function step(){
  81.     if(Math.random() > 0.3)    fallList.push(flowerList[Math.floor(Math.random()*len)]);//随机取出一个，花瓣复制到飘落花瓣的列表中
  82.  
  83.     cxt.clearRect(0,0,tree.width,tree.height);
  84.     for(var i = 0 ;i < fallList.length ; i ++){
  85.         if(fallList[i].sy < limitSpeedY) fallList[i].sy += g ;
  86.         fallList[i].sx += gWind ;
  87.         fallList[i].x += fallList[i].sx ;
  88.         fallList[i].y += fallList[i].sy ;
  89.         if(fallList[i].y > rootTop+30){//飘到树根+30的花瓣移除
  90.             fallList.splice(i,1);
  91.             i -- ;
  92.             continue ;
  93.         }
  94.         cxt.beginPath();
  95.         cxt.fillStyle = fallList[i].color ;
  96.         fallList[i].deg += fallList[i].sx*0.05 ;//跟速度相关的旋转花瓣
  97.         cxt.arc(fallList[i].x,fallList[i].y,fallList[i].r,fallList[i].deg,fallList[i].deg+Math.PI*1.3);
  98.         cxt.fill();
  99.     }
  100.     requestAnimationFrame(step);
  101. }
  102. requestAnimationFrame(step);
  103. </script>
  104. </body>
  105. </html>
wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==

六、随机点名器的示例代码

随机点名器的示例代码一

先给出效果演示图：

源码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>随机点名生成</title>
  6.  
  7.     <style>
  8.         /* 页面css样式 */
  9.         .wrapper {
  10.             width: 800px;
  11.             margin: 60px auto;
  12.             border: 1px solid #ddd;
  13.             text-align: center;
  14.         }
  15.  
  16.         .box li {
  17.             vertical-align: top;
  18.             display: inline-block;
  19.             width: 100px;
  20.             height: 50px;
  21.             border: 2px solid #ddd;
  22.             border-radius: 15px;
  23.             text-align: center;
  24.             line-height: 50px;
  25.             margin: 5px;
  26.         }
  27.         
  28.         .wrapper button {
  29.             border: none;
  30.             width: 100px;
  31.             height: 50px;
  32.             border-radius: 10px;
  33.             cursor: pointer;
  34.             outline: none;
  35.             margin-top: 20px;
  36.             font-weight: bolder;
  37.             color: #333;
  38.             background-color: rgb(14, 146, 43);
  39.         }
  40.  
  41.         .wrapper button {
  42.             display: inline-block;
  43.         }
  44.  
  45.         body {
  46.             background-color: #eee;
  47.         }
  48.     </style>
  49.  
  50. </head>
  51.  
  52. <body>
  53.     <div class="wrapper">
  54.      <h1 align="center">随机点名系统</h2>
  55.         <h6 id="data" align="right"></h6>
  56.         <ul class="box"></ul>
  57.         <button class="start">开始</button>
  58.         <button class="stop">停止</button>
  59.     </div>
  60. </body>
  61.  
  62. <script>
  63.     //定义全局变量方便引用
  64.     var boxUl = document.getElementsByClassName('box')[0];
  65.     var start = document.getElementsByClassName('start')[0];
  66.     var stop = document.getElementsByClassName('stop')[0]
  67.     var oLi = document.getElementsByTagName('li');
  68.  
  69.     //数据准备
  70.     var nameString = new String("张明民,燕妍,滕朗,陶金震,彭祥,苏歌澜,李钰光,宣艺,童孝辉,徐都蓓,徐元,缪贝平,张中斌,林伯,冉凯进,戚玉素,楚婷,鲁利,孙玉筠,益友旭,孟义政,曾钰中,宁豪,鲍仁俊,文长达,裴义健,江智婉,龚娜");
  71.     var nameArr = nameString.split(",");
  72.  
  73.     //获取每个学生姓名添加到标签中，自动解析html标签
  74.     var str = "";
  75.     for (let i = 0; i < nameArr.length; i++) {
  76.         str += "<li >" + nameArr[i] + "</li>"
  77.     }
  78.     boxUl.innerHTML = str;
  79.  
  80.     //添加开始按钮的点击事件
  81.     var timer = null;
  82.     start.onclick = function () {
  83.         // 设置定时器
  84.         timer = setInterval(function () {
  85.  
  86.             // 根据数组长度范围生成随机数
  87.             var i = Math.floor(Math.random() * nameArr.length);
  88.             // 先通过for循环清空所有style属性
  89.             for (var j = 0; j < oLi.length; j++) {
  90.                 oLi[j].removeAttribute("style");
  91.             }
  92.             // 为随机选择的li颜色属性
  93.             oLi[i].style.background = "red";
  94.         }, 150);
  95.     };
  96.     // 点击停止
  97.     stop.onclick = function () {
  98.         // 清空定时器停止点名
  99.         clearInterval(timer);
  100.     }
  101.     //页面初始化时间设置
  102.     window.onload = function () {
  103.         datatime();
  104.     }
  105.     //页面时间动态刷新
  106.     setInterval(datatime, 1000);
  107.  
  108.     function datatime() {
  109.         let data = new Date();
  110.         let dataString ="现在是北京时间：" + data.toLocaleString();
  111.         document.getElementById("data").innerHTML = dataString;
  112.     }
  113. </script>
  114. </html>

随机点名器的示例代码二

先给出效果演示图：

源码如下：

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" /> 
  5. <meta name="viewport" content="width=device-width"/>
  6. <title>随机点名网页</title>
  7.  
  8. <style>
  9.   #box {
  10.     width: 30%;
  11.     height: 200px;
  12.     background-color: rgb(233, 248, 214);
  13.     border: 1px solid rgb(130, 216, 18);
  14.     font-size: 40px;
  15.     font-weight: 600;
  16.     font-family: Arial, Helvetica, sans-serif;
  17.     line-height: 200px;
  18.     text-align: center;
  19.     margin: 25px auto;
  20.     border-radius: 10px;
  21.   }
  22.   span {
  23.     display: block;
  24.     width: 30%;
  25.     height: 44px;
  26.     line-height: 44px;
  27.     background-color: rgb(6, 158, 64);
  28.     border-radius: 10px;
  29.     color: #fff;
  30.     text-align: center;
  31.     margin: 0 auto;
  32.     font-size: 18px;
  33.     font-family: 华文细黑;
  34.   }
  35.   span:hover {
  36.     background-color: rgb(4, 190, 76);
  37.   }
  38. </style>
  39. </head>
  40. <body>
  41.   <div id="box">随机点名</div>
  42.   <span id="span">开始</span>
  43. <script>
  44.  
  45.   var arr = ["张明民","燕妍","滕朗","陶金震","彭祥","苏歌澜","李钰光","宣艺","童孝辉","徐都蓓","徐元","缪贝平",
  46.      "张中斌","林伯","冉凯进"," 戚玉素","楚婷","鲁利","孙玉筠","益友旭","孟义政","曾钰中","宁豪","鲍仁俊",
  47.      "文长达","裴义健","江智婉","龚娜"]
  48.  
  49.   var box = document.getElementById("box");
  50.   var span = document.getElementById("span");//获取元素
  51.   var state = 0;//定义状态，开始和结束
  52.   var t;
  53.   span.onclick = function () {
  54.     if (state == 0) {
  55.       //如果是0即开始随机，变为1时结束，不是0时执行else
  56.       clearInterval(t);
  57.       t = setInterval(function () {
  58.         // console.log(1);
  59.         var sj = Math.round(Math.random() * (arr.length - 1));
  60.         console.log(arr[sj]);
  61.         box.innerHTML = arr[sj];
  62.       }, 3)
  63.       span.innerHTML = "暂停"//更改按钮的内容
  64.       state=1;
  65.     }else{
  66.       state=0;
  67.       clearInterval(t);
  68.       span.innerHTML = "开始"
  69.     }
  70.   }
  71. </script>
  72. </body>
  73. </html>

改进版，从文本文件中读入人员名单随机点名例子，可参见https://blog.csdn.net/cnds123/article/details/128304666一本后面部分

七、JS生成二维码

最常见的二维码为QRCode（Quick Response Code），是上世纪90年代由日本公司Denso创造出来一种矩阵式二维条码，最早用在汽车零部件管理，后来手机上网普及了，就成了一种扫描输入网址的方式。

下面给出JS使用QRCode.js二维码库生成二维码

QRCode.js库网址mirrors / davidshimjs / qrcodejs · GitCode

下载后解压，使用其中的qrcode.js

建立indexA.html，将indexA.html和qrcode.js放在同一个文件夹中

indexA.html内容如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title> JS 生成二维码</title>
  6. </head>
  7. <body>
  8.     内容：<input type="text" id="content" value="https://www.csdn.net/" />  <br><br>
  9.     尺寸：<input type="text" id="size" value="150"><br><br>
  10.     背景：<input type="text" id="color" value="#fff"><br><br>
  11.     前景：<input type="text" id="colorr" value="#000"><br><br>
  12.     <button id="btn">生成二维码</button><br><br>
  13.     <div id="qrcode"></div>
  14. </body>
  15. <script src='qrcode.js'></script>
  16. <script type="text/javascript">
  17.  
  18.     //声明变量
  19.     let qrcode;
  20.     let content;
  21.     let size;
  22.     let color;
  23.     let colorr;
  24.     // 设置点击事件
  25.     document.getElementById("btn").onclick =function(){
  26.         // 获取内容
  27.         content = document.getElementById("content").value;
  28.         // 获取尺寸
  29.         size = document.getElementById("size").value;
  30.          // 获取背景
  31.         color = document.getElementById("color").value;
  32.          // 获取前景
  33.         colorr = document.getElementById("colorr").value;
  34.         // 清除上一次的二维码
  35.         document.getElementById("qrcode").innerHTML = '';    //清除上一次的二维码
  36.         
  37.  
  38.         // 创建二维码
  39.         qrcode = new QRCode(document.getElementById("qrcode"), {
  40.             width : size,//设置宽高
  41.             height : size,
  42.             colorLight : color,
  43.             colorDark : colorr,
  44.             
  45.         });
  46.         //qrcode.makeCode(document.getElementById("content").value);
  47.         var elText = document.getElementById("content");
  48. 	qrcode.makeCode(elText.value);
  49.     }
  50.  
  51. </script>
  52. </html>

用浏览器打开indexA.html，效果如下：

OK!

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/922248
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号