分类：JS

2020
10-08

JS制作简易计算器的实例代码

做一个简易计算器，效果图片c表示清空，为一个空字符串+/-表示该值为正还是负%表示当前值/100←表示退格，往前删除一个值eval函数是能够计算出字符串表达式或者语句的结果，把结果求出来。代码如下<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title><styletype="text/css">#div1{margin:20pxauto;width:420px;height:490px;background-color:#E8E8E8;border:1pxsolid#ccc;... 继续阅读 >
2020
10-08

基于原生js实现九宫格算法代码实例

九宫格算法核心：利用控件索引index计算出控件所在的行数和列数；利用控件计算出left距离；利用控件计算出top距离；写特效时需要用到定位公式：行row=parseInt(i/cols);列col=parseInt(i%cols);i是当前的盒子，cols是总列数，代码示例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>九宫格</title><style>*{padding:0;margin:0;}#top{... 继续阅读 >
2020
10-08

JS常见错误(Error)及处理方案详解

 1.错误的类型Error:所有错误的父类型错误的子类型包括：ReferenceError:引用的变量不存在TypeError:数据类型不正确的错误RangeError:数据值不在其所允许的范围内SyntaxError:语法错误常见的内置错误：（1）ReferenceError:引用变量不存在console.log(a)//ReferenceError:aisnotdefined（2）TypeError:数据类型不正确varb={}b.xxx()//TypeError:b.xxxisnotafun... 继续阅读 >
2020
10-08

JS异步宏队列与微队列原理区别详解

JS异步宏队列与微队列原理区别详解 1.原理图2.说明JS中用来存储待执行回调函数的队列包含2个不同特定的列队宏列队：用来保存待执行的宏任务（回调），比如：定时器回调、DOM事件回调、ajax回调微列队：用来保存待执行的微任务（回调），比如：promise的回调、MutationObserver的回调JS执行时会区别这2个队列JS引擎首先必须先执行所有的初始化同步任务代码每次准备取出第一个宏任务执行前,都要将所有的微任务一个一个取出来执行，也就是优先级比... 继续阅读 >
2020
10-08

JS字符串和数组如何实现相互转化

JS字符串和数组如何实现相互转化 题目：利用vars1=prompt("请输入任意的字符串：")，可以获取用户输入的字符串，试编程将用户输入的字符串“反转”，并且将字符串输出。思路：字符串对象的方法中并没有实现反转的，但是数组中有，于是考虑了字符串和数组的相互转换问题。说明：JS中的内置对象包括字符串对象(String)和数组对象(Array)，这两个对象是可以通过它们对象的方法实现相互转化的。对于String对象，提供了对字符串进行操作的属性和方法；对于Array对象，... 继续阅读 >
2020
10-08

JS出现404错误原理及解决方案

JS出现404错误原理及解决方案 js中报404是经常出现的问题，下列是一些高频原因；<scriptsrc="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>经常会出现配置了，但却没有识别到的问题；1)路径写错；路径写错也是一种常见的问题，也是我们首先第一检查的，我们应该要清楚的记得自己设置的路径；2)没有编译到==>查看target目录是否有该目录的文件（target用来存放class或者包文件的地方，是idea自动生成的），然后我们再清除一些... 继续阅读 >
2020
10-08

JS简易计算器实例讲解

JS简易计算器实例讲解 本文实例为大家分享了JS实现简易计算器的具体代码，供大家参考，具体内容如下简易计算器：1）选择需要运算的类型，输入对应的数字2）输入需要参与运算的数字3）输入“计算”二字，进行运算后，显示运算结果及运算表达式<scripttype="text/javascript">//加法运算functionplus(arrPlus){varsum=0;for(vari=0;i<arrPlus.length;i++){sum=sum+arrPlus[i];}console.log('函数plus循环后求和结果的数是'+sum... 继续阅读 >
2020
10-08

JS猜数字游戏实例讲解

JS猜数字游戏实例讲解 本文实例为大家分享了JS实现猜数字游戏的具体代码，供大家参考，具体内容如下猜数字游戏：1）利用JS的Math内置对象，实现在1-50内选取一个整数随机数作为游戏答案2）输入数字进行判断，共有10次输入机会3）若大于答案数字，则提示猜大了，若小于答案数字，则提示猜小了4）直至10次机会用完或者猜对答案了，则结束游戏<scripttype="text/javascript">//猜数字案例functionguessTip(min,max){min=Math.ceil(min);max=Ma... 继续阅读 >
2020
10-08

