分类：JS

2020
10-10

JS面向对象实现飞机大战

本文实例为大家分享了JS面向对象实现飞机大战的具体代码，供大家参考，具体内容如下主页面<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>.bg{width:530px;height:600px;position:relative;margin:100pxauto;background:url("bg.png")no-repeat0-9399px;}.plane{width:60px;height:53px;position:absolute;left:235px;bottom:10px;background... 继续阅读 >
2020
10-10

js实现飞机大战游戏

本文实例为大家分享了js实现飞机大战游戏的具体代码，供大家参考，具体内容如下CSS部分的代码：<style>*{margin:0px;padding:0px;}canvas{border:1pxsolid#000;display:block;margin:auto;}</style>JavaScript代码：<!--先创建一个画布--><canvasid="canvas"width="480"height="640"></canvas><script>varcanvas=document.getElementById("canvas");varcontext=canvas.getContext("2d");... 继续阅读 >
2020
10-10

JS+Canvas实现五子棋游戏

本文实例为大家分享了JS+Canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下布局+样式部分代码：<styletype='text/css'>canvas{display:block;margin:50pxauto;box-shadow:-2px-2px2px#efefef,5px5px5px#b9b9b9;cursor:pointer;}.btn-wrap{display:flex;flex-direction:row;justify-content:center;}.btn-wrapdiv{margin:010px;}div>span{display:inline-block;paddi... 继续阅读 >
2020
10-10

Js Snowflake(雪花算法)生成随机ID的实现方法

Js Snowflake(雪花算法)生成随机ID的实现方法 1、snowflake-id插件 importSnowflakeIdfrom"snowflake-id";constguid=num=>{constid=newSnowflakeId();returnid.generate();};2、原生使用 varSnowflake=/**@class*/(function(){functionSnowflake(_workerId,_dataCenterId,_sequence){this.twepoch=1288834974657n;//this.twepoch=0n;this.workerIdBits=5n;this.dataCenterIdBits=5n;this.maxWrokerId=-1n^(-1n<<t... 继续阅读 >
2020
10-09

基于JS实现快速读取TXT文件

基于JS实现快速读取TXT文件 1前言最近有个需求，需要使用JS快速读取外部大数据文件（60w条记录的表）。笔者尝试过使用JS读取Excel文件，但是跑了十几分钟仍未出结果，后来笔者尝试将原数据保存为TXT文件，再从TXT文件中读取数据，只需几秒钟即可读取完毕。在此分享一下，也留着以后备用。2案例为方便快速理解，笔者挑选了一个数据量小、业务逻辑简单的案例：从TXT文件中读取数据，并按照原列表格式显示。工作空间待读取的TXT文件数据read.html<!DOCTYPEhtm... 继续阅读 >
2020
10-09

JS轮播图的实现方法2

JS轮播图的实现方法2 本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下需求：自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图效果图：![轮播图]思路：将所有需要轮播的图片横向排列，可视区大小设置为只能显示一张图片，给容器设置移出隐藏后，可视区之外的部分被隐藏，这样我们就只能看见一张图片。轮播实现是改变整个图片画幅的left值或者margin-left值，当点击时移动整个画幅单个图片的宽度即可实现滚动到... 继续阅读 >
2020
10-09

JS轮播图的实现方法

JS轮播图的实现方法 本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下需求：自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图效果图：思路通过编写过渡动画实现轮播效果，图片的出现动画以及移出动画。显示区的图片移出，切换的图进入分别调用动画，程序关键点：哪张图应该进入，哪张图应该移出。轮播分为三部分：自动轮播，左右箭头翻图，底部小圆点点击翻图。编写程序顺序：1.小圆点点击为什么先做小圆点呢... 继续阅读 >
2020
10-09

js 函数性能比较方法

js 函数性能比较方法 在学习js过程中,经常会遇到同样一个功能点这样实现也可以,那样实现也可以。但是哪个方式最优呢?自己写了一个简短的proferencesCompare函数。代码如下:/***函数性能比较*@paramfns要比较的函数数组*@args每个要比较函数在执行的时候传入的参数,可以是数组,或者被调用后返回数组类型*@repeatCount每个函数重复执行的次数,多次执行拉开差距。默认值10000**@return[{runTime:执行repeatCount次总时间,... 继续阅读 >
2020
10-09

JavaScript经典案例之简易计算器

JavaScript经典案例之简易计算器 本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下效果图：逻辑：1、首先通过遍历，为所有元素添加事件；2、各个按钮功能分别实现<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><style>.one{width:50px;height:50px;background:#f60;display:inline-block;... 继续阅读 >
2020
10-09

JavaScript实现拖拽和缩放效果

本文实例为大家分享了JavaScript实现拖拽和缩放效果的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><metacharset="utf-8"/><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>拖拽缩放</title><metaname="viewport"content="width=device-width,initial-scale=1"></head><style>*{margin:0;padding:0}#box{width:100%;height:100%;position:relative... 继续阅读 >
2020
10-09

idea自动加载html、js而无需重启进程的操作

idea自动加载html、js而无需重启进程的操作 遇到一些单体架构的项目时，由于前后端没有分离导致每一次动手前端都需要重启进程运行项目，非常费时费力，因此只需要在idea中配置几项就能解决这个问题：1、快捷键Ctrl+Alt+S打开设置面板，build-compiler---勾选Buildprojectautomatically选项（2016版本的idea有可能是：makeprojectautomatically）2、快捷键Ctrl+Shift+A查找registry命令：在查找到的registry命令通过鼠标双击或敲回车键，在弹出的面板中找到并勾... 继续阅读 >
2020
10-09

JS实现简易贪吃蛇游戏

本文实例为大家分享了JS实现简易贪吃蛇的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><html><head><title></title><metacharset="utf-8"><styletype="text/css">#body{width:900px;/*长宽最好是obj的倍数*/height:600px;border-width:10px;border-style:solid;border-color:blue;line-height:600px;/*文本垂直居中*/text-align:center;/*文本水平居中*/position:relative;/*相对定位*/left:... 继续阅读 >
2020
10-09

Javascript中Math.max和Math.max.apply的区别和用法详解

最近在做一个小案例的时候遇到了Math.max.apply这么一个用法，之前很少遇到过感觉挺有趣的，就记录一下。1Math.max语法：Math.max(n1,n2,n3,...,nX)返回值：max()方法可返回指定的参数中带有较大的值的那个数vara=Math.max(1,2,3,4);console.log(a);//4但是如果数据是放在一个数组里面，此时就不能这样调用了。这时就用到apply方法2Math.max.applyapply()方法调用一个函数。简单理解为调用函数的方式，但是它可以改变函数的... 继续阅读 >
2020
10-09

google广告之另类js调用实现代码

今天发现一个google广告的另类调用方法functionaddGoogel(content,obj){addScript('//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js',function(){varins=document.createElement('ins')ins.setAttribute('class','adsbygoogle')ins.setAttribute('data-ad-client','ca-pub-******')ins.setAttribute('style',obj.style)ins.setAttribute('data-ad-slot',obj.slot)content.appendChild(ins)... 继续阅读 >
2020
10-09

探究一道价值25k的蚂蚁金服异步串行面试题

前言朋友去面试蚂蚁金服，遇到了一道面试题，乍一看感觉挺简单的，但是实现起来发现内部值得一提的点还是挺多的。先看题目：constdelay=(ms)=>newPromise((resolve)=>setTimeout(resolve,ms));constsubFlow=createFlow([()=>delay(1000).then(()=>log("c"))]);createFlow([()=>log("a"),()=>log("b"),subFlow,[()=>delay(1000).then(()=>log("d")),()=>log("e")],]).run(()=>{console.log("done... 继续阅读 >