分类：JS

2020
10-11

利用js canvas实现五子棋游戏

本文实例为大家分享了canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下html部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><bodystyle="margin:0;"><canvasstyle="margin-left:20px;"id="five"></canvas><h1style="font-size:40px;font-weight:bolder;margin-left:200px;ma... 继续阅读 >
2020
10-11

原生js生成图片验证码

本文实例为大家分享了js生成图片验证码的具体代码，供大家参考，具体内容如下html代码<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>图形验证码</title></head><body><divid="v_container"style="width:200px;height:50px;"></div><inputtype="text"id="code_input"value=""placeholder="请输入验证码"/><buttonid="my_button">验证</button></body><scriptsrc="../js/picCode.js"></script>... 继续阅读 >
2020
10-11

js实现石头剪刀布游戏

js实现石头剪刀布游戏 前言用户选择出石头剪刀布，电脑系统随机生成石头剪刀布，然后判断结果并显示给用户 一、实现效果二、使用步骤1.HTML和CSS<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>石头剪刀布</title><style>#bigbox{width:600px;height:600px;background:slateblue;margin:0auto;}#bi... 继续阅读 >
2020
10-11

js+h5 canvas实现图片验证码

js+h5 canvas实现图片验证码 本文实例为大家分享了js+h5canvas实现图片验证码的具体代码，供大家参考，具体内容如下实现效果一、使用技术原生js技术+html5canvas画图利用Math.random()函数随机生成颜色字符串 及障碍物点击验证码可变更验证码图案二、使用步骤1.html+css代码如下（示例）：<divclass="login_code_box"><divclass="login_code"><inputtype="text"name="login_code"id="login_code"placeholder="请输入验证码"... 继续阅读 >
2020
10-10

java 中类似js encodeURIComponent 函数的实现案例

我就废话不多说了，大家还是直接看代码吧~importjava.io.UnsupportedEncodingException;importjava.net.URLDecoder;importjava.net.URLEncoder;/***UtilityclassforJavaScriptcompatibleUTF-8encodinganddecoding.**@seehttp://stackoverflow.com/questions/607176/java-equivalent-to-javascripts-encodeuricomponent-that-produces-identical-output*@authorJohnTopley*/publicclassEncodingUtil{/... 继续阅读 >
2020
10-10

js通过canvas生成图片缩略图

现今大部分的网络应用在上传图片的时候都会同时保存几种尺寸的图片，专业术语也就是生成缩略图，而对于生成缩略图一般做法是通过后端语言php等来生成，但是为了给服务器减压，我们或许可以从前端来着手，先生成好不同尺寸的缩略图，传给后端，而后端只需要将前端传过来的图片进行存储就好了。使用Canvas我们可以轻松生成各种尺寸的图片，具体实现如下：functionresizeImage(src,callback,w,h){varcanvas=document.createEleme... 继续阅读 >
2020
10-10

JavaScript检测是否开启了控制台（F12调试工具）

js检测用户是否打开调试工具（chrome）(function(){varre=/x/;vari=0;console.log(re);re.toString=function(){window.close();return'第'+(++i)+'次打开控制台';}})();JavaScript检测是否开启了控制台（调试工具）测试后在chrome有效不少人防止别人趴源码，一般采用检测按键F12之类的，但是这些基本没什么用现在介绍一个方法，非常管用，可以检测到你是否开启了控制台程序，可以算是JavaScript的一些奇淫巧技将这段代... 继续阅读 >
2020
10-10

js+cavans实现图片滑块验证

js+cavans实现图片滑块验证 本文实例为大家分享了js+cavans实现图片滑块验证的具体代码，供大家参考，具体内容如下js已封装好，拿来即用，兼容pc端和移动端,效果：移动端： pc端：原理就不解释了，我之前的博客已经说过，只不过这个版本是结合了canvas实现，又兼容了pc端，直接拿代码就能用了。代码：html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><meta... 继续阅读 >
2020
10-10

原生JavaScript实现刮刮乐

本文实例为大家分享了JavaScript实现刮刮乐的具体代码，供大家参考，具体内容如下原理鼠标按住移动的时候，实现刮刮乐的效果，那就是鼠标按下的同时鼠标移动，那就清除画布。松开鼠标，鼠标移动不再清除画布了，那就得清除事件。canvas画布1、获取画布元素varcanvas=document.getElementById('canvas');2、获取绘图对象getContextvarctx=canvas.getContext('2d');3、画线ctx.lineWidth=3;//线宽ctx.strokeStyle='red';//... 继续阅读 >
2020
10-10

原生JavaScript实现拖动校验功能

本文实例为大家分享了JavaScript实现拖动校验的具体代码，供大家参考，具体内容如下思路1、页面布局采用定位,背景颜色变化bg的宽度为0，其宽度会随着滑块的移动而移动。页面结构<!--验证--><divclass="box"><!--滑块--><divclass="btn"></div><!--文字--><pclass="text">请滑动滑块</p><!--背景--><divclass="bg"></div></div>页面布局/*滑块使用定位，背景没有设置宽度*/.box{width:250px;height:50px;... 继续阅读 >
2020
10-10

使用JavaScript实现贪吃蛇游戏

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下index.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"><title>贪吃蛇</title><linkrel="stylesheet"href="css/index.css"></head><body><divid="map"></div><scriptsrc="js/... 继续阅读 >
2020
10-10

JS中队列和双端队列实现及应用详解

队列队列双端队列数据结构应用用击鼓传花游戏模拟循环队列用双端对列检查一个词是否构成回文生成1到n的二进制数队列和双端队列队列遵循先进后出(FIFO,也称为先来先服务)原则的.日常有很多这样场景:排队购票、银行排队等.由对列的特性,银行排队为例,队列应该包含如下基本操作:加入队列(取号)enqueue从队列中移除(办理业务离开)dequeue当前排队号码(呼叫下一个人)peek当前队列长度(... 继续阅读 >
2020
10-10

js实现贪吃蛇游戏（简易版）

js实现贪吃蛇游戏（简易版） 本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下直接开始效果图:项目结构:图片自己找的1.html<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><styletype="text/css">*{padding:0;margin:0;}</style></head><body><canvasid='view'width="400"height="400"style="border:1pxsolidred;"></canvas><buttonid='start'>开始</button><buttonid='parse'... 继续阅读 >
2020
10-10

js实现星星海特效的示例

首先需要获取屏幕大小：varscreenWidth=document.documentElement.clientWidth;varscreenHeight=document.documentElement.clientHeight;接着可以定义动画（星星透明度）：@keyframesflash{0%{opacity:0}25%{opacity:0.25}50%{opacity:0.5}75%{opacity:0.75}100%{opacity:1}}全部代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>div{w... 继续阅读 >
2020
10-10

JS sort排序详细使用方法示例解析

JS sort排序详细使用方法示例解析 sort()方法用于对数组的元素进行排序，并返回数组。默认排序顺序是根据字符串UniCode码。因为排序是按照字符串UniCode码的顺序进行排序的，所以首先应该把数组元素都转化成字符串（如有必要），以便进行比较。语法：arrayObject.sort(sortby);参数sortby可选，用来规定排序的顺序，但必须是函数。例一：按照字母顺序排序例二：还是按照字母进行排序纳尼，这次排序似乎没有得到想要的结果。。。。。。如果要得到自己想要的结果，... 继续阅读 >
2020
10-10

Java如何防止JS脚本注入代码实例

1.java中防止JS脚本注入的工具类-通用publicclassXssUtil{privatestaticMap<String,String>xssMap=newLinkedHashMap<String,String>();privatestaticMap<String,String>xssNewMap=newLinkedHashMap<String,String>();static{init();}publicstaticvoidinit(){//含有脚本：scriptxssMap.put("[s|S][c|C][r|R][i|C][p|P][t|T]","");//含有脚本javascriptxssMap.put("[\\\... 继续阅读 >