HTML+JS好例子集锦

我会带着你远行 2022-11-03 11:25 173阅读 0赞

### HTML+JS好例子集锦 ###

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

基础知识参见  HTML5+CSS新手入门学习系列 [https://mp.csdn.net/editor/html/113860164][https_mp.csdn.net_editor_html_113860164]

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

先给出效果演示图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70][]

源码如下：

<!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>题           打错<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="倒计时：" + time
                    if(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>

**二、调用百度在线文字转语音**

先给出效果演示图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1][]

源码如下：

<!DOCTYPE html >
    <html>
    <head>
    
    <title>在线百度文字转语音接口demo </title>
    
    </head>
    
    <body>
    
    <from>
    <textarea id="content1" cols="50" rows="10">在线百度文字转语音测试，hello!</textarea>
    <br>
    <input type="button" onclick="TextToSpeech()" value="朗读"> 
    
    <div id="dvAudio"></div>
    
    <script type="text/javascript"> 
    
    //TextToSpeech()
    
    function TextToSpeech() 
    {
            //var t = document.getElementById("content1").value; //获取到textarea的内容
    
            var t = (document.getElementById('content1').value).replace(/^\s+|\s+$/g, '');
            if (t == '') { alert('请输入内容！'); return; }
            t = encodeURI(t);
            var s = "<audio autoplay=\"autoplay\">"
            + "<source type=\"audio/mpeg\" src=\"http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=4&text=" + t + "\">"
            + "<embed  height=\"0\" width=\"0\" src=\"http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=2&text=" + t + "\" >"
            + "</audio>";
            document.getElementById('dvAudio').innerHTML = s;
    
    }
    
    </script>
    
    </from>
    
    </body>
    
    </html>

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

先给出效果演示图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2][]

源码如下：

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

**四、 简单画布画板**

先给出效果演示图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3][]

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

源码如下：

<!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)"/>      
          WIDTH<input type="range" id="widthSelect" onchange="context.lineWidth=widthSelect.value;" min="1" max="20" value="5"/>      
          <button id="clearCanvas" onclick="clearCanvas();">CLEAR ALL</button>
          <br/>
          <canvas id="drawingCanvas" width="800" height="400"></canvas>
    </div>
    </body>
    </html>

**五、 俄罗斯方块游戏**

先给出效果演示图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4][]

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

源码如下：

<!doctype html>
    <HTML>
    <HEAD>
     
    <title>Tetris</title>
    <script>window.resizeTo(410,450)</script>
    <style>
    
    </style>
    <script>
    
    </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>

**六、  落英纷飞动画**

先给出效果演示图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5][]

运行时花瓣动态飘落

源码如下：

<!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()*2
            tCxt.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>

![wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==][wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]

[https_mp.csdn.net_editor_html_113860164]: https://mp.csdn.net/editor/html/113860164
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70]: /images/20221024/2a158c094b5843048bfbfafa6c0ca795.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 1]: /images/20221024/0d661f7ff88a4efd8241f549d59ac6d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 2]: /images/20221024/b71f066a703340ab9427f31c2170acbe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 3]: /images/20221024/6d39cb6896da4aa29e37cdfc46d120d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 4]: /images/20221024/3f8e9072d6ff470387e54f5e10099a73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuZHMxMjM_size_16_color_FFFFFF_t_70 5]: /images/20221024/afb2634199584a39a6761e998f48e164.png
[wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw]: