- 博客(40)
- 收藏
- 关注
RSS订阅原创 js 学习正则表达式＋练习
/* RegExp 创建正则表达式对象 语法： var 变量 = new RegExp('正则表达式', '匹配模式') 使用typeof检查正则对象，会返回object 正则表达式的检测是否含有某个元素方法 test() - 使用这个方法可以用来检查一个字符串是否符合正则表达式的规.
2021-04-25 17:02:26
414
原创 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
原创 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
201
原创 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
130
原创 js基础知识 navigator，location，history
1.BOM: 浏览器对象模型-BOM可以使我们通过JS来操作浏览器-在BOM中为我们提供了一组对象，用来完成对浏览器的操作-BOM对象window- 代表的是整个浏览器的窗口，同时window也是网页中的全局对象navigator- 代表当前浏览器的信息，通过该对象可以来识别不同的浏览器location- 代表当前浏览器的地址栏信息，通过location可以获取地址栏信息，或者操作浏览器跳转页面history- 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私原因，
2021-04-23 13:54:07
223
原创 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
820
原创 vs中自动编译ts
1.tsc --init （生成配置文件tsconfig.json）2.修改tsconfig.json配置“outDir”: “./” 改成 “outDir”: “./js”“strict”: true 改成 “strict”: false3.启动监视任务：终端 -> 运行任务 -> 显示所有任务 -> tsc:监视vscode 运行遇到如下报错，解决办法1.Windows Powershell 以管理员身份开启2.命令输入 set-Execution
2021-04-15 15:42:15
687
原创 号码排序
<div id="dom"></div> <script> /*后端返回的数据*/ let res = [ {tel: '1359954399'}, {tel: '22222228887'}, {tel: '13333393999'}, {tel: '17894785127'}, {tel: '3'}, {tel: '17777895566'}, {tel: '1334
2021-04-01 11:04:44
279
原创 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
386
原创 css 滚动样式
::-webkit-scrollbar {width : 8px;height: 8px;overflow: visible;}::-webkit-scrollbar-thumb {border-radius: 10px;background: #d4d4d4;min-height: 25px;min-width: 25px;cursor: pointer;}::-webkit-scrollbar-track {background : #f7f7f7;}
2020-12-01 09:33:29
126
原创 css 改变网页所选中的文字，背景色为红色
body ::selection {color:#fff;background-color:#f45947;text-shadow:none;}
2020-12-01 09:32:15
732
原创 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
3118
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
3582
原创 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
252
原创 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
417
原创 vue prettierrc配置
在项目的根目录创建一个文件.prettierrcprettierrc配置// 语句强制分号结尾，默认true "semi": false, // 使用单引号, 默认false:双引号 "singleQuote": true, // 在对象或数组最后一个元素后面是否加逗号 "trailingComma":"none", // 对象中的空格 默认true "bracketSpacing": false, // 箭头函数参数括号 默认avoid 可选 a
2020-09-28 10:18:37
1499
转载 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
2625
原创 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
5208
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
1238
原创 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
416
原创 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
505
原创 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
199
原创 websocket——websocket介绍
**WebSocket介绍**WebSocket协议是基于TCP的一种新的网络协议，它实现了浏览器与服务器全双工（full-duplex）通信——允许服务器主动发送信息给客户端。WebSocket是一种持久协议，http是非持久协议现在很多网站都有实时推送的需求，比如聊天、客服咨询等WebSocket是什么？是一种网络协议，允许客户端和服务器全双工的进行网络通讯，服务器可以给客户端发消息，客户端也可以给服务器发消息WebSocket-MDN：https://developer.mozil
2020-09-23 16:20:04
250
原创 前端 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
933
原创 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
251
原创 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
182
原创 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
8579
原创 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
原创 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
712
转载 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
726
原创 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
726
原创 小程序画布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
256
原创 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
273
原创 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
989
原创 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
4672
原创 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
2443
原创 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
181
原创 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
1027
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
526
原创 jquery 滚动加载更多列表带loading效果
移动端–滚动加载更多列表带loading效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> <meta name="format-de
2020-07-17 10:01:29
547
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人