分类：JS

2020
11-19

JS数据类型分类及常用判断方法

数据类型判断的方法在探索数据类型判断方法的时候我们需要知道JS中有哪些数据类型：我们可以把JS中数据类型分为两类：1.基本数据类型：Undefined、Null、Boolean、Number、String、Symbol(es6中新增)2.引用类型(复杂数据类型)：里面包含function、Array、Date等判断数据类型的方法有几种1.typeof我相信typeof这个判断数据类型的方法是大家平常用的比较多的,闲话不多说，直接上代码:console.log(typeof1);//numberconsole.log(ty... 继续阅读 >
2020
11-19

JavaScript实现alert弹框效果

JavaScript实现alert弹框效果 本文实例为大家分享了JavaScript实现alert弹框的具体代码，供大家参考，具体内容如下因本人水平有限，不足之处还望大家指正。先上图：为什么会出现这个需求？浏览器自带的alert不好用吗？自带的alert在不同的浏览器是有差异的，而且样式也不美观，用户体验度不是很好。所以我们要自己写一个alert弹框，这样我们就可以按照我们自己的需求，把alert弹框做的美观一点。以下是alert.js代码：varmyAlert={alertbox:function(alert... 继续阅读 >
2020
11-19

js实现简易计算器小功能

js实现简易计算器小功能 本文实例为大家分享了js实现简易计算器的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><style>ulli{list-style:none;line-height:50px;}.getAnswer{width:20px;}</style></head><body><formname="calc"><h2>简易计算器</h2><ul><li>第一个数：<inputtype... 继续阅读 >
2020
11-19

关于JavaScript中异步/等待的用法与理解

昨天更新的是“JavaScript中的Promise使用详解”，其实也就是说了下基本用法和自己对Promise的理解，可能有错误之处，也欢迎指出。今天就说一说“JavaScript中的async/await的用法和理解”JavaScript中异步/等待的用法和理解编程语言中任意一个关键字都是有意义的，我们先从字面意思来理解。1.asyncasync是“异步”的简写，带async关键字的函数，是声明异步函数，返回值是promise对象，如果async关键字函数返回的不是promise，会... 继续阅读 >
2020
11-19

Map与WeakMap类型在JavaScript中的使用详解

Map与WeakMap类型在JavaScript中的使用详解 map类型特点与创建方法：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><metaname="viewport"content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"><style></style></head><body><script>//对象的键名会自动转为字符串//letobj={//1:'cyy1',//'1':'cyy2'//};//console.log(obj);//对象的键名是... 继续阅读 >
2020
11-19

解决js中的setInterval清空定时器不管用问题

使用场景：我在函数A中调用定时器函数，定时器是单独写的一个函数原因：页面加载时我调用了1次函数A，然后又单独调用了一次定时器函数，导致调用了2次setInterval()，导致有setInterval_id有2个值。通过打印定时器的值发现的问题。clearInterval()只关闭了其中一个setInterval_id，另一个setInterval_id还会启动setInterval()。解决方法：把单独调用的定时器函数去掉。补充知识：jsvue中setTimeout无法通过clearTimeout清除问题在... 继续阅读 >
2020
11-17

js实现纯前端压缩图片

本文实例为大家分享了js实现纯前端压缩图片的具体代码，供大家参考，具体内容如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>压缩图片</title></head><body><inputid='file'type="file"><script>vareleFile=document.querySelector('#file')varfile;varrender=newFileReader(),img=newImage();render... 继续阅读 >
2020
11-13

Flexible.js可伸缩布局实现方法详解

阿里团队开源的一个库。flexible.js，主要是实现在各种不同的移动端界面实现一稿搞定所有的设备兼容自适应问题。实现方法：通过JS来调整html的字体大小，而在页面中的制作稿则统一使用rem这个单位来制作。关键代码如下：;(function(win,lib){vardoc=win.document;vardocEl=doc.documentElement;varmetaEl=doc.querySelector('meta[name="viewport"]');varflexibleEl=doc.querySelector('meta[name="flexible... 继续阅读 >
2020
11-11

JS前端基于canvas给图片添加水印

前两天给个人网站添加了一个小功能，就是在文章编辑上传图片的时候自动给图片加上水印。给网页图片添加水印是个常见的功能，也是互联网内容作者保护自己版权的方法之一。本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。在上传文件到后端的时候，使用input标签读取用户本地文件后得到的其实... 继续阅读 >
2020
11-11

Js数组扁平化实现方法代码总汇

题目：请写出一个数组拍平函数。效果如下：vararr=['a',['b','c'],2,['d','e','f'],'g',3,4];flat(arr)//a,b,c,2,d,e,f,g,3,4方法一：使用toString方法先将arr转换为一个字符串，再以split分割为数组，再将数组里面的元素转换为数字类型vararr=['a',['b','c'],2,['d','e','f'],'g',3,4];functionflat(arr){returnarr.toString().split(',').map(function(item){returnNumber(item)})}console.lo... 继续阅读 >
2020
11-08

原生JavaScript实现五子棋游戏

本文实例为大家分享了JavaScript实现五子棋游戏的具体代码，供大家参考，具体内容如下1.HTML部分<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=no"><title>五子棋</title><style>*{margin:0px;padding:0px;}.box{border-spacing:0px;border:1pxso... 继续阅读 >
2020
11-08

JS实现炫酷轮播图

本文实例为大家分享了JS实现炫酷轮播图的具体代码，供大家参考，具体内容如下效果图<!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="demo.css"rel="externalnofollow"></head><body><divclass="wrapper"i... 继续阅读 >
2020
11-08

JS实现购物车基本功能

JS实现购物车基本功能 JS实现购物车商品加、减、单选、全选、删除、手动输入、价格更新等功能，供大家参考，具体内容如下JavaScript代码$(function(){$("#footer").hover(function(){$("#footer").css({"border":"#e00"})},)varinputs=document.getElementsByName("good-id");varall=document.getElementsByName("all")[0];all.onclick=function(){for(vari=0;i<inputs.length;i++){inputs[i].checked=this.checked;}sumprice();}fo... 继续阅读 >
2020
11-08

JS使用setInterval计时器实现挑战10秒

JS使用setInterval计时器实现挑战10秒 JS实现挑战10秒，主要用到setInterval计时器，供大家参考，具体内容如下效果图##完整代码<htmllang="en"><head><metacharset="UTF-8"><title>js计时器</title></head><body><pstyle="font-size:2em;color:blue;font-style:italic;">挑战10.00秒</p><pid="time"style="font-size:2em;color:red;">00:00</p><inputtype="button"value="开始"onclick="oStart()"><inputtype="button"value="结束"onclick="oStop()">... 继续阅读 >
2020
11-08

JS实现手风琴特效

JS实现手风琴特效 本文实例为大家分享了JS实现手风琴特效的具体代码，供大家参考，具体内容如下效果图<!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="index.css"rel="externalnofollow"></head><body><divclass="wrapper"><ul... 继续阅读 >
2020
11-08

JS画布动态实现黑客帝国背景效果

JS画布动态实现黑客帝国背景效果 本文实例为大家分享了JS画布动态实现黑客帝国背景效果的具体代码，供大家参考，具体内容如下效果图完整代码<!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>Document</title><style>*{padding:0;margin:0;}body{overflow:hidden;... 继续阅读 >