js专栏
逍遥的码农
这个作者很懒,什么都没留下…
展开
-
vue-cli-service的使用
ue-cli-service build 会在dist/ 目录下面产生一个可用于生产环境的包,带有 JS/CSS/HTML 的压缩,和为更好地缓存而做的 vendor chunk splitting。vue-cli-service serve 会启动一个开发服务器(基于webpack-dev-server)并且附带了开箱即用的模块热重载(Hot-Module-Replacement)。除了通过命令行,可以使用vue.config.js中devServer字段配置开发服务器的参数;原创 2023-04-04 10:27:36 · 1044 阅读 · 0 评论 -
js将数组里的字符串转换成数字或者数字转字符串
有时候element ui 的下拉框匹配需要纯数字类型,而数据是字符串类型,需要转换一下 用到js的map()方法。原创 2023-04-03 13:58:56 · 185 阅读 · 0 评论 -
微信公众号H5音频视频自动播放(安卓,苹果)
微信公众号H5音视频自动播放,不需要用户跟页面交互原创 2022-07-08 10:36:35 · 7894 阅读 · 7 评论 -
canvas实现video背景虚化(原生js可以套入vue项目等)
canvas video背景虚化原创 2022-06-29 13:55:40 · 990 阅读 · 0 评论 -
H5时间转换时间戳报错NAN-NAN-NAN解决方案
最近在h5开发的时候转换时间戳11-11-2019 01:01:01这种时间格式返回NAN-NAN-NAN原因:转换的时候没有识别分割符 “—”解决方法:“—”转换成“/”在转换就没有问题啦var time = "11-11-2019 01:01:01"new Date( Date.parse(time.replace(/-/g, '/'))).getTime()...原创 2022-04-21 10:57:02 · 1593 阅读 · 0 评论 -
js实现文字上下滚动(到底回到顶部重复滚动)
直接贴代码<html> <body> <head> <style> #scrolldiv { width: 200px; height: 100px; overflow: hidden; } ul{ list-style: none; } </style> &l原创 2022-02-09 15:44:24 · 1370 阅读 · 2 评论 -
vue中给dom元素绑定js原生onclick事件并获取data中定义的数据和调用函数
onclick 执行的是 window 环境中的方法,所以:将 this 中的方法或data中定义的字段关联到 window 上即可。vue代码mounted () { window.customMethods = this.customMethods}, //把方法定义到window对象上methods:{ customMethods(){ alert(666) }},html代码<div class="poster_inner" onclick="javascrip原创 2022-01-11 16:51:54 · 1550 阅读 · 1 评论 -
原生js实现表格内容的居中左对齐
以下是试例代码<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />原创 2022-01-07 14:08:35 · 3452 阅读 · 0 评论 -
原生js实现导航栏拖拽滑动(适用于pc端和手机端)
先贴一张动图看看效果吧下面把代码贴上注释都在代码边上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale原创 2021-12-03 09:32:10 · 1422 阅读 · 0 评论 -
js中的class类
js中的class类函数声明和类声明之间的一个重要区别是函数声明会提升,类声明不会。需要先进行声明,再去访问,否则会报错 var father = new Father("我是爸爸") class Father { constructor(name) { this.name = name; } putName(){ console.log(this.name) } }原创 2021-11-30 11:00:15 · 959 阅读 · 0 评论 -
启动node服务请求本地接口
1.首先就是简单的安装配置node环境这里不做陈述2.在自己电脑中新建一个文件夹3.在文件夹里面创建一个app.js文件4.打开命令行输入 npm init 创建package.json文件(配上npm init 选项)package name: 你的项目名字叫啥version: 版本号description: 对项目的描述entry point:原创 2021-11-29 17:38:52 · 1926 阅读 · 0 评论 -
谷歌浏览器无法在地址栏输入搜索的解决办法
1、问题:在chrom中地址栏输入搜索内容点击后自动跳转到百度首页。。2、原因百度正确的搜索格式是:http://www.baidu.com/s?wd=%schrome浏览器中百度的搜索格式是:http://www.baidu.com/#ie={inputEncoding}&wd=%s3、解决方法到设置下面“管理搜索引擎”里,把原来的百度设置新的为默认,把上面的正确URL添加上去并设置为默认就可以了。...原创 2021-11-18 11:15:00 · 4278 阅读 · 4 评论 -
MAC 出现permission denied解决办法
解决办法:终端输入:sudo chmod -R 777 文件目录绿色横线后面就跟文件夹路径就行啦原创 2021-11-16 17:08:43 · 5645 阅读 · 0 评论 -
js原型链的关系
Javascript 规定,每一个构造函数都有一个 prototype 属性,指向另一个对象。 这个对象的所有属性和方法,都会被构造函数的实例继承。这也就意味着,我们可以把所有对象实例需要共享的属性和方法直接定义在 prototype 对象上。function Person (name, age) { this.name = name this.age = age}console.log(Person.prototype)Person.prototype.type = 'human'原创 2021-11-11 10:14:26 · 100 阅读 · 0 评论 -
读懂js中的call和apply
call和apply的作用都是改变this指向,让一个函数调用另一个函数的方法,并可以传值过去// 定义程序员对象var programmer = { name: '程序员', programming: function () { console.log(`${this.name}编程`) }}// 定义外卖员对象var delivery = { name: '外卖员', sendFood: function () { console.log(`${this.原创 2021-11-10 16:00:02 · 140 阅读 · 0 评论 -
转义特殊字符防止xss攻击
function symbolEscape(text){ return text.replace(/[<>"&]/g, function(match, pos, originalText){ switch(match){ case "<": return "<"; case ">":return ">"; ..原创 2021-10-27 13:42:43 · 1399 阅读 · 0 评论 -
js策略模式减少 if else 判断(骚操作)快来看看吧!
策略模式的使用,避免过多的if else判断,也可以替代简单逻辑的switchconst formatDemandItemType = (value) => { switch (value) { case 1: return '初级' case 2: return '中级' case 3: return '高级' }}// 策略模式const form原创 2021-08-12 11:13:24 · 1078 阅读 · 7 评论 -
js操作时间过当天晚上00:00清除本地存储
const end = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1).getTime() //当天23:59:59秒 转换成的毫秒数const start = new Date().getTime() //当前时间的毫秒数if(localStorage.getItem('endTime')){ //首先判断本地有没有存入当天23:59:59秒的毫秒数 if(start > loc原创 2021-08-05 20:13:55 · 921 阅读 · 0 评论 -
js回调函数(callback)
回调函数,其实简单理解的话就是在一个函数执行完毕后,得到想要的特定数据后在去执行的函数,我门直接看示例 // 2. getdata(check) //运行getdata函数 实参为check函数 // 1. function getdata(callback) { //这边行参为callback回调 名字可以自己随便取 //这里我们假设是从后端获取数据 setTimeout(function () { //假设我们获取到数据i原创 2021-08-02 13:46:17 · 631 阅读 · 0 评论 -
强制Vue重新渲染组件的最佳方式(亲测完美解决问题)
有时候,依赖 Vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据。或者,我们可能只想抛开当前的DOM,重新开始。那么,如何让Vue以正确的方式重新呈现组件呢?强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件。这是一个非常简单的解决方案。当然,你可能会对其他方式会更感兴趣:简单粗暴的方式:重新加载整个页面不妥的方式:使用 v-if较好的方法:使用Vue的内置forceUpdat原创 2021-07-20 15:52:43 · 1342 阅读 · 0 评论 -
js修改对象的属性的两种方法(十分好用)
在我们开发的过程中,后端返回的字段可能和我们组件复用的字段名字不同,这时候为了更方便的开发,我们采用修改后端返回的对象字段来匹配组件中的对象字段第一种正则匹配替换<script> var obj = { id: 1, name: '程序猿', age: 16, } var objReplace = JSON.stringify(obj) //首先给对象转换成字符串 console.log(objReplace)原创 2021-06-10 09:13:56 · 8393 阅读 · 2 评论 -
使用jq让页面滚动到顶部
以下是完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-05-25 16:42:52 · 771 阅读 · 1 评论 -
layui点击表格图片放大
layui点击图片放大css代码 <div class="layui-form-item"> <label class="layui-form-label">图片:</label> <div class="layui-input-block"> <img src="" name="coverUrl" style="max-width:504px;max-height:2原创 2021-05-24 17:04:24 · 503 阅读 · 0 评论 -
原生js实现导航条动画
原生js实现毛毛虫导航直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> * { margin原创 2021-05-13 10:15:34 · 356 阅读 · 0 评论 -
vue中的mixins生命周期比组件中的快!
vue中mixinsmixins.js// mixins.jsexport default { data () { return { name: 'mixins', minixName: 'mixinsObj', flag: false } }, mounted() { console.log('mixinsMounted'); }, meth原创 2021-05-11 14:06:32 · 1364 阅读 · 8 评论 -
vue-cli3中来配置路径别名
vue-cli3配置路径别名在日常开发中, 我们导入文件写的是相对位置, 和绝对位置但是有些人可能知道@/store 是什么意思, 但是自己启动一个自己的vue项目却发现不可以??!!许多新手 可能不知道 vue.config.js 的vue配置文件,这个文件得自己创建的,创建到vue项目的根目录下面将如下代码复制到 vue.config.js 就可以在页面中 使用 @/api 就等于 绝对路径中的 根目录的/api// vue.config.jsconst path = require('p原创 2021-04-12 16:11:14 · 544 阅读 · 0 评论 -
模块化import导入 报错Uncaught SyntaxError: Cannot use import statement outside a module
我们在给js模块化导入的时候,有时候会报错 Uncaught SyntaxError: Cannot use import statement outside a module错误信息:错误分析:HTML 网页中,浏览器通过 script 标签加载 JavaScript 脚本。由于浏览器脚本的默认语言是 JavaScript,因此type="application/javascript"可以省略。在报错中了解到,是说无法在模块外部使用import语句,因为Module 的加载实现的是es6语法,所以原创 2021-01-14 21:53:52 · 19863 阅读 · 3 评论 -
uniapp swiper轮播图自适应高度问题
先来讲下主体思路:每个tab页(swiper-item)都嵌套在swiper中,swiper-item中在放置一个scroll-view,实现超出部分滑动;即让swiper、scroll-view高度都占满屏幕剩余部分<–template部分–>这里的:style="{height:swiperheight+‘px’}"是设置他动态的的高度这里用scroll-view是把要设置自适应高度的地方包起来 <swiper-item> <view class="swiper原创 2021-01-05 11:59:20 · 5577 阅读 · 0 评论 -
vue监听本地存储token不存在自动刷新页面
我们在代码编写的时候,为了更好的体验,有时候需要清除本地存储的token来自动刷新页面跳到登陆页面这时候就需要一个监听器来监听本地存储的变化来执行操作下面我们会用到一个JavaScript的addEventListener()事件监听方法首先先定义本地存储localStorage.setItem("adminToken","token")这个时候我们已经定义好了,接下来使用addEventListener()来监听它的变化vue在main.js中添加以下代码// 监听本地存储删除刷新页面原创 2020-12-21 12:03:56 · 2027 阅读 · 4 评论 -
js什么是事件冒泡并阻止事件冒泡
事件冒泡当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播原创 2020-11-27 21:19:19 · 214 阅读 · 0 评论 -
addEventListener方法
addEventListener()方法这个方法设定一个事件监听器,当某一事件发生通过设定的参数执行操作。语法是:addEventListener(event, function, useCapture)参数 event 是必须的,表示监听的事件,例如 click, touchstart 等,就是之前不加前缀 on 的事件。参数 function 也是必须的,表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数。参数 useCapture 是选填的,填true或者false,用于描述事原创 2020-11-27 19:58:02 · 7435 阅读 · 0 评论 -
JavaScript 事件委托
基本概念事件委托,通俗地来讲,就是把一个元素响应事件(click、keydown…)的函数委托到另一个元素;一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素,当事件响应到需要绑定的元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上,然后在外层元素上去执行函数。举个例子,比如一个宿舍的同学同时快递到了,一种方法就是他们都傻傻地一个个去领取,还有一种方法就是把这件事情委托给宿舍长,让一个人出去拿好所有快递,然后再根据收件人一一分发给每个宿舍同学;在这原创 2020-11-27 19:33:42 · 103 阅读 · 0 评论