JS判断数组四种实现方法详解

一、前言如何判断一个对象或一个值是否是一个数组，在面试或工作中我们常常会遇到这个问题，既然出现频率高，想着还是做个整理，那么本文主要基于几种判断方式，以及方式判断的原理，是否存在问题展开讨论。二、判断对象是否是数组的几种方式1.通过instanceof判断instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置，返回一个布尔值。leta=[];ainstanceofArray;//trueletb={};binstanc... 继续阅读 >
2020
10-08

js实现随机点名器精简版

js实现随机点名器精简版 本文实例为大家分享了js实现随机点名器的具体代码，供大家参考，具体内容如下此点名器开始点名后需点击停止按钮完成点名，因为是精简版没有考虑自动停止需求。姓名数据以字符串形式储存，适合小范围点名使用，有大量需求可自己适当改进。<head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>随机点名生成</title><style>/*页面css样式*/.wrapper{width:800... 继续阅读 >
2020
10-08

javascript+css实现俄罗斯方块小游戏

javascript+css实现俄罗斯方块小游戏 俄罗斯方块，一个很有趣的一个小游戏，此次基于html+css+javaScript实现，包含在一个方块落地后自动生成方块、操控方块的移动以及方块变形等。部分代码：<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>俄罗斯方块—经典版V10</title><linkrel="stylesheet"href="css/tetris.css"/><style>.playground{width:525px;height:550px;margin:20pxauto0auto;position:relative;b... 继续阅读 >
2020
10-08

js模拟实现百度搜索

js模拟实现百度搜索 本文实例为大家分享了js实现百度搜索的具体代码，供大家参考，具体内容如下总体思路：用户在文本框里输入的是什么，就来数组中遍历每个元素，找输入的内容是否在遍历到的元素里面，如果在，就把这个元素做成li标签加到ul里，如果不在就不操作怎么判断在不在字符串里？xxx.indexOf(内容)!=-1onkeyup事件：键盘弹起时会触发的事件效果图：<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title><style>*... 继续阅读 >
2020
10-08

js瀑布流布局的实现

js瀑布流布局的实现 本文实例为大家分享了js实现瀑布流布局的具体代码，供大家参考，具体内容如下原理：1、瀑布流布局，要求进行布局的元素等宽，然后计算元素的宽与浏览器的宽度之比，得到需要布置的列数。2、创建一个数组，长度为列数，数组元素为每一列已布置元素的总高度。（一开始为0）。3、将未布置的元素，依次布置到高度最小的那一列，然后更新这一列的高度，就得到了瀑布流布局实现布局<body><divid="content"><divid="box"><imgsrc=... 继续阅读 >
2020
10-08

js正则表达式 限1-2位整数，或者至多含有两位小数的写法

js正则表达式 限1-2位整数，或者至多含有两位小数的写法 测试代码<scripttype="text/javascript">//1、只能输入数字或者小数点仅整数,整数加小数varreg1=/(^[0-9]{1,2}$)|(^[0-9]{1,2}[\.]{1}[0-9]{1,2}$)/;console.log(reg1.test("")+"空串false");console.log(reg1.test("1")+"1true");console.log(reg1.test("10")+"10true");console.log(reg1.test("10.")+"10.false");console.log(reg1.test("100")+"100false");console.log(reg1.test("100.1")+"100.1false");conso... 继续阅读 >
2020
10-08

JS forEach跳出循环2种实现方法

假设当我们只需知道某个数组有没有某个属性，如果找到了直接跳出循环，省略掉剩下的循环步骤是较优化的操作，但是for中是可以利用break跳出循环，但break在forEach中无效，那么forEach能不能跳出循环呢？当然是可以。1.正常for循环break跳出循环letstrArr=['a','b','c','d'],i=0,length=strArr.length;for(;i<length;i++){console.log(strArr[i]);//aif(arr[i]==='a'){//dosomething};break;};... 继续阅读 >
2020
10-08

JS判断数组是否包含某元素实现方法汇总

我在学习ES6数组拓展时，发现了新增了不少了有趣的数组方法，突然想好工作中判断数组是否包含某个元素是非常常见的操作，那么这篇文章顺便做个整理。1.for循环结合break可能很多人第一会想到for循环，毕竟for是最为保险和熟悉的操作：letarr=[1,2,undefined,'听风是风','echo'],i=0;constLENGTH=arr.length;//初始化result状态，只要能找到匹配的则修改为trueletresult=false;for(;i<LENGTH;i++){if(arr... 继续阅读 >