![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端基础
hh3167253066
勇敢牛牛,不怕困难
展开
-
计算字符串表达式的值-js
不让用eval, 又给了一种方式// 计算字符串表达式的值: function calc (expr){ return Function('return (' + expr + ')')() } str = "1+1*3-2" console.log(calc(str)) // 2原创 2022-03-16 19:09:07 · 1266 阅读 · 0 评论 -
清除浮动的三种方法
<!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"> <title>Doc原创 2022-03-14 10:22:50 · 97 阅读 · 0 评论 -
简化操作的api
简化操作的api具体操作去MDNFullscreenMutationObserverIntersectionObserver具体操作去MDNMDNFullscreen全屏预览的效果,比如类似于图片预览、幻灯片播放等。全屏API是一个很好的选择.打开全屏api element.requestFullscreen().then(() => { // 成功的处理 }).catch(err => { // 失败的处理 })退出全屏 ele原创 2022-03-07 18:15:43 · 170 阅读 · 0 评论 -
fastClick.js双击报错
为元素添加 class = “needsclick”原创 2022-03-05 11:42:12 · 146 阅读 · 0 评论 -
去掉页面滚动条
::-webkit-scrollbar { display: none; }vue项目就直接在App.vue里加就行原创 2022-02-28 17:38:32 · 334 阅读 · 0 评论 -
查看一个Vue项目的 webpack 配置信息
使用 vue-cli-service inspect 来查看一个 Vue CLI 3 项目的 webpack 配置信息(包括:development、production)–mode 指定环境模式 (默认值:development)运行命令,在终端输出:开发环境:npx vue-cli-service inspect --mode development生产环境:npx vue-cli-service inspect --mode production运行命令,将输出导入到 js 文件:开发环境原创 2022-02-28 16:59:01 · 1806 阅读 · 0 评论 -
事件总线--发布订阅模式
class EventEmitter { constructor() { this.cache = {} } on(name, fn){ if(this.cache[name]){ this.cache[name].push(fn) }else{ this.cache[name] = [fn] } } off(name, fn){ con原创 2022-02-20 12:16:12 · 1316 阅读 · 0 评论 -
rem的一种使用方法
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta charset="utf-8"> <title></title> <script> var c=()=>{ let w = document.documentElement.cl原创 2022-02-18 16:32:29 · 1195 阅读 · 0 评论 -
小程序上设置button样式
<button>确定</button>此时,各项值均为默认值,效果如下:有边框以及圆角设置其css如下:背景颜色background-color文字颜色color,设置type为primary是背景色为微信绿,无法设置背景颜色.btn1 { width: 80%; margin-top: 20rpx; background-color: beige; color: white;}修改圆角:.btn1 { width: 80%; margin原创 2022-02-18 15:49:59 · 10523 阅读 · 1 评论 -
实现promise.all
function promiseAll(promises){ return new Promise((resolve, reject)=> { if(!Array.isArray(promises)){ throw new TypeError("promises must be an array") } let result = [] let count = 0 promises.forEa原创 2022-02-17 20:32:13 · 1091 阅读 · 0 评论 -
使用css自定义滚动条
<!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"> <title>Doc原创 2022-02-17 20:29:12 · 1015 阅读 · 0 评论 -
jwt生成token全 - node
cnpm install jsonwebtoken基本使用签名方法jwt.sign(payload, secretOrPrivateKey, [options, callback])payload 是一个json对象或者是一个可以json化的buffer或字符串 这里的信息都是可以使用jwt.verify()方法拿到的.secretOrPrivateKey 是加密的key密匙.const jwt = require('jsonwebtoken');let token = jwt.sign(原创 2022-02-09 23:13:09 · 1622 阅读 · 0 评论 -
input输入框的边框样式
默认属性:input{ 样式}鼠标悬浮:input:hover{ 样式}鼠标点击:input:focus{ 样式}outline:none // 边框干掉要设置边框就用border原创 2022-02-02 15:07:13 · 4248 阅读 · 0 评论 -
Map与WeakMap的区别与使用
我们常用的对象Object,是由key:value集合组成的,但key只能是字符串,有很大的使用限制。当我们需要其他类型的数据做key值时,就需要用到数据结构Map,它支持把各种类型的值,当做键。var map = new Map();var nie = {name:'Annie'};var kth = {name:'Keith'};map.set(nie,kth);map.set(kth,nie);console.log(map.get(nie)); //{name:'Keith'}c原创 2022-01-15 19:37:28 · 1404 阅读 · 0 评论 -
vue-lazyload 使用说明
基本使用方法main.jsimport Vue from 'vue'import VueLazyload from 'vue-lazyload'Vue.use(VueLazyload)new Vue({ el: '#app', data: { imgs: [ 'http://covteam.u.qiniudn.com/test16.jpg?imageView2/2/format/webp', 'http://covteam.u.qiniudn.com/t原创 2021-11-04 15:58:48 · 6008 阅读 · 0 评论 -
JavaScript前端实现压缩图片功能
通过原生的input标签拿到要上传的图片文件将图片文件转化成img元素标签在canvas上压缩绘制该HTMLImageElement将canvas绘制的图像转成blob文件最后将该blob文件传到服务端1. 使用Input标签来获取图片文件资源原生input标签,通过设置 type 属性为file来让用户可以选择文件,设置 accept 限制选择的文件类型,绑定onchange事件,来获取确认选择后的文件<input type="file" accept="image/*" />.原创 2021-11-02 11:27:18 · 1377 阅读 · 0 评论 -
微信号以及手机号的正则表达式
if(!(/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/).test(that.data.numberGirl) && !(/ ^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/).test(that.data.numberGirl)){ return wx.showToast({ title: '微信号格式错误', icon: 'error',原创 2021-10-26 20:07:04 · 1578 阅读 · 0 评论 -
不同类型的数据转换
buffer数据,使用data.toString()Blob类型数据转换Json数据类型'FileReader’对象允许Web应用程序异步读取存储在用户计算机上的文件的内容,使用’File’或’Blob’对象指定要读取的文件或数据。// 定义JSON数据let data = { "name": "小明" };// 转换成字符串数组let string = JSON.stringify(data);// 转换成Blob类型数据let blobData = new Blob([string]);原创 2021-10-09 12:31:58 · 961 阅读 · 0 评论 -
JS控制Video播放器(video详细介绍)(快进、后退、播放、暂停、音量大小)
思路:一.首先监听触发事件。比如:向上键对应的keyCode为38,向下键对应的keyCode为40,向左键对应的keyCode为37,向右键对应的keyCode为39,空格键对应的keyCode为32,其他的keyCode可以通过 console.log(“keyCode:” + event.keyCode); 打印获取。二.调用video标签对应的属性以及方法,去设置去获取获取视频元素:var videoElement = document.getElementById(“videoPlay”原创 2021-09-18 15:25:23 · 11024 阅读 · 0 评论 -
去除并美化由于overflow产生的滚动条?
去除overflow产生的滚动条?.discrible { overflow: scroll; -ms-overflow-style: none; //IE 10+ overflow: -moz-scrollbars-none; //Firefox}/*整个滚动条样式 当width:0;或display:none;时,滚动条不显示*/.discrible::-webkit-scrollbar { display:none;}去除滚动条默认样式并美化转载 2021-09-04 17:31:33 · 1970 阅读 · 0 评论 -
CSS 单(多)行文本超过部分显示省略号,解决数字或英文不换行问题
原创 2021-09-02 21:56:02 · 778 阅读 · 0 评论