前端
关注
分享
扫一扫
autm许
这个作者很懒，什么都没留下…
展开
-
js 学习正则表达式＋练习
/* RegExp 创建正则表达式对象 语法： var 变量 = new RegExp('正则表达式', '匹配模式') 使用typeof检查正则对象，会返回object 正则表达式的检测是否含有某个元素方法 test() - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规.原创 2021-04-25 17:02:26 · 418 阅读 · 0 评论 -
js 基础练习之类(class)的操作
<!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>js原创 2021-04-23 17:21:49 · 334 阅读 · 0 评论 -
js 基础练习之类的操作
<!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>js原创 2021-04-23 17:20:07 · 204 阅读 · 0 评论 -
js 练习之键盘移动div
<!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>js原创 2021-04-23 15:28:01 · 131 阅读 · 0 评论 -
js基础知识 navigator，location，history
1.BOM: 浏览器对象模型-BOM可以使我们通过JS来操作浏览器-在BOM中为我们提供了一组对象，用来完成对浏览器的操作-BOM对象window- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象navigator- 代表当前浏览器的信息，通过该对象可以来识别不同的浏览器location- 代表当前浏览器的地址栏信息，通过location可以获取地址栏信息，或者操作浏览器跳转页面history- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私原因，原创 2021-04-23 13:54:07 · 225 阅读 · 0 评论 -
js 模仿桌面拖拽功能
<!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>Do原创 2021-04-22 11:01:38 · 822 阅读 · 0 评论 -
js文本内容换行，提取文本网址链接处理
let bodyhtml = ‘’let bodyc = ‘贾玲带“李焕英”来三亚了！https://mbd.baidu.com/newspage/data/landingsuper?context=%7B%22nid%22%3A%22news_9943695772292681924%22%7D&n_type=0&p_from=1https://mbd.baidu.com对30亿元票房，她说……’//内容换行bodyhtml = bodyc.replace(/\n/g, '<b原创 2021-02-19 13:36:02 · 389 阅读 · 0 评论 -
vscode 如何格式化vue(template)html代码 , 保持标签属性不换行
百度看了好多文章，但是设置完了，还是会换行今天终于自己摸索出来不会换行1.vscode->文件->首选项->设置2.选择工作区->找到settings.json(滚动找到settings.json)3.设置如下，就ok了"settings": { "vetur.format.defaultFormatter.html": "js-beautify-html", "vetur.format.defaultFormatterOptions":{ "js-bea原创 2020-11-27 11:16:49 · 3138 阅读 · 3 评论 -
element 确认消息confirm 消息提示message 加载loading 二次封装
封装代码export function nConfirm (msg) { msg = msg || '确认消息' return new Promise((resolve, reject) => { this.$confirm(msg + '', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then((res) => {原创 2020-11-06 14:27:47 · 3590 阅读 · 0 评论 -
elment dialog二次封装
dialog组件<template> <el-dialog :title="title" :visible.sync="visible" :width="width" :top="0" :before-close="handleClose" :close-on-click-modal="false" > <slot></slot> <span slot="footer" class原创 2020-11-06 14:19:43 · 254 阅读 · 0 评论 -
vue+mockJs+axios + axios封装 实现分页功能
效果图1.安装mockjsnpm install mockjs2.在src目录下创建文件夹——> mock3.在mock目录下创建文件夹——> data——>创建文件mockData.js，代码如下import Mock from 'mockjs' // 引入mockjsconst Random = Mock.Random // Mock.Random 是一个工具类，用于生成各种随机数据/** Random.name() 生成姓名 Random.boolean原创 2020-09-28 16:17:22 · 419 阅读 · 0 评论 -
vue prettierrc配置
在项目的根目录创建一个文件.prettierrcprettierrc配置// 语句强制分号结尾，默认true "semi": false, // 使用单引号, 默认false:双引号 "singleQuote": true, // 在对象或数组最后一个元素后面是否加逗号 "trailingComma":"none", // 对象中的空格 默认true "bracketSpacing": false, // 箭头函数参数括号 默认avoid 可选 a原创 2020-09-28 10:18:37 · 1501 阅读 · 0 评论 -
vue-cli2 vue.config.js配置
module.exports = {// 项目部署的基础路径// 我们默认假设你的应用将会部署在域名的根部，// 比如 https://www.my-app.com/// 如果你的应用时部署在一个子路径下，那么你需要在这里// 指定子路径。比如，如果你的应用部署在// https://www.foobar.com/my-app/// 那么将这个值改为 /my-app/publicPath: ‘/Reader/dist/’, /这个是我存放在github在线预览的Reader项目/// 将转载 2020-09-27 14:02:16 · 2627 阅读 · 0 评论 -
uni-app如何设置favicon.icon图标
1.创建一个.html文件<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="icon" href="static/images/log.png"> &原创 2020-09-25 17:06:57 · 5227 阅读 · 3 评论 -
socket.io——基本用法
1.搭建项目mkdir server-demo //创建文件夹cd server-demo //打开文件夹yarn add socket.io 或者 npm install socket.io // 安装socket.io2. 创建server.jsconst content = require('fs').readFileSync(__dirname + '/index.html', 'utf8');const httpServer = require('http').createServ原创 2020-09-25 15:07:02 · 1242 阅读 · 0 评论 -
websocket——做一个简单聊天室
实现简单聊天室要求1.允许多人加入聊天室，允许多人发送消息2.谁进来了聊天室，谁离开了聊天室3.谁发了消息4.消息类型颜色不一样最终如下图效果1.websocket服务代码。server.jsconst wx = require('nodejs-websocket');/** * 分析 * 消息不应该是简单的字符串 * 这个消息应该是一个对象 * type：消息类型 0：用户进入，1：用户离开，2，正常聊天 * msg：消息的内容 * time：聊天的具体时原创 2020-09-24 14:48:18 · 419 阅读 · 0 评论 -
websocket——nodejs开发自己的websocket服务
1.项目搭建mkdir server-demo //创建文件夹cd server-demo //打开文件夹yarn init -y // 初始化项目yarn add nodejs-websocket //安装nodejs-websocket2. 创建server.js// 导入nodejs-websocketvar ws = require('nodejs-websocket')var PORT = 3000// 创建一个server// Scream server example原创 2020-09-24 11:07:53 · 508 阅读 · 0 评论 -
websocket—websocket基本使用
1.创建html用hbuildx预览。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>聊天室WebSocket</title> <style> div{原创 2020-09-23 16:23:08 · 201 阅读 · 0 评论 -
websocket——websocket介绍
**WebSocket介绍**WebSocket协议是基于TCP的一种新的网络协议，它实现了浏览器与服务器全双工（full-duplex）通信——允许服务器主动发送信息给客户端。WebSocket是一种持久协议，http是非持久协议现在很多网站都有实时推送的需求，比如聊天、客服咨询等WebSocket是什么？是一种网络协议，允许客户端和服务器全双工的进行网络通讯，服务器可以给客户端发消息，客户端也可以给服务器发消息WebSocket-MDN：https://developer.mozil原创 2020-09-23 16:20:04 · 253 阅读 · 0 评论 -
前端 vs code常用插件以及vs code卡顿
1. Vue 2 Snippets此扩展将vue2代码片段和语法突出显示添加到vsc代码中，这个插件基于最新的vue官方语法高亮文件添加了语法高亮，并且根据vue2的api添加了代码片段2.HTML Snippets很实用的html代码提示插件3.intelliSense for css class names in HTML只能提示.css文件中的类名，需要关联添加css文件，也就是说会根据你导入的css文件自动结合输入智能提示css文件中已有的类名4.open in browser由原创 2020-09-21 10:52:49 · 940 阅读 · 0 评论 -
axios基础知识
axios常用基础用法 const url = "****" //接口地址 const params = {} //参数 axios.get(url, {params}).then(function (res) { console.log(res) }).catch((err) => { console.log(err) }) axios.post('url', params).then(function (res) {原创 2020-09-18 15:43:20 · 256 阅读 · 0 评论 -
vue表单数据自动收集
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue表单数据自动收集</title></head><body> <div id="demo"&原创 2020-09-16 15:46:56 · 189 阅读 · 0 评论 -
vue之push() pop() shift() unshift() splice() sort() reverse()等等
变更方法Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。let arr = ['a', 'b', 'c', 'd']console.log(arr) // ["a", "b", "c", "d"]console.log(arr.push('new')) //6console.log(arr) // ["a", "b", "c", "d", "new"]pop() 方法数组最后一位元素删除并返回数组原创 2020-09-16 14:29:03 · 8594 阅读 · 0 评论 -
vue之监听计算属性-watch/computed
1.计算属性在computed属性对象中定义计算属性的方法在页面中使用{方法名}来显示计算的结果2.监视属性通过vm对象的$watch()或者watch配置来监视制定的属性当属性变化时，回调函数自动调用，在函数内部进行计算3.计算属性高级通过getter/setter实现对属性数据的显示和监视计算属性存在缓存，多次读取只执行一次getter计算3.watchimmediate: true //该回调将会在侦听开始之后被立即调用<!DOCTYPE html><htm原创 2020-09-16 11:15:03 · 1714 阅读 · 0 评论 -
vue 打包优化以及项目打包本地预览
优化策略1.生产打包报告2.第三方库启用CDN3.elment-ui组件按需加载4.路由懒加载5.首页内容定制一.插件babel-plugin-transform-remove-console： 移除所有的console.log()//项目发布阶段需要用的babel插件const prodPlugins = []if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console'原创 2020-09-10 17:31:13 · 716 阅读 · 0 评论 -
JS判断是否是ioS或者Android，判断是否为微信
一.通过判断浏览器的userAgentvar u = navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端二、提供更多的检查内容，你可以检查是否是移动端（Mobile）、ipad、iphone、微信、QQ等//判断访转载 2020-09-04 15:19:03 · 730 阅读 · 0 评论 -
js 输入金额，带2位小数以及金额验证
js 输入金额，带2位小数let money = (val) =>{ val = val.replace(/[^\d.]/g,"");//清除"数字"和"."以外的字符 val = val.replace(/^\./g,"");//验证第一个字符是数字而不是字符 val = val.replace(/\.{2,}/g,".");//只保留第一个.清除多余的 val = val.replace(".","$#$").replace(/\./g,"").replace("$原创 2020-08-19 16:37:41 · 728 阅读 · 0 评论 -
小程序画布Canvas生成海报，分享、转发
async share () { var that = this; wx.showLoading({ title: '图片生成中...', }) let photo = '' //图片地址 let result = await that .getCanvas('companyName', 'name', 'position', photo) //生成图片 wx.hideLoading() },getCanvas(companyName, person原创 2020-08-19 10:49:57 · 260 阅读 · 0 评论 -
js 获取验证码 倒计时
js 获取验证码 倒计时<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>js 获取验证码 倒计时</title> <style> .input-wrap{原创 2020-07-17 23:28:00 · 276 阅读 · 0 评论 -
js 工作中常用代码封装之----手机验证，银行卡号(16~19)位正则验证
手机验证，银行卡号(16~19)位正则验证css 代码 .input-wrap{ background-color: #eee;padding: 40px;display: flex;height: 40px;margin-bottom: 20px; } .input-wrap input{ border:0;background:#fff;height: 100%;width: 320px;text-indent:15px;box-sizing: bord原创 2020-07-17 22:54:43 · 1002 阅读 · 0 评论 -
jq 工作中常用代码封装之----ajax封装路由
路由封装api = function (params) { return new Promise((resolve, reject) => { $.ajax({ url: params.url, //路由 data: params.data || '', // 传参 type: params.type ? params.type : 'post', // 发送方式，不传默认post success: function (res) {原创 2020-07-17 15:29:56 · 4678 阅读 · 0 评论 -
jq 获取路由地址，如何给路由传参并获取
jq 获取路由地址，如何给路由传参并获取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jq 如何给路由传参数，并获取路由参数</title></head><原创 2020-07-17 14:31:48 · 2447 阅读 · 0 评论 -
css loading动效
css loading动效css代码.components-animate-loading { display: flex; height: 60px; align-items: center; justify-content: center; } .components-animate-loading .bor { display: inline-flex; margin-right: 8px; wi原创 2020-07-17 13:59:57 · 185 阅读 · 0 评论 -
css音频动效
html代码<div class="components-animaite-play"> <div class="line"></div> <div class="line"></div> <div class="line"></div></div>css代码/* 音频动效 */.components-animaite-play { background: rgba(255, 255, 25原创 2020-07-17 13:53:16 · 1034 阅读 · 1 评论 -
canvas生成海报点击下载
canvas生成海报点击下载` canvas生成海报点击下载 下载*/var c = document.getElementById(“canvas”);var ctx = c.getContext(“2d”);// 背景图ctx.fillStyle = “#eee”;ctx.fillRect(0, 0, 540, 690);var img = new Image();/**图片地址：https://dss3.bdstatic.com/70cFv8Sh原创 2020-07-17 10:51:29 · 528 阅读 · 0 评论