分类：JS

2020
10-28

原生js实现贪吃蛇游戏

原生js实现贪吃蛇游戏 原生JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下代码：<script>vartimer=null;varoMain=document.getElementById("main");functionMap(atom,xnum,ynum){//地图,设置单位大小，及根据单位大小创建地图this.atom=atom;this.xnum=xnum;this.ynum=ynum;this.create=function(){this.canvas=document.createElement("div");this.canvas.style.cssText="position:relative;t... 继续阅读 >
2020
10-28

JavaScript实现五子棋小游戏

本文实例为大家分享了JavaScript实现五子棋小游戏的具体代码，供大家参考，具体内容如下HTML部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>五子棋</title><style>*{padding:0;margin:0;}body{padding-top:100px;}.main{width:600px;height:600px;margin:0auto;background-color:burlywood;}.col{position:relative;width:40px;height:40px;box-sizing:... 继续阅读 >
2020
10-28

原生js实现简单轮播图

本文实例为大家分享了js实现简单轮播图的具体代码，供大家参考，具体内容如下一、写入网页基本结构body:网页的最外部设置一个id为wrap的容器，取代body，这样方便我们做一些初始化css:初始化：包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化css设置：根据图片数与图片宽度设置轮播图宽度二、设置js逻辑需要完成的功能有：1、鼠标移入轮播图逐渐出现左右浮动块2、点击浮动... 继续阅读 >
2020
10-24

Javascript实现贪吃蛇小游戏（含详细注释）

本文实例为大家分享了Javascript实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下前言原生JavaScript实现贪吃蛇小游戏GitHub地址直接复制可用index.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>贪吃蛇</title><linkrel="stylesheet"href="CSS/index.css"><linkrel="icon"href="favicon.ico"/></head><body>... 继续阅读 >
2020
10-23

JavaScript实现简易计算器小功能

JavaScript实现简易计算器小功能 本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>计算器</title></head><body><!--页面布局--><inputtype="text"id="num1"placeholder="请输入第一个数字"/><inputtype="text"id="operator"placeholder="请输入运算符"><inputtype="text"id="num2"placeholder="请输入第二个数字"/><inputtype="button"oncli... 继续阅读 >
2020
10-23

js 压缩图片的示例（只缩小体积，不更改图片尺寸）

本文作者：Marydon原文链接：https://www.cnblogs.com/Marydon20170307/p/11486511.html1.情景展示如上图所示，点击上传图片按钮，调用手机摄像头拍照功能。 <inputonchange="javascript:imgFun.uploadPicture();"type="file"name="file"id="file"accept="image/*"capture="camera"style="display:none;">我们知道现在，手机拍照在10MB左右，体积太大，在上传到服务器前，能不能只缩小图片的体积，而不改... 继续阅读 >
2020
10-23

js 图片懒加载的实现

1.使用场景当网页上有大量图片需要加载时，如果一次性将图片全部加载完，网页加载时间会过长；网页本身已经反应很慢了，如果你的页面上又需要引用图片，这时候同样是雪上加霜。2.图片懒加载原理图片懒加载，只不过是叫法比较高大上而已，其实现方式很简单，就是在需要的时候再给图片的src属性赋值，仅此而已。3.代码实现/***图片懒加载*/functionImgLazyLoad(){/***滚动到图片所在位置再加载*@paramim... 继续阅读 >
2020
10-20

原生js实现俄罗斯方块

原生js实现俄罗斯方块 本文实例为大家分享了js实现俄罗斯方块的具体代码，供大家参考，具体内容如下效果如下html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><linkrel="stylesheet"href="../css/Demo.css"><title>俄罗斯方块</title></head><body><divclass="square"id="local"><divclas... 继续阅读 >
2020
10-18

JS实现4位随机验证码

JS实现4位随机验证码 本文实例为大家分享了JS实现4位随机验证码的具体代码，供大家参考，具体内容如下通过随机数编写一个不分大小写且含数字的4位随机数。CSS样式p{width:60px;height:20px;display:inline-block;letter-spacing:3px;border:1pxsolidred;}#div{height:20px;margin-bottom:10px;}#btn,p:hover{cursor:default;}button{display:block;}主体部分<divid="box">验证码<inputtype="text"id="int"/><pid="p"></p>... 继续阅读 >
2020
10-18

js中复选框的取值及赋值示例详解

1、复选框的取值：（js部分）varcheckboxdata=$(“input[name=payoperator]:checked”).map(function(){return$(this).val();}).get().join(",");<divclass="form-group"><labelclass="col-lg-2col-md-2col-sm-12control-label">支付方式</label><divclass="col-lg-4col-md-4"><labelclass="checkbox-inline"><inputtype="checkbox"name="payoperator"value="1">支付宝在线缴费</label><labelclass="check... 继续阅读 >
2020
10-18

JS页面动态绘图工具SVG，Canvas，VML介简介

说到绘图、报表之类的技术，大家首先想到的就是Flex，当然也有许多了解javaapplet，对于这两种技术来说，各有利弊。首先Flex很笨重，但是其效果实在让人喜欢。对于javaapplet来说，至少我在网络上很少看到，当然对于我们做开发的来说在我们的开发工具或者内部网络上还是有一些的。其实现在Web上进行绘图的话还是有很多选择的，你可以到谷歌上搜索JS绘图，会有很多绘图工具提供给你使用，而且功能非常强大。比如说maxGraph，你可以... 继续阅读 >
2020
10-18

JS pushlet XMLAdapter适配器用法案例解析

近日有人咨询PushletXMLAdapter适配器的问题，我特留意了一下到官方看了一下http://www.pushlets.com/，DevelopmentRoadmap中最后面说到了这个问题，AJAX(XMLHttpRequest)Support使用AJAX(XMLHttpRequest)的好处就是：cleanerandthinnerclient-sidelibnoissueswith"busy"indicatorspureXMLdataexchange(i.s.o.JavaScriptcallbacks)英文不好就不再翻译了但是要注意的是：nouniversalsupportforXMLHttpRe... 继续阅读 >
2020
10-16

JS绘图Flot如何实现可选显示曲线图功能

刚刚做了可以动态去刷新的曲线图，下面再来实现一个可以选择显示那个显示值的曲线图。首先看一下效果：下面的多选框，选择以后会触发一个事件，等同与重新绘制了曲线图。重点是需要的数据的格式，我们来看一下代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type... 继续阅读 >
2020
10-16

JS跨浏览器解析XML应用过程详解

首先介绍简单的理论：对于XML，我们可以理解它是一种树结构，它包含根，元素，属性，文本等内容。不同浏览器都有自己的解析器，把XML读入内存，并把它转换为可被JavaScript访问的XMLDOM对象。微软的XML解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对XML文件和XML字符串（文本）的加载，而其他浏览器使用单独的解析器。不过，所有的解析器都含有遍历XML树、访问、插入及删除节点的函数。如果你使用的是... 继续阅读 >
2020
10-16

JS绘图Flot如何实现动态可刷新曲线图

刚刚做的是一个静态的曲线图，只要设置数据，就可以直接显示。下面来做一个根据时间间隔根据新数据一直变的曲线绘图示例。同样，为了兼容不同浏览器，请一定要引入三个JS文件，否则不保证在IE下的运行。首先来看一下效果！刷新间隔的实现其实就是定时调用某个函数，这个函数将绘图对象里面的数据更新即可。我们来看一下代码：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xh... 继续阅读 >
2020
10-16

JS绘图Flot应用图形绘制异常解决方案

今天再次动手用Flot，但是今天用的时候出现一些问题首次报错的是网页错误详细信息用户代理:Mozilla/4.0(compatible;MSIE8.0;WindowsNT5.1;Trident/4.0;QQDownload721;InfoPath.2)时间戳:Fri,8Jun201204:59:50UTC消息:'window.G_vmlCanvasManager'为空或不是对象行:698字符:17代码:0URI:http://localhost:8080/chart/jquery.flot.js'window.G_vmlCanvasManager'是什么东西我不知道，不过经过查询知... 继续阅读 >