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限时小学数学出题

先给出效果演示图：

源码如下：

	

简单的小学数学随机出题，限时
	



	

	
17+12

	


                 
                 
	


	答对0题           打错0题
60
                 

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

先给出效果演示图：

源码如下：

        
        









显示区

三、 简单画布画板

先给出效果演示图：

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

源码如下：

      COLOR      
      WIDTH      
      CLEAR ALL

      SAVE
      

      

四、 俄罗斯方块游戏

先给出效果演示图：

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

源码如下：

 





 





    


    

    
Tetris
    
    
    
    

        
Score : 0
        
Speed : 1
    






 

五、  落英纷飞动画

先给出效果演示图：

运行时花瓣动态飘落

源码如下：

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

随机点名器的示例代码一

先给出效果演示图：

源码如下：

    
    

    




    

     
随机点名系统
        

        

        开始
        停止
    

随机点名器的示例代码二

先给出效果演示图：

源码如下：

 






  
随机点名
  开始



 

改进版，从文本文件中读入人员名单随机点名例子，可参见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内容如下：

    内容：  


    尺寸：


    背景：


    前景：


    生成二维码


    

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

OK!