javascript
关注
分享
扫一扫
素描本里的男子
做一个温文尔雅的美男子
展开
-
js实现局部全屏效果
全屏 API全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。Document 中的方法Document.exitFullscreen()用于请求从全屏模式切换到窗口模式，会返回一个 Promise，会在全屏模式完全关闭的时候被置为 resolved 状态。Element 中的方法Element.原创 2021-11-23 17:25:53 · 1893 阅读 · 0 评论 -
Vue-router 中hash模式和history模式
Vue-router 中hash模式和history模式的关系在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash"; mode:"history";hash模式和history模式的不同对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目转载 2021-07-19 10:00:52 · 284 阅读 · 0 评论 -
vue动态组件
交互中，程序运行会有不同的结果，需要根据不同的结果展示不同的组件，用if，elseif会比较繁琐当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题is attribute示例代码html：<component :is="isWhitchDialogComp"></component>js：import DefaultDialog from './dialog/default-dialog'import ConfilctDialo原创 2021-03-01 16:33:33 · 170 阅读 · 0 评论 -
vue搜索高亮显示
效果展示：js部分：import Vue from 'vue'function hightLight (el, binding) { const match = binding.value const reg = new RegExp(match, 'g') const txt = binding.arg let str = '' if (txt) { str = txt.replace(reg, `<span style="color:red">${mat原创 2020-11-09 09:50:49 · 748 阅读 · 0 评论 -
JS数组的几种开发技巧（去重、过滤、随机排列、排序）
1、随机排列function shuffle(arr) { var i, j, temp for (i = arr.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)) temp = arr[i] arr[i] = arr[j] arr[j] = temp } return arr}2. 唯一值在开发者，我们经常需要过滤重复的值，这里提供几种方式来过滤数组的重复值。原创 2020-08-07 14:45:42 · 931 阅读 · 0 评论 -
详解JS取出两个数组中的不同或相同元素
1、取出两个数组的不同元素var arr1 = [0, 1, 2, 3, 4, 5] var arr2 = [0, 4, 6, 1, 3, 9] function getArrDifference (arr1, arr2) { return arr1.concat(arr2).filter(function (v, i, arr) { return arr.indexOf(v) === arr.lastIndexOf(v) }) } console.log(getArrDif原创 2020-06-02 10:14:02 · 1711 阅读 · 0 评论 -
浅谈Javascript中try catch 的用法
demo：<!DOCTYPE html><html><head><meta charset="utf-8"><title>power by Adam</title></head><body><p>try 语句块中的函数未定义：</p><p id="demo"></p><script>try { adddlert("hell原创 2020-05-28 18:12:18 · 1787 阅读 · 0 评论 -
CSS3更改原生滚动条的样式
话不多说直接上代码：/*滚动条样式*/ .scrollbar::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .scrollbar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px r原创 2020-05-28 16:35:49 · 668 阅读 · 0 评论 -
vue项目中使用百度统计
统计有多少人访问了自己的网站（wap端pc web端都适用），或者更细的统计网站每个页面的访问量，可以使用百度统计百度统计传送门按提示注册登录即可登录后–>管理–>新增网站，配置好后会出现如下的 自有网站列表在要统计的网站 右侧，点击“获取代码”拷贝要统计网站的代码统计vue项目中的每个页面的访问量var _hmt = _hmt || [];window._hmt = _hmt; // 修改为window 全局变量 (function () { var hm原创 2020-05-27 17:32:10 · 549 阅读 · 0 评论 -
封装公共的节流函数和防抖函数
代码如下：// 节流函数export const throttle = function (fn, gapTime = 2000) { let _lastTime = null return function () { let _nowTime = +new Date() // 当前时间戳 if (!_lastTime || _nowTime - _lastTime > gapTime) { fn.apply(this, arguments) _la原创 2020-05-26 16:07:19 · 424 阅读 · 0 评论 -
js 时间戳转换成几分钟前，几小时前，几天前（亲测有效）
思路：1：将当前的时间转换为毫秒数（nowNew）2：将时间戳转换为标准时间再转换为毫秒数 （millisecond）3：将两者相减然后进行判断代码如下：HTML部分：<span>{{formatMsgTime(时间戳)}}</span>JS部分：formatMsgTime (timespan) { var dateTime = new Date(timespan) // 将传进来的字符串或者毫秒转为标准时间 var year = dateTime.getF原创 2020-05-26 15:29:13 · 4238 阅读 · 0 评论 -
vue搜索关键字使文本高亮
思路：通过正则RegExp进行全局匹配，将符合条件的元素通过replace替换成为HTML代码片段封装成自定义指令在main.js里引入增加可复用性import Vue from 'vue'function hightLight (el, binding) { const match = binding.value const reg = new RegExp(match, 'g'...原创 2020-05-06 14:50:28 · 1189 阅读 · 0 评论 -
纯css绘制波浪动画效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2019-11-28 19:53:32 · 450 阅读 · 0 评论 -
原生js绘制流程图
<!DOCTYPE html><html lang="en" onselectstart='return false'> <head> <meta charset="UTF-8"> <title>Document</title> <style type="tex...转载 2019-11-28 09:22:05 · 3279 阅读 · 10 评论 -
js处理拖拽事件与点击事件并存
解决思路：1.记录下鼠标按下mousedown和鼠标抬起mouseup的时候当前的pageX和pageY2.通过开方将两个位置坐标进行对比，当值等于0或者小于7的时候证明当前是点击事件，反之则是拖拽事件3.关于原本的点击事件函数里的逻辑，现在写到判断语句里就可以了案例附上：<!DOCTYPE html><html><head> <meta...原创 2019-11-28 09:19:39 · 3138 阅读 · 1 评论 -
cookie的封装
<script> //封装一个获取cookie值得方法 function getCookie(key){ let str = document.cookie; let arr = str.split("; ");//分号后的空格不要删 cookie之间的键值对是通过分号+空格 for(let i=0; i<arr.l...原创 2019-05-22 14:19:09 · 122 阅读 · 0 评论 -
单例模式
*** 单例模式指的是一个类只能有一个实例，这样的类被称为单例类，或者单态类，即Singleton Class单例类的特点单例类只可有一个实例它必须自己创立这唯一的一个实例它必须给所有其它的类提供自己这一实例单例模式的思路是：一个类能返回一个对象的引用（并且永远是同一个）和一个获得该实例的方法（静态方法，通常使用 getInstance 名称）。那么当我们调用这个方法时，如果类持有...原创 2019-05-30 21:05:18 · 96 阅读 · 0 评论 -
js数值进制互转
转自：https://www.cnblogs.com/tkzc2013/p/7080984.html十进制转换为二进制：var num = 100;console.log(num.toString(2));toString()方法可把一个 Number 对象转换为一个字符串，并返回结果。语法NumberObject.toString(radix);其中，radix为可选。规定表示...转载 2019-05-28 11:50:07 · 203 阅读 · 0 评论 -
跨域访问
什么是跨域访问跨域访问就是跨域名访问，即A网站的网页在代码上访问了B网站的页面由于同源策略（浏览器的安全机制），所以，AJAX不能实现跨域访问。同源策略：这是一种浏览器策略，浏览器的安全机制：浏览器只允许来自同一个来源的文件相互访问。（前段与后端）同源：同样的协议，同样的地址，同样的端口JavaScript或Cookie只能访问同域名下的内容同样的协议，同样的地址，同样的端口。...原创 2019-05-23 17:51:04 · 195 阅读 · 0 评论 -
百度搜索下拉提示
html部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> 搜索:<input type="text" ...原创 2019-05-23 17:49:29 · 437 阅读 · 0 评论 -
面向对象写的分页效果
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi...原创 2019-05-27 17:23:28 · 191 阅读 · 0 评论 -
闭包的特性
官方解释：闭包是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。（函数就是一个表达式）JavaScript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，也是大部分时候我们所谓的“闭包”。什么是闭包：闭包是指在函数外部访问函数作用域中变量（局部变量）的函数;或者说闭包就是能够读取其他函数...原创 2019-05-27 14:13:46 · 1112 阅读 · 0 评论 -
出现Cross-Origin Read Blocking (CORB) blocked cross-origin response 报错解决方法
1.错误分析这里我调用的是qq音乐的一个接口所有的的参数 都和qq音乐那边的保持一致。当我 console.log所抓取数据时，查看控制台时发现了以下错误其实禁止跨域请求是浏览器本身的一种安全策略。2.跨域资源共享（Cross-Origin-Resource-Sharing）跨域资源共享（CORS）机制，是为了浏览器能更为安全的处理跨域请求，使其不受同源策略的限制。简单来说就是把需...原创 2019-05-26 20:24:18 · 139145 阅读 · 2 评论 -
js贪吃蛇
背景音乐的话，你们换一下就可以了， 我就不加背景音乐的链接了，网易云一搜一大把<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style type="text/css"> * ...原创 2019-05-13 13:44:19 · 512 阅读 · 0 评论 -
代理模式
**代理模式的定义是把对一个对象的访问, 交给另一个代理对象来操作。如：一般人需要打官司，需要找代理律师（术业有专攻）；你需要打扫房子，可以找保洁公司（术业有专攻）；我们在租房子的时候去找中介（因为你对该地区房屋的信息掌握的不够全面，希望找一个更熟悉的人去帮你做）应用场景：如果已有的方法在使用的时候需要对原有的方法进行改进，此时有两种办法：1、修改原有的方法来适应。这样违反了“对扩展...原创 2019-05-30 21:08:23 · 89 阅读 · 0 评论 -
工厂模式
工厂模式：就是用工厂的思路，创建对象。工厂是造产品的。现在用工厂来造对象。即一个工厂可以制造很多种类型的对象，这些对象一般具有共同的父类，即相似的类。为什么使用工厂模式?使用一个类(通常为单体)来批量生成实例.以下几种情景下工厂模式特别有用：对象的构建十分复杂需要依赖具体环境创建不同实例处理大量具有相同属性的小对象我们所熟悉的工厂是不是重复生产，编程中称为迭代！比如生产一颗螺丝钉...原创 2019-05-30 21:09:36 · 120 阅读 · 0 评论 -
js原型继承和原型链继承以及注意事项
* 就是子对象自动拥有父对象的属性和方法， 继承可以提高代码的复用性。 * JS里的继承主要依靠是的原型链。让原型对象（每一个构造函数都有一个原型对象）的值，等于另一个类型的实例，即实现了继承；另外一个类型的原型再指向第三个类型的实例，以此类推，也就形成了一个原型链 function Animal(newName,newAge){ this.name = newName; ...原创 2019-05-28 15:47:36 · 3714 阅读 · 0 评论 -
js实现动态时钟
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="img/0.png" id="h1"> <img src="img/0.pn...原创 2019-05-01 16:30:21 · 288 阅读 · 0 评论 -
前端性能优化的方法
1、减少请求最大的性能漏洞就是一个页面需要发起几十个网络请求来获取诸如样式表、脚本或者图片这样的资源，这个在相对低带宽和高延迟的移动设备连接上来说影响更严重。CDNs（内容分发网络）把资源放在离用户地理位置更近的地方对解决这个问题能起到很大作用，但是比起获取请求，大量的请求对页面加载时间的影响更为严重，而且最近的发现表明，CDNs对移动端用户的性能影响越来越低。2、整合资源对开发者来说，将...原创 2019-08-05 21:18:46 · 680 阅读 · 0 评论 -
webpack的四个核心概念
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。在开始前你需要先理解四个核心概念：入口(entry)输出(output)loader插件(plugins)一、入口[entry]入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些...转载 2019-08-05 13:54:03 · 388 阅读 · 0 评论 -
对js闭包。面向对象、继承的理解
1）闭包理解：个人理解：闭包就是能够读取其他函数内部变量的函数；使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念闭包有三个特性：1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收闭包常见用途：创建...原创 2019-08-05 09:54:17 · 222 阅读 · 0 评论 -
快速排序(超级超级简单版本，一看就会)
<script> function quickSort(arr){ var left=[],right=[]; if(arr.length<1){ return arr; } var index = Math.floor(arr.length/2); var point...原创 2019-06-25 20:26:24 · 632 阅读 · 0 评论 -
js实现页面传输
传输数据的页面//跳转到详情页matte-lipstick.html$(".product-pic").each(function(index){ $(this).click(function () { myAjax("get","js/matte-lipstick.json","",true,callBack); function callBack(str){ let myJ...原创 2019-06-14 09:18:28 · 325 阅读 · 0 评论 -
js中localStorage和sessionStorage功能
1.localStorage和sessionStorage功能早期的web中使用cookies在客户端保存诸如用户名等简单的信息，但是，在使用cookies存储永久数据存在以下问题。1.cookies的大小限制在4kB，不适合大量的数据存储。2.浏览器还限制站点可以在用户计算机上存储的cookies的数量。3 cookies是随HTTP事务一起被发送的，因此会浪费一部分带宽。HTML5很...原创 2019-05-29 15:02:29 · 1177 阅读 · 0 评论 -
js中ES6的继承
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> </body></html><script> class Person{ ...原创 2019-05-29 14:58:44 · 2396 阅读 · 0 评论 -
js中call和apply的继承
这两个方法，已经讲过，是调用函数的，当然也能调用构造函数function Person(newId,newName){ this.id = newId; this.name = newName; } function Student(newId,newName,newScore){ //借用构造方法 Person.c...原创 2019-05-29 14:57:52 · 512 阅读 · 0 评论 -
函数的属性和方法
prototype属性: **对于引用类型来说，prototype保存着所有实例方法的真正所在，即所有的实例方法都是在prototype中保存着，平时，我们在使用实例方法时， 虽然用对象直接调用，但是真正的保存是在prototype中。在继承中prototype的作用更加明显 我们创建的每个函数都有一个属性是prototype（原型），这是属性是个指针，指向一个...原创 2019-05-28 15:55:28 · 266 阅读 · 0 评论 -
cookie注册登陆并检查是否登陆成功
第一个界面<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" name="" id="userName" value=""...原创 2019-05-22 14:16:13 · 961 阅读 · 0 评论 -
php检测是否登陆成功
html文档部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="1php.php" method="get"> <...原创 2019-05-22 14:13:37 · 514 阅读 · 0 评论 -
js单词逆序
<script type="text/javascript"> let English = "can i help you"; let str=""; let arr=[]; for(let i=0; i<English.length; i++){ if(English.charCodeAt(i)!=32){ str += English[i]; }else...原创 2019-05-16 16:46:47 · 940 阅读 · 0 评论