![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js基本知识
想要飞翔的小猪
这个作者很懒,什么都没留下…
展开
-
左右点击滚动
index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"&a原创 2018-07-15 17:18:17 · 361 阅读 · 0 评论 -
ES6 数值的扩展
1.Number.isFinite()、Number.isNaN(); es5 isFinite方法返回一个布尔值,表示某个值是否为正常的数值。{isFinite(Infinity) // falseisFinite(-Infinity) // falseisFinite(NaN) // falseisFinite(undefined) // falseisFini...原创 2018-11-20 21:47:25 · 145 阅读 · 0 评论 -
Math对象和ES6Math对象的扩展
1.Math的静态属性 Math.E:常数e。 Math.LN2:2 的自然对数。 Math.LN10:10 的自然对数。 Math.LOG2E:以 2 为底的e的对数。 Math.LOG10E:以 10 为底的e的对数。 Math.PI:常数π。 Math.SQRT1_2:0.5 的平方根。 Math.SQRT2:2 的平方根。{console.log...原创 2018-11-20 21:59:45 · 1288 阅读 · 0 评论 -
ES6 Set
1.Set数据结构:它类似与数组,但是成员的值都是唯一的,没有重复的,Set本身是构造函数,用来生成Set数据结构的{const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); //add(value):添加某个值,返回 Set 结构本身for (let i of s) {console.log...原创 2018-11-15 11:01:51 · 197 阅读 · 0 评论 -
ES6 Map
1.含义和基本用法 JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。 例子{const data = {};const element = document.getElementById('myDiv');data[element] = 'metadata';data...原创 2018-11-22 17:11:42 · 1194 阅读 · 0 评论 -
offsetWidth等等的介绍
最近弄了一个放大镜的案例,所以在这里写了一下关于dom中offsetWidth等相关属性给个图,大家体验下有兴趣的可以自己去试下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport&qu原创 2018-11-23 14:56:23 · 1042 阅读 · 0 评论 -
js放大镜
解释都在代码里面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&原创 2018-11-23 15:28:34 · 153 阅读 · 0 评论 -
CSS3 mix-blend-mode的使用
CSS3 新增了一个很有意思的属性 -- mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。 -->mix-blend-mode 用于多个不同标签间的混合模式mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。我们将 PS ...原创 2018-11-27 10:08:04 · 14448 阅读 · 2 评论 -
CSS3 background-blend-mode的使用
除了 mix-blend-mode ,CSS 还提供一个 background-blend-mode 。也就是背景的混合模式。可以是背景图片与背景图片的混合,也可以是背景图片和背景色的之间的混合。background-blend-mode 的可用取值与 mix-blend-mode一样,不重复介绍,下面直接进入应用阶段。 案例一: 对于 background-blend-mo...原创 2018-11-27 11:53:23 · 2658 阅读 · 0 评论 -
ES6函数的扩展
1.函数的默认值 es5{function logEvent(x, y) {y = y || 3;console.log(x + y)}logEvent('2', '3'); //2,3logEvent('2'); //2,3logEvent('2', ''); //2,3} 这个例子中,前面两个显示是我们想要的结果,如果参数y赋值了,但是对应的布尔值...原创 2018-12-03 23:26:33 · 158 阅读 · 0 评论 -
js arguments.callee和caller用法
arguments:含义:该对象代表正在执行的函数和调用它的函数的参数。 语法: [function.]arguments[n] 参数:function :当前正在执行的 Function 对象的名字。 n :要传递给 Function 对象的从0开始的参数值索引。 说明:在前面执行上下文的学习过程中,知道生成执行上下文需要两个阶段,分别是进入执行上下文和执行...原创 2018-12-18 17:29:09 · 1205 阅读 · 0 评论 -
js apply()和call()用法
JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法,它们的语法分别为:1.apply()方法function.apply(thisObj[, argArray])2.call()方法 function.call(thisObj[, arg1[, arg2[, [, ...argN]]]]);apply:调用一个对象的一个方法,用另...原创 2018-12-18 17:20:43 · 156 阅读 · 0 评论 -
js this 详解
this详解 你可能遇到过这样的 JS 面试题:{var obj = {foo: function () {console.log(this)}}var bar = obj.fooobj.foo(); // 打印出的 this 是 objbar(); // 打印出的 this 是 window} 这个原因是因为“Javascript中this永远是...原创 2018-12-18 17:52:32 · 701 阅读 · 1 评论 -
js 数组扁平化
1.数组扁平化概念数组扁平化是指将一个多维数组变为一维数组遍历数组arr,若arr[i]为数组则递归遍历,直至arr[i]不为数组然后与之前的结果concat2.实现的五种方式2.1. reduce遍历数组每一项,若值为数组则递归遍历,否则concat。function flatten(arr) { return arr.reduce((result, ite...原创 2019-01-07 18:26:31 · 342 阅读 · 0 评论 -
js获取查询字符串参数;一个实用的api
获取url里面的参数值或者追加查询字符串,在这之前,我们一般通过正则匹配处理,然而现在有一个新的api,具体详情可以查看这里,可以让我们以很简单的方式去处理url。假如我们有这样一个url,"?post=1234&action=edit",我们可以这样处理这个urlvar urlParams = new URLSearchParams('?post=1234&action...原创 2019-04-30 10:26:23 · 1190 阅读 · 0 评论 -
一些常用的正则表达式
常用的正则表达式匹配中文字符的正则表达式: [\u4e00-\u9fa5]匹配双字节字符(包括汉字在内):[^\x00-\xff]匹配空行的正则表达式:\n[\s| ]*\r匹配HTML标记的正则表达式:/<(.*)>.*<\/\1>|<(.*) \/>/ 匹配首尾空格的正则表达式:(^\s*)|(\s*$)匹配IP地址的正则表达式:...原创 2018-11-08 17:45:02 · 299 阅读 · 0 评论 -
正则表达式简单语法及常用正则表达式
基本符号:^ 表示匹配字符串的开始位置 (例外 用在中括号中[ ] 时,可以理解为取反,表示不匹配括号中字符串)$ 表示匹配字符串的结束位置* 表示匹配 零次到多次+ 表示匹配 一次到多次 (至少有一次)? 表示匹配零次或一次. 表示匹配单个字符 | 表示为或者,两项中取一项( ) 小括号表示匹配括号中全部字符[ ] 中括号表示匹配括号...原创 2018-11-08 14:56:30 · 670 阅读 · 0 评论 -
js 时间戳转换为自己想要的时间格式
function localData(value) {let date = new Date(value );let Month = date.getMonth() + 1;let Day = date.getDate();let Y = date.getFullYear() + '-';let M = Month < 10 ? '0' + Month + '-' : ...原创 2018-07-21 12:26:10 · 219 阅读 · 0 评论 -
js 数组去重
<script>//双层循环,外层循环元素,内层循环时比较值如果有相同的值则跳过,不相同则push进数组let arr1 = [1, 1, 2, 3, 5, 43, 3, 4, 3, 5, 3, 5, '5'] Array.prototype.zhuanHuan1 = function () {let result1 = [];for (let i = 0; i...转载 2018-08-22 14:38:41 · 121 阅读 · 0 评论 -
时间戳与时间的相互转换的几种方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&l原创 2018-08-31 11:22:49 · 8672 阅读 · 0 评论 -
js 简单的密码强度提示
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</tit原创 2018-09-04 23:21:03 · 1159 阅读 · 0 评论 -
js 无缝滚动
本章节分享一段代码实例,它实现了图片无缝水平滚动效果。这样的功能在实际应用中比较常见,感兴趣的朋友可以做一下参考。代码如下: <!doctype html><html><head><meta charset="utf-8"><meta name="author" content="http://www.s转载 2018-09-02 16:48:38 · 219 阅读 · 0 评论 -
移动端左右两边滑动,并且去除滚动条
.html <div class="yyjx_row"> <div class="yyjx_item" > <img :src="" alt=""> <span>篮球</span> </div&原创 2018-09-05 22:58:21 · 5096 阅读 · 1 评论 -
vue 移动端城市搜索列表,实现左右两边联级滚动
页面效果:1.在网上找到了一个已经包含的城市数据,这个可以自己在网上找,根据数据格式对应的渲染add.jsmodule.exports = {"A":{"key":"A","item":[{"city":"\u5b89\u5e86","N":"30.31","E":"117.02","firststr":"A"},{"city":"\u6fb3\u95e8\u5e02","N":"2...原创 2018-09-10 16:17:49 · 2727 阅读 · 8 评论 -
获取短信验证码案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-09-15 12:33:45 · 1319 阅读 · 0 评论 -
简单的搜索框样式
这里涉及的是清除input框默认样式和设置聚焦样式;还有就是控制搜索列表的显示,下面直接给除代码,可以去试试效果<!DOCTYPE html><html><head> <meta charset=" utf-8"> <title>新浪微博搜索框功能</title> <sty原创 2018-09-28 15:04:02 · 2698 阅读 · 2 评论 -
js对象转数组
先给个案例体验下 对于像这样的一个对象,把它转换成一个数组,我们在开发中应该会遇到过, {'未完成':0, '已完成':1, '待确认':2, '已取消':-1}转为[{"未完成":0},{"已完成":1},{"待确认":2},{"已取消":-1}] 我们首先想到的是把他们一个个循环遍历取出来,push到一个数组当中去 let obj1 = { '未完成': 0, '已完...原创 2018-10-19 21:58:21 · 17943 阅读 · 1 评论 -
js 浅拷贝与深拷贝
js 有两种数据类型,基础数据类型和引用数据类型;基础数据类型都是按值访问的,我们可以直接操作保存在变量中的实际的值。而引用类型如Array,我们不能直接操作对象的堆内存空间。引用类型的值都是按引用访问的,即保存在变量对象中的一个地址,该地址与堆内存的实际值相关联。 1.浅拷贝:只复制指向某个对象的指针,而不复制对象本身,新旧对象共享一块内存; 浅拷贝是指只复制一层对象,当对象的属...原创 2018-10-22 16:34:58 · 188 阅读 · 0 评论 -
ES6 Object.assign()的用法
1.Object.assign()基本用法:Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target)。它至少需要两个对象作为参数,第一个参数是目标对象,后面的参数都是源对象。let targetObj1 = { a: 1 }; let sourceObj1 = { b: 1 }; let sourceO...原创 2018-10-24 13:51:31 · 107135 阅读 · 6 评论 -
js递归
说到递归,就不得不说下阶乘了,阶乘函数是递归经典案例阶乘的实现方法(一种递归,两种循环)1.{function factorial(num) {if (num <= 1) {return 1;}else {return num * factorial(num - 1);}}console.log(factorial(3));}/如...原创 2018-11-13 22:58:25 · 362 阅读 · 0 评论 -
判断对象是否为空
1.对象是什么 定义对象的三种方法let person = new Object();//定义一个对象person.name = "zjl";//对象的属性person.age = 23;person.sex = "wumen";// 或let person1 = { name: "zjl", age: 23, sex: "wumen" };// 或者使用...原创 2018-10-24 15:56:18 · 814 阅读 · 0 评论 -
原生 JS 实现移动端 Touch 滑动反弹
因为这个我也是看了别人代码,这里推荐各位可以关注前端大全这个公众号,里面有很多关于前端只是,很值得我们学习,尤其是刚入前端的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width...原创 2019-05-29 10:27:32 · 311 阅读 · 0 评论