JavaScript 常用小实例01-05

这些实例都是根据原文http://www.runoob.com/js/js-tutorial.html 编辑的,仅用于经验交流

刚刚新建了一个分享交流群,366270001,期待你们的加入。

1,显示时间
主体

这是一个显示时间案例

``` script

效果图

![7E9B855D-DAD3-4E51-866C-7C8D2C0198DF.png](http://upload-images.jianshu.io/upload_images/1730532-f76e95ae2daea212.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


2,点击事件
主体

效果图(在不同环境预览会有不一样的效果)

![6686BEB1-ADB7-42F4-9D9F-C4A53C6C2B04.png](http://upload-images.jianshu.io/upload_images/1730532-7f2f6ba939fe2462.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3,改变 HTML 内容
主体



JavaScript 能改变 HTML 元素的内容。


script

效果图

![1.gif](http://upload-images.jianshu.io/upload_images/1730532-43c1fb11bdad0a08.gif?imageMogr2/auto-orient/strip)


4,循环点击事件,小灯泡
主体 (图片自己加上去,注意路径)


src="/images/pic_bulboff.gif" width="100" height="180">

点击灯泡就可以打开或关闭这盏灯


script

效果图

![1.gif](http://upload-images.jianshu.io/upload_images/1730532-02dd65389105cb8e.gif?imageMogr2/auto-orient/strip)

5,简单识别表单认证
主体


请输入数字。如果输入值不是数字,浏览器会弹出提示框。




script

 效果图
当时数字的时候是没有任何显示

![2276CC81-FD7F-4198-B0FC-E74BFFEF6A5B.png](http://upload-images.jianshu.io/upload_images/1730532-902e3e47229446ae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
当不是数字的时候,则会弹出框

![6C812314-4CDB-4EBD-A58B-C70C646C8360.png](http://upload-images.jianshu.io/upload_images/1730532-c8abf43bcdaf66c8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

你可能感兴趣的:(JavaScript 常用小实例01-05)