前端 - 简忆博客

vscode 安装代码实时预览到浏览器插件

我们在开发前端项目的时候，想要实现实时预览代码效果功能，比如微信开发者工具，我们一保存代码就会自动刷新浏览器页面，这种效果vscode也是可以实现的，我们只需安装一个Live Server插件：1、搜索：Live Server2、使用：安装好之后，就可以右击我们的html代码文件，选择open with live server

JavaScript如何获取URL参数

2022-04-19

134 0

前端有时需要获取url中参数，我们可以使用下面的方法来获取//获取url中的参数 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 } 使用方法：比如我们有个参数为p，则可以使用下面方法获取var p = getUrlParam('p');

一个css动画loading收藏

2022-04-19

165 0

有时我们在开发项目需要等待加载完毕后再显示数据，我们可以给它加个loading动画，以下是收藏的一个动画效果供大家参考和使用<!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>loading</title> </head> <style> ; ;;.loading__anim {;; ;;;;width: 35px; ;;;;height: 35px; ;;;;display: inline-block; ;;;

解决layui框架excel导出长数据科学计数法问题

2022-04-06

228 0

Layui框架自带的导出excel数据默认导出的数据会以数字格式存放，比较长的数据存放后会经过科学计数法加工，从而导致数据错误解决方法： 1、在/lib/layui-v2.5.5/lay/modules/table.js中搜索：d.exportFile 2、将d.exportFile这个函数，用下面内容替换掉：;;;;d.exportFile = function (e, t, i) { ;;;;;;;;t = t || d.clearCacheKey(d.cache[e]), i = i || "csv"; ;;;;;;;;var a = c.config[e] || {},;// 分页按钮 ;;;;;;;;;;l = {csv: "text/csv", xls: "application/vnd.ms-excel"}[i], // meta格式 ;;;;;;;;;;n = document.createElem

css关闭a标签点击出现蓝色背景问题

2022-03-26

188 0

在做手机端页面的时候，会发现a标签点击会出现背景颜色问题，我们可以通过css样式来设置，解决这个问题。body { -webkit-tap-highlight-color:rgba(0,0,0,0); } 这句代码加上去之后就不会出现点击背景颜色问题了。

js如何防止ajax重复提交表单

2022-03-08

176 0

很多开发者在做表单提交数据到后台的时候，会出现多提交一次，多一条数据的情况，这种原因的是因为服务端未能及时响应结果(网络延迟，并发排队等因素)，导致前端页面没有及时刷新，用户有机会多次提交表单如果提交对象为按钮的话，可以对按钮设置disabled，此办法适应于按钮提交，此种方法简单粗暴，也是很多人用的办法：$(".sub").attr('disabled',true)//在按钮提交之后和AJAX提交之前将按钮设置为禁用 $.ajax({ url:'/post.php' data:{a:1,b,1} success:function(){ $(".sub").attr('disabled',false)//在提交成功之后重新启用该

Uniapp如何引入自定义样式文件

2022-02-23

296 0

首先我们在项目根目录下创建目录并创建我们的css文件common.css打开项目下的App.vue文件，添加如下代码，引入我们的自定义的样式css文件<style lang=”scss”> @important “common/common.css” </style>

uniapp如何引入uView UI框架

2022-02-14

516 0

uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。如何在uniapp引入uView框架呢？1、安装：https://ext.dcloud.net.cn/plugin?id=1593选择使用 HBuilderX 导入插件，导入成功之后，项目目录下会有个文件夹2、配置2.1. 引入uView主JS库在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。// main.js import uView from '@/uni_modules/

uniapp下微信小程序报错TypeError: Cannot read property 'forceUpdate' of undefine

2022-02-14

606 0

uniapp下微信小程序报错TypeError: Cannot read property 'forceUpdate' of undefine解决方法出现这个问题是因为uniapp项目里面没有配置好小程序appid，我们打开项目下的manifest.json文件，添加下小程序appid即可

cocos creator微信游戏接入微信分享功能

2022-01-28

228 0

分享效果图在游戏脚本文件中onload方法中加入如下分享代码：onLoad () { wx.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) wx.onShareAppMessage(() => { return { ;title: '这游戏根本停不下来...', ;imageUrl: 'https://game.tpxhm.top/uploads/xing/share.png?2022' // 图片 URL } });; },

cocos世界坐标和节点坐标转换

2022-01-24

372 0

我们在做cocos游戏项目时，有时需要获取点击坐标，就需要将世界坐标和节点坐标的转换，可以采用以下方法进行互换1、把cocos1的坐标转成世界坐标pos1(只能父节点转)var pos1= this.cocos1.parent.convertToWorldSpaceAR(this.cocos1.getPosition()); cc.log(pos1) 2、把(世界坐标pos1)转成相对于节点cocos1的坐标var pos2 = this.cocos1.convertToNodeSpaceAR (pos1); cc.log(pos2)

JS实现多个数据相加

2022-01-15

387 0

有时我们进行多个数据相加，组合成一个数组，我们可以使用下面方法来实现let arr1 = [1,2,3,4,5,6]; let arr2 = [11,12,13,14,15,16]; let arr3 = [10,21,31,41,51,61]; let json = {arr1,arr2,arr3}; //json中有任意多个数组 //let json = [arr1,arr2,arr3]; //也可以使用数组形式，自行替换测试看结果 //保存结果的数组 let result = [];;; //遍历json for(let key in json){ //遍历数组的每一项 json[key].forEach((value,index) => { if( isBlank(result[index]) ){ result[index] = 0 ; } result[index] += value ;

vue中element-ui固定el-dialog模态窗高度

2022-01-10

501 0

vue中element-ui固定el-dialog模态窗高度，超出显示纵向滚动条，可以使用下面方法<style lang="css"> .el-dialog { ;margin: 5vh auto !important; } .el-dialog__body { ;height: 75vh; ;overflow: hidden; ;overflow-y: auto; } </style>

uniapp小程序实现登录授权获取用户信息

2021-12-30

825 0

登录授权获取用户信息，本文使用的新版的登录授权接口，结合后端ThinkPHP6框架实现1、放置授权登录按钮<template> <view class="userinfo" v-if="userInfo !=''"> <view class="userimg"> <image :src="userInfo.avatar" mode=""></image> </view> <view class="nickName"> {{userInfo.nickName}} </view> </view> <view class="userinfo" v-else> <view class="userimg"> <image src="../../static/tx.png" mode=""></image> &l

uniapp微信小程序更新版本提示

2021-12-30

444 0

uniapp实现更新是用户打开显示版本更新提示打开app.vue文件夹，在onLaunch方法下加入如下代码const updateManager = uni.getUpdateManager() updateManager.onCheckForUpdate(function (res) { ;// 请求完新版本信息的回调 console.log(res.hasUpdate) }) // 下载新版本 updateManager.onUpdateReady(function () { uni.showModal({ title: '更新提示', content: '新版本已经准备好，是否重启应用？', success(res) { if (res.confirm) { // 重启应用 updateManager.applyUpdate() } } }) }) // 新版本下载

window10运行npm安装wepy2

2021-12-26

270 0

以前用过wepy1，现在要学习wepy2，运行以下命令出错 npm install @wepy/cli -g # 全局安装 WePY CLI 工具运行项目报错根据提示判断我之前安装的wepy1与现在的wepy2安装有冲突，找到目录C:\Users\my\AppData\Roaming\npm下删除文件wepy.js， wepy，wepy.cmd 进入C:\Users\Hm\AppData\Roaming\npm\node_modules目录删除相关wepy文件夹运行npm install @wepy/cli -g 安装成功。运行项目打包也成功

解决wepy创建项目报 wepy-cli · Failed to download repo standard: getaddrinfo ENOENT raw.githubusercontent.com错误

2021-12-26

480 0

运行创建项目wepy init standard myproject报如下错误wepy init standard myproject;;wepy-cli · Failed to download repo standard: getaddrinfo ENOENT raw.githubusercontent.com解决方法：查看raw.githubusercontent.com的真实IP地址点开网址 https://www.ipaddress.com/ ，输入raw.githubusercontent.com，点击查询：修改hosts文件找到这个文件夹： C:\Windows\System32\drivers\etc 下的hosts 打开，在最后一行编辑185.199.108.133; raw.githubusercontent.com

js如何获取数组中的项

2021-11-15

465 0

PHP中封装了array_column()函数用去获取取出数组的中项，js需要使用到.map(function(row){})函数获取，以下是函数，供大家参考//获取数据项 function getColumn(anArray,columnNumber) { return anArray.map(function(row) { return row[columnNumber]; }) },

百度echarts如何修改曲线背景颜色或者线条颜色

2021-10-17

559 0

百度ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。但是echarts默认的颜色我们不喜欢的话，可以通过过下面的设置进行修改，具体如下：1、设置线条颜色：在series下添加itemStyle itemStyle : { ; ; ; ; ; normal : { ; ; ; ; ; ; ; color:'#99CC33' ; ; ; ; ; } ; ; ; }, ; series: [ { ; ; name: '订单数', ; ; type: 'line', ; ; stack: 'Total', ; ; data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210], ; ; itemStyle : { ; ; ; ; ; normal : { ; ; ; ; ; ; ; color:'#

vue+file-saver+xlsx导出table表格为excel

2021-10-14

664 0

1、下载两个依赖npm install file-saver --save; npm install xlsx@0.17.5 --save ;2、封装成一个独立的组件outTable.vue<template> ;;;<el-button size="mini" round type="primary" @click="exportExcel">导出Excel</el-button> </template> ; <script> import FileSaver from 'file-saver' import XLSX from 'xlsx' export default { ;props: { ;;;id: { ;;;;;type: String, ;;;;;default: 'Table' ;;;}, ;;;name: { ;;;;;type: String, ;;;;;default: 'Table' ;;;} ; ;}, ;data () { ;;;return {} ;},

Vue实现点击按钮执行订单数据打印功能

2021-10-13

587 0

点击按钮实现打印页面的功能，在很多系统中非常常见，以下是vue的一个打印功能插件，供大家参考：1、安装;;npm install vue-print-nb –save 2，引入;安装好以后在main.js文件中引入;;import Print from 'vue-print-nb' ;Vue.use(Print);;//注册 3、使用<el-table border stripe ;id="printTest"> ;;;;;;;;;;;;;;;<el-table-column align="center" type="selection" width="55"></el-table-column> ;;;;;;;;;;;;;;;<el-table-column label="ID" prop="id" min-width="20"></el-table-column> ;;;;;;;;;;;;;;