HTML+JS好例子集锦

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

基础知识参见 HTML5+CSS新手入门学习系列 CSDN

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

先给出效果演示图：

源码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的出题计算</title><style type="text/css">
body{font-family:Dunkin,"开心软件甜蜜蜜简体","Segoe","Segoe UI","微软雅黑",sans-serif;font-size:30px;background-color:#fff}
input,button{font-family:Dunkin,"开心软件甜蜜蜜简体","Segoe","Segoe UI","微软雅黑",sans-serif;font-size:20px}
.title{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#fff;z-index:3;}
#ti{font-family:Dunkin,"Segoe","Segoe UI",sans-serif;font-size:50px;background-color:#fff}
</style></head>
<body><div class="title" id="title"><br><br><h3 align="center">简单的小学数学随机出题，限时</h3><center><input type="button" value="开始答题" onclick="$('title').style.display='none';dati()"></center>
</div><center><br><h2 id="ti">17+12</h2><br><input type="text" id="texts"><br><br><input type="button" value="判断" onclick="ok()"><input type="button" value="清除" onclick="cls()"><br><br>答对<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></center><script>
function $(i){return document.getElementById(i)
}function rand(min,max){return Math.round(Math.random()*(max-min)+min)}var dui=0,cuo=0,time=60,fu1=0,fu2=0,add=0,pd=29;
function dati(){dui=0;cuo=0;time=60$("att1").innerHTML="0"$("att2").innerHTML="0"$("att3").innerHTML="倒计时：60"var art=setInterval(function(){time--$("att3").innerHTML="倒计时：" + timeif(time<=0){alert("时间到");$('title').style.display='';clearInterval(art)}},1000)document.getElementById("texts").focus(); //文本框获取焦点tis()
}function tis(){fu1=rand(5,100);fu2=rand(5,100);add=rand(0,1)if(fu2>fu1){add=0}if(add==0){pd=fu1+fu2}if(add==1){pd=fu1-fu2}$("ti").innerHTML=fu1+""+["+","-"][add]+""+fu2
}function ok(){if($("texts").value==pd){dui++;$("att1").innerHTML=dui}else{cuo++;$("att2").innerHTML=cuo}tis()}function cls(){document.getElementById("texts").value = ""; //清空文本框document.getElementById("texts").focus(); //文本框获取焦点
}</script></body>
</html>

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

先给出效果演示图：

源码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title>
</head>
<body>
<script>
function show()
{var reader = new FileReader();reader.onload = function() {//document.body.innerText = this.result; //alert(this.result)document.getElementById("content1").value = this.result; //将文本文件的内容读入textarea中}var f = document.getElementById("filePicker").files[0];reader.readAsText(f);
}
</script>
<input type="file" name="file" id="filePicker"/>
<br>
<input type="button" value = "显示"  onclick="show()"/>
<br>
<textarea id="content1" cols="50" rows="10">显示区</textarea>
</body>
</html>

三、简单画布画板

先给出效果演示图：

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

源码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas绘图板</title>
<style>
canvas{border:1px dashed black;}
</style>
<script type="text/javascript">
var canvas;
var context;
window.onload=function(){canvas=document.getElementById("drawingCanvas");context=canvas.getContext("2d");context.fillStyle="rgb(255,255,255)";context.fillRect(0,0,canvas.width,canvas.height);context.strokeStyle="rgb(0,0,0)";context.lineWidth=5;canvas.onmousedown=startDrawing;canvas.onmouseup=stopDrawing;canvas.onmouseout=stopDrawing;canvas.onmousemove=draw;};
var previousColorElement;
function changeColor(color,imgElement){context.strokeStyle=color;imgElement.className="Selected";if(previousColorElement!=null){previousColoeElement.className="";}previousColorElement=imgElement;}
var previousThicknessElement;
function changeThickness(thickness,imgElement){context.lineWidth=thickness;imgElement.className="Selected";if(previousThicknessElement!=null){previousThicknessElement.className="";}previousThicknessElement=imgElement;}
var isDrawing=false;
function startDrawing(e){isDrawing=true;context.beginPath();context.moveTo(e.pageX-canvas.offsetLeft,e.pageY-canvas.offsetTop);}
function draw(e){if(isDrawing==true){var x=e.pageX-canvas.offsetLeft;var y=e.pageY-canvas.offsetTop;context.lineTo(x,y);context.stroke();}}
function stopDrawing(){isDrawing=false;}
function clearCanvas(){context.fillStyle="rgb(255,255,255)";context.fillRect(0,0,canvas.width,canvas.height);}
</script>
</head>
<body>
<div align="center">COLOR<input type="color" id="colorSelect" onchange="changeColor(colorSelect.value,this);" value="rgb(255,255,255)"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WIDTH<input type="range" id="widthSelect" onchange="context.lineWidth=widthSelect.value;" min="1" max="20" value="5"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="clearCanvas" onclick="clearCanvas();">CLEAR ALL</button><br/><canvas id="drawingCanvas" width="800" height="400"></canvas>
</div>
</body>
</html>

四、俄罗斯方块游戏

先给出效果演示图：

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

源码如下：

<!doctype html>
<HTML>
<HEAD><title>Tetris</title>
<script>window.resizeTo(410,450)</script>
<style>
<!--
.MB
{BACKGROUND-COLOR: firebrick;CURSOR: default;HEIGHT: 22px;WIDTH: 22px
}
.SB
{BACKGROUND-COLOR: slategray;CURSOR: default;HEIGHT: 22px;WIDTH: 22px
}
.BK
{BACKGROUND-COLOR: white;CURSOR: default;HEIGHT: 22px;WIDTH: 22px
}
.GT
{BORDER-BOTTOM: deepskyblue thin solid;BORDER-LEFT: deepskyblue thin solid;BORDER-RIGHT: deepskyblue thin solid;BORDER-TOP: deepskyblue thin solid;CURSOR: default
}
-->
</style>
<script>
<!--
var BX=new Array(4);
var BY=new Array(4);
var PX=new Array(4);
var PY=new Array(4);
var mTimer
var firstView
var gameState = 0;function beginGame()
{gameState=0;speed=1;outTime=1100-speed*100;score=0;if(gameState!=0)return;firstView=true;for(j=0;j<16;j++)for(i=0;i<10;i++)setClass(i,j,"BK");randBar();gameState=1;Play.disabled=true;window.clearInterval(mTimer);mTimer=window.setInterval("moveBar()",outTime);
}function keyControl()
{if(gameState!=1)return;switch(event.keyCode){case 37:{    //leftfor(i=0;i<4;i++)if(BX[i]==0)return;for(i=0;i<4;i++)if(getClass(BX[i]-1,BY[i])=="SB")return;for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");for(i=0;i<4;i++)BX[i]=BX[i]-1;for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");break;}case 38:{    //upvar preMBarX=new Array(4);var preMBarY=new Array(4);var cx=Math.round((BX[0]+BX[1]+BX[2]+BX[3])/4);var cy=Math.round((BY[0]+BY[1]+BY[2]+BY[3])/4);for(i=0;i<4;i++){preMBarX[i]=Math.round(cx-cy+BY[i]);preMBarY[i]=Math.round(cx+cy-BX[i]);if(preMBarX[i]<0 || preMBarX[i]>9 || preMBarY[i]<0 || preMBarY[i]>15)return;if(getClass(preMBarX[i],preMBarY[i])=="SB")return;}for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");for(i=0;i<4;i++){BX[i]=preMBarX[i];BY[i]=preMBarY[i];}for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");break;}case 39:{    //rightfor(i=0;i<4;i++)if(BX[i]==9)return;for(i=0;i<4;i++)if(getClass(BX[i]+1,BY[i])=="SB")return;for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");for(i=0;i<4;i++)BX[i]=BX[i]+1;for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");break;}case 40:{    //downmoveBar();break;}}
}function delLine()
{for(i=0;i<4;i++)setClass(BX[i],BY[i],"SB");for(j=0;j<16;j++){dLine=true;for(i=0;i<10;i++){if(getClass(i,j)!="SB"){dLine=false;break;}}if(dLine){score=score+100;for(k=j;k>0;k--)for(l=0;l<10;l++)setClass(l,k,getClass(l,k-1));for(l=0;l<10;l++)setClass(l,0,"BK");}}randBar();speed=Math.floor(score/3000)+1;outTime=1100-speed*100;scoreBar.innerHTML="Score : " + score;speedBar.innerHTML="Speed : " + speed;window.clearInterval(mTimer);mTimer=window.setInterval("moveBar()",outTime);
}function getClass(x,y){return GameBar.children[y].children[x].className;}
function setClass(x,y,cName){GameBar.children[y].children[x].className=cName;}function moveBar()
{if(gameState!=1)return;dropLine=true;for(i=0;i<4;i++)if(BY[i]==15)dropLine=false;if(dropLine)for(i=0;i<4;i++)if(getClass(BX[i],BY[i]+1)=="SB")dropLine=false;if(!dropLine){window.clearInterval(mTimer);delLine();return;}for(i=0;i<4;i++)setClass(BX[i],BY[i],"BK");for(i=0;i<4;i++)BY[i]=BY[i]+1;for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
}function pauseGame()
{if(gameState==0)return;if(event.srcElement.value=="Pause"){gameState=2;event.srcElement.value="Continue";window.clearInterval(mTimer);}else{gameState=1;event.srcElement.value="Pause";mTimer=window.setInterval("moveBar()",outTime);}
}function fMnu(){return false;}
document.oncontextmenu=fMnu;function preview()
{if(previewWnd.style.display!="none")previewWnd.style.display="none";elsepreviewWnd.style.display="block";
}function replayGame()
{if(gameState!=1)return;if(!confirm("Really want to re-start the game?"))return;gameState=0;window.clearInterval(mTimer);beginGame();
}
function randBar()
{randNum=Math.floor(Math.random()*20)+1;if(!firstView)for(i=0;i<4;i++){BX[i]=PX[i];BY[i]=PY[i];}switch(randNum){case 1:{PX[0]=4;PY[0]=0;PX[1]=4;PY[1]=1;PX[2]=5;PY[2]=1;PX[3]=6;PY[3]=1;break;}case 2:{PX[0]=4;PY[0]=0;PX[1]=5;PY[1]=0;PX[2]=4;PY[2]=1;PX[3]=4;PY[3]=2;break;}case 3:{PX[0]=4;PY[0]=0;PX[1]=5;PY[1]=0;PX[2]=6;PY[2]=0;PX[3]=6;PY[3]=1;break;}case 4:{PX[0]=5;PY[0]=0;PX[1]=5;PY[1]=1;PX[2]=5;PY[2]=2;PX[3]=4;PY[3]=2;break;}case 5:{PX[0]=6;PY[0]=0;PX[1]=6;PY[1]=1;PX[2]=4;PY[2]=1;PX[3]=5;PY[3]=1;break;}case 6:{PX[0]=4;PY[0]=0;PX[1]=4;PY[1]=1;PX[2]=4;PY[2]=2;PX[3]=5;PY[3]=2;break;}case 7:{PX[0]=4;PY[0]=0;PX[1]=4;PY[1]=1;PX[2]=5;PY[2]=0;PX[3]=6;PY[3]=0;break;}case 8:{PX[0]=4;PY[0]=0;PX[1]=5;PY[1]=0;PX[2]=5;PY[2]=1;PX[3]=5;PY[3]=2;break;}case 9:{PX[0]=4;PY[0]=0;PX[1]=5;PY[1]=0;PX[2]=5;PY[2]=1;PX[3]=6;PY[3]=1;break;}case 10:{PX[0]=5;PY[0]=0;PX[1]=5;PY[1]=1;PX[2]=4;PY[2]=1;PX[3]=4;PY[3]=2;break;}case 11:{PX[0]=4;PY[0]=1;PX[1]=5;PY[1]=1;PX[2]=5;PY[2]=0;PX[3]=6;PY[3]=0;break;}case 12:{PX[0]=4;PY[0]=0;PX[1]=4;PY[1]=1;PX[2]=5;PY[2]=1;PX[3]=5;PY[3]=2;break;}case 13:{PX[0]=4;PY[0]=0;PX[1]=5;PY[1]=0;PX[2]=6;PY[2]=0;PX[3]=5;PY[3]=1;break;}case 14:{PX[0]=4;PY[0]=0;PX[1]=4;PY[1]=1;PX[2]=4;PY[2]=2;PX[3]=5;PY[3]=1;break;}case 15:{PX[0]=5;PY[0]=0;PX[1]=5;PY[1]=1;PX[2]=4;PY[2]=1;PX[3]=6;PY[3]=1;break;}case 16:{PX[0]=5;PY[0]=0;PX[1]=5;PY[1]=1;PX[2]=5;PY[2]=2;PX[3]=4;PY[3]=1;break;}case 17:{PX[0]=4;PY[0]=0;PX[1]=5;PY[1]=0;PX[2]=4;PY[2]=1;PX[3]=5;PY[3]=1;break;}case 18:{PX[0]=4;PY[0]=0;PX[1]=5;PY[1]=0;PX[2]=4;PY[2]=1;PX[3]=5;PY[3]=1;break;}case 19:{PX[0]=3;PY[0]=0;PX[1]=4;PY[1]=0;PX[2]=5;PY[2]=0;PX[3]=6;PY[3]=0;break;}case 20:{PX[0]=5;PY[0]=0;PX[1]=5;PY[1]=1;PX[2]=5;PY[2]=2;PX[3]=5;PY[3]=3;break;}}if(firstView){firstView=false;randBar();return;}for(i=0;i<4;i++){for(j=0;j<4;j++){previewBar.children[j].children[i].className="BK";}}for(i=0;i<4;i++)previewBar.children[PY[i]].children[PX[i]-3].className="MB";for(i=0;i<4;i++){if(getClass(BX[i],BY[i])!="BK"){alert("Game Over!");window.clearInterval(mTimer);Play.disabled=false;gameState=0;return;}}for(i=0;i<4;i++)setClass(BX[i],BY[i],"MB");
}
// -->
</script>
</HEAD><BODY bgcolor="#EAF0F8" onkeydown="return keyControl();" topmargin="10" leftmargin="10" rightmargin="10" bottommargin="0" scroll=no>
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%"><tr><td width="100%" height="100%" align="center">
<table cellspacing=2 cellpadding=0 class=gt border=0 bordercolor="#EAF0F8" bgcolor="#EAF0F8">
<tr>
<td valign="top"><table cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="#EAF0F8" style=""><Tbody id=GameBar><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> </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></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> </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> </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> </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> </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></tbody></table>
</td>
<td valign="top" align="center" style="padding: 10 10 0 10" bgcolor="#466285"><table cellspacing=0 cellpadding=0 border=0><tr><td><font size=5 color=red face=consolas>Tetris</font></td></tr></table><table id="previewWnd" cellspacing=0 cellpadding=0 class=gt border=1 bordercolor="#EAF0F8" bgcolor="#EAF0F8" style="margin-top:15"><Tbody id="previewBar"><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></tbody></table><table cellspacing=3 cellpadding=0 border=0 style="margin-top:15"><tr><td><input type=button id="Play" style="font-family:Tahoma; font-size:9pt; width:100px" value="Play" onclick="return beginGame();"></td></tr><tr><td><input type=button id="Pause" style="font-family:Tahoma; font-size:9pt; width:100px" value="Pause" onclick="return pauseGame();"></td></tr><tr><td><input type=button id="Preview" style="font-family:Tahoma; font-size:9pt; width:100px" value="Preview" onclick="preview();"></td></tr><tr><td><input type=button id="Replay" style="font-family:Tahoma; font-size:9pt; width:100px" value="Replay" onclick="replayGame();"></td></tr></table><table cellspacing=3 cellpadding=0 border=0 style="font-family:Tahoma; font-size:9pt; font-weight: bold; margin-top:10"><tr><td id=scoreBar style="color:#FFFFFF">Score : 0</td></tr><tr><td id=speedBar style="color:#FFFFFF">Speed : 1</td></tr></table>
</td>
</tr>
</table>
</td></tr></table>
</BODY>
</HTML>
<script>
function unSel()
{document.execCommand("Unselect");window.setTimeout("unSel()",100);
}
unSel();</script>

五、落英纷飞动画

先给出效果演示图：

运行时花瓣动态飘落

源码如下：

<!doctype html>
<html>
<head><title></title>
<style type="text/css">
canvas{position: absolute;left: 0;top: 0;
}
</style>
</head>
<body bgcolor="#000000">
<canvas id="tree"></canvas>
<canvas id="flower"></canvas>
<script>
//两个canvas
var tree = document.getElementById("tree");
tree.width = window.innerWidth;
tree.height = window.innerHeight ;
var tCxt = tree.getContext("2d");
var flower = document.getElementById("flower");
flower.width = window.innerWidth;
flower.height = window.innerHeight ;
var cxt = flower.getContext("2d");var flowerList = [];//樱花列表
var rootTop = 450 ;//树起点
var flowerColor = "rgba(255,192,203,.3)" ;//花色
var flowerColorDeep = "rgba(241,158,194,.5)" ;//花色深
var treeColor2 = "rgba(255,192,203,.5)" ;//树枝颜色
var treeColor = "#FFF" ;//树干颜色
var fallList = [];//飘落樱花列表
var g = 0.01 ;//重力加速度
var gWind = 0.005;//风力加速度
var limitSpeedY = 1;//速度上限
var limitSpeedX = 1 ;//速度上限cxt.shadowColor= "#FFF" ;
cxt.shadowBlur = 10 ;function drawTree(x,y,deg,step,type){var deg1 = step%2 == 0 ? 0.1 : -0.1 ;var x1 = x + Math.cos(deg+deg1) * (step+4) * 0.8 ;//以步长来判断枝干长度 x轴偏移大一些var y1 = y + Math.sin(deg+deg1) * (step-1) * 0.8 ;//以步长来判断枝干长度 Y轴压缩一些tCxt.beginPath();tCxt.lineWidth = step/3;tCxt.moveTo(x,y);tCxt.lineTo(x1,y1);tCxt.strokeStyle = (step > 5 ) ? treeColor : treeColor2 ;//细纸条都换成花的颜色tCxt.stroke();if(step > 20){//树干相交的位置有间隙，以一个圆填充tCxt.fillStyle = treeColor ;tCxt.arc(x,y,step/6,0,Math.PI*2);tCxt.fill();}if(step < 3 || (step < 23 && Math.random() > 0.1)){//末梢位置 画花瓣var color = [flowerColorDeep,flowerColor,flowerColor][Math.round(Math.random()+0.2)] ;var r = 2+Math.random()*2tCxt.fillStyle = color ;tCxt.arc(x1+Math.random()*3,y1+Math.random()*3,r,0,Math.PI)tCxt.fill();flowerList.push({x:x,y:y,sx:(Math.random()-0.5),sy:0,color:color,r:r,deg:deg});//保存下画樱花的位置}step -- ;if(step > 0){drawTree(x1,y1,deg,step,type);if(step%3 == 1 && step > 0 && step < 30)drawTree(x1,y1,deg+0.2 + 0.3 * Math.random(),Math.round(step/1.13));//右分叉if(step%3 == 0 && step > 0 && step < 30)drawTree(x1,y1,deg-0.2 - 0.3 * Math.random(),Math.round(step/1.13));//左分叉}
}drawTree(tree.width/2,rootTop,-Math.PI/2,30,1);//执行var len = flowerList.length ;
function step(){if(Math.random() > 0.3)    fallList.push(flowerList[Math.floor(Math.random()*len)]);//随机取出一个，花瓣复制到飘落花瓣的列表中cxt.clearRect(0,0,tree.width,tree.height);for(var i = 0 ;i < fallList.length ; i ++){if(fallList[i].sy < limitSpeedY) fallList[i].sy += g ;fallList[i].sx += gWind ;fallList[i].x += fallList[i].sx ;fallList[i].y += fallList[i].sy ;if(fallList[i].y > rootTop+30){//飘到树根+30的花瓣移除fallList.splice(i,1);i -- ;continue ;}cxt.beginPath();cxt.fillStyle = fallList[i].color ;fallList[i].deg += fallList[i].sx*0.05 ;//跟速度相关的旋转花瓣cxt.arc(fallList[i].x,fallList[i].y,fallList[i].r,fallList[i].deg,fallList[i].deg+Math.PI*1.3);cxt.fill();}requestAnimationFrame(step);
}
requestAnimationFrame(step);
</script>
</body>
</html>

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

先给出效果演示图：

源码如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>随机点名生成</title><style>/* 页面css样式 */.wrapper {width: 800px;margin: 60px auto;border: 1px solid #ddd;text-align: center;}.box li {vertical-align: top;display: inline-block;width: 100px;height: 50px;border: 2px solid #ddd;border-radius: 15px;text-align: center;line-height: 50px;margin: 5px;}.wrapper button {border: none;width: 100px;height: 50px;border-radius: 10px;cursor: pointer;outline: none;margin-top: 20px;font-weight: bolder;color: #333;background-color: rgb(14, 146, 43);}.wrapper button {display: inline-block;}body {background-color: #eee;}</style></head><body><div class="wrapper"><h1 align="center">随机点名系统</h2><h6 id="data" align="right"></h6><ul class="box"></ul><button class="start">开始</button><button class="stop">停止</button></div>
</body><script>//定义全局变量方便引用var boxUl = document.getElementsByClassName('box')[0];var start = document.getElementsByClassName('start')[0];var stop = document.getElementsByClassName('stop')[0]var oLi = document.getElementsByTagName('li');//数据准备var nameString = new String("张明民,燕妍,滕朗,陶金震,彭祥,苏歌澜,李钰光,宣艺,童孝辉,徐都蓓,徐元,缪贝平,张中斌,林伯,冉凯进,戚玉素,楚婷,鲁利,孙玉筠,益友旭,孟义政,曾钰中,宁豪,鲍仁俊,文长达,裴义健,江智婉,龚娜");var nameArr = nameString.split(",");//获取每个学生姓名添加到标签中，自动解析html标签var str = "";for (let i = 0; i < nameArr.length; i++) {str += "<li >" + nameArr[i] + "</li>"}boxUl.innerHTML = str;//添加开始按钮的点击事件var timer = null;start.onclick = function () {// 设置定时器timer = setInterval(function () {// 根据数组长度范围生成随机数var i = Math.floor(Math.random() * nameArr.length);// 先通过for循环清空所有style属性for (var j = 0; j < oLi.length; j++) {oLi[j].removeAttribute("style");}// 为随机选择的li颜色属性oLi[i].style.background = "red";}, 150);};// 点击停止stop.onclick = function () {// 清空定时器停止点名clearInterval(timer);}//页面初始化时间设置window.onload = function () {datatime();}//页面时间动态刷新setInterval(datatime, 1000);function datatime() {let data = new Date();let dataString ="现在是北京时间：" + data.toLocaleString();document.getElementById("data").innerHTML = dataString;}
</script>
</html>

OK!

HTML+JS好例子集锦相关推荐

php正则换成js正则,php正则替换_php使用正则替换过滤掉js脚本例子
摘要腾兴网为您分享:php使用正则替换过滤掉js脚本例子,榛果民宿,掌上书院,夜读小说,学堂里等软件知识,以及中辉期货,车易行违章,孢子,必应壁纸app,鲁证期货,dota26.88,ip摄像头ap ...
JavaScript(JS)源码集锦
JavaScript(JS)源码集锦 JavaScript(JS)源码集锦:实现点击图片在两张图片之间来回进行切换:制作倒计时. JS实现两张图片来回进行切换点击图片在两张图片之间进行切换,下面以开 ...
three.js webgl_tiled_forward 例子分析
three.js 中 webgl_tiled_forward 是比较难理解的一个官方样例,我第一次看时,看得一头雾水,看得快睡着了,比较枯燥... 这个例子,就是展示场景中有多个光源时,如何提升渲染 ...
对 three.js webgl_clipping_stencil 例子的理解
three.js 中的官方例子 webgl_clipping_stencil 着实费解,我在不同的时间看了有三次以上, 才逐渐理解. 概括的讲:这个例子是在说如何使用webgl stencil 模 ...
execjs回调python_python使用execJS运行js函数例子
//Base64.js (function(global,factory){typeof exports==="object"&&typeof module!==& ...
vue.js使用例子
1.加载的html页面,访问该页面会访问后台数据,进行该数据的回显 <!DOCTYPE html> <html> <head><meta charset=&q ...
曲线图chart.js插件例子
下载地址chart.js简单的曲线图调用示例,这个是红蓝两条曲线统计图表插件.chart.js是一款很强大的图表插件,有各种各样的统计图表. dd:
python使用execJS运行js函数例子
#需安装execJS pip install PyExecJS #调用js进行base64加解密操作 import execjs import base64 def encode(input):wit ...
高德地图html js开发例子,vue.js高德地图实现热点图代码实例
1.在index.html引入高德地图JSAPI 2.地图dom 3.js实现 export default { data() {}, methods:{ initMap(){ let map = n ...
html小球跳跃技术原理,弹跳的小球.html · web-project-songyu/原生js小例子 - Gitee.com...
Document #ball { border-radius: 50%; position: absolute; } var ball = document.getElementById(" ...

HTML+JS好例子集锦

HTML+JS好例子集锦

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

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

三、简单画布画板

四、俄罗斯方块游戏

五、落英纷飞动画

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

HTML+JS好例子集锦相关推荐

最新文章

热门文章

HTML+JS好例子集锦

HTML+JS好例子集锦

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

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

三、 简单画布画板

四、 俄罗斯方块游戏

五、 落英纷飞动画

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

HTML+JS好例子集锦相关推荐

最新文章

热门文章

三、简单画布画板

四、俄罗斯方块游戏

五、落英纷飞动画