- 博客(84)
- 收藏
- 关注
RSS订阅原创 h5监听页面进入后台
方法：export const pageChangeShowHide = function(){ let hidden,state,visibilityChange; if(typeof document.hidden !== 'undefined'){ hidden = 'hidden'; state = 'visibilityState'; visibilityChange = 'visibilitychange'; }els
2022-02-17 17:18:08
1356
原创 js判断盒子里面的滚动条是否滚动到盒子的右边界
let box1 = document.getElementById("box1")let myWidth = box1.scrollWidth - box1.clientWidthbox1.addEventListener('scroll', () => { //监听滚动 let needWidth = myWidth - box1.scrollLeft needWidth = Math.abs(needWidth) //允许误差在5px以内 if (box1.sc.
2022-02-08 11:59:30
1923
原创 video标签使用（全屏的进入和监听）
<video class="my-video1" id="myVideo1" bindfullscreenchange="screenChange" src="{{ossPath+'video/dunhuang-video202201051033.mp4'}}" controls='controls'></video>点击进入全屏：showVideo1() { let videoContext = wx.createVideoContext('myVideo1').
2022-01-06 17:01:37
8218
原创 微信小程序picker地区选择器显示省市二级联动
效果图：微信官方配置二级level="city"，无效（官方说正在修改2022.12.22）自己写，用多级联动写html： <picker mode="multiSelector" bindchange="bindMultiPickerChange" bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> .
2022-01-06 16:17:47
2886
原创 内容很长的弹框，且背景图很个性化，自适应屏幕，中间滑动
html：<div class="mask_rule"> <div class="mask_big"> <div class="mask-center"> <img src="~@/static/images/mask/rule-img03.png" class="img100"> </div> <div class="cha" @click="closeP
2021-11-26 15:35:21
209
原创 css动画放大缩小效果
html：<div class="xing_one my_xing"><img src="~@/static/images/maskscroll/maskscroll_xing.png" class="img100"></div>css：@keyframes xing { 0% { transform: scale(1); } 25% { transform: scale(1.8); }
2021-11-25 10:19:39
11593
原创 swiperjs实现内容滚动，自定义滚动条
效果图：html:<div class="rule_img"> <div class="swiper-container" id="swiper2"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="mask_center_p"> .
2021-11-24 14:07:29
2603
原创 js利用多张图实现gif效果
代码：imgUrl: [{ url: 'static/images/maskscroll/maskscroll_0.png' }, { url: 'static/images/maskscroll/maskscroll_1.png' }, { url: 'static/images/maskscroll/maskscroll_2.png' }, { url: 'static/images/maskscroll/maskscroll_3.png' }, { url: 'static/images/mas
2021-11-24 10:10:42
1409
原创 使用echarts遇到的一些问题
1.折线图某个拐点显示数据data: [{ value: 1888,}, { value: 20888,}, { value: 20555,}, { value: 20999, symbol: 'image://' + require('@/static/images/yuebao/yuebao_yuan.png'), symbolSize: 10, label: { normal: { show:
2021-11-11 15:14:05
1586
原创 纯css实现左滑删除
效果：(随便试试的，不知道会不会有什么兼容性问题)HTML：<div class="shanchu_byx"> <div class="shanchu_content">我是内容</div> <div class="shanchu_del">删除</div></div>css:.shanchu_byx { display: flex; align-items: cente..
2021-11-03 18:14:45
1176
原创 wx.showShareImageMenu使用
使用效果：代码：goshare() { wx.downloadFile({ url: 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg', success: (res) => { console.log("res:", res) wx.showShareImageMenu({ path: res
2021-10-20 10:42:21
6376
1
原创 前端实现水印效果
效果图：代码： watermark(settings) { var defaultSettings = { watermark_txt: "测试水印", watermark_x: 20, //水印起始位置x轴坐标 watermark_y: 20, //水印起始位置Y轴坐标 watermark_.
2021-10-13 18:24:43
424
1
原创 前端选择省市区（微信小程序&vue）
效果：html：<view class="userinfo_one"> <view class="input"> <picker mode="region" bindchange="bindchange($wx)" mode="region"> <view class="picker placeholder" v-if="!region.length">详细地址</view> .
2021-10-08 10:55:56
1356
原创 vue配合iview实现上传excel并展示
首先安装插件：npm install --save xlsx然后在common文件夹下创建一个excel.js文件，js如下：/* eslint-disable */import XLSX from 'xlsx';function auto_width(ws, data){ /*set worksheet max width per col*/ const colWidth = data.map(row => row.map(val => { .
2021-09-26 14:40:02
744
原创 js实现倒计时
效果图：代码：（在server文件夹下创建新的文件）let _times;let countTimeNum = (leftTime)=>{ let d = Math.floor(leftTime/1000/60/60/24); let h = Math.floor(leftTime/1000/60/60%24); let m = Math.floor(leftTime/1000/60%60); let s = Math.floor(l.
2021-09-26 13:46:33
31
原创 前端获取当前地理位置（腾讯）
代码：// 获取地理位置export const getCurrentPosition = function() { return new Promise((resolve, reject) => { if ("geolocation" in navigator) { let coords; /* 地理位置服务可用 */ navigator.geolocation.getCurrentPositi.
2021-09-26 12:04:34
686
原创 js 实现一些功能
判断当前时间是否在某一区间之内：isDuringDate(beginDateStr, endDateStr) { var curDate = new Date(), beginDate = new Date(beginDateStr), endDate = new Date(endDateStr); if (curDate >= beginDate && curDate <= endDate) { return
2021-09-22 16:59:32
139
原创 input placeholder添加下划线
效果图：css：input { width: 100%; height: 100%; border: 0px; border-radius: 15px; background-color: rgba($color: #fff, $alpha: 0); font-size: 38px; padding: 0 30px; text-align: center; color: #e0dcdc; position: re.
2021-09-22 11:03:08
641
原创 vue transition淡入淡出
主要是transition的name属性和css的首个单词要一致。html：<div class="answer_mask"> <div class="mask_byx"> <transition name="fade" v-for="(item, index) in imgurl" :key="index"> <img :src="item.url" class="fadeIn" v-if="imgIn
2021-09-22 10:13:19
1895
原创 vue配合element 导入excel数据（直接copy就完事了）
效果：excel格式：首先下载第三方插件： npm install -S file-saver xlsx npm install -D script-loader引入：import XLSX from 'xlsx'Vue.use(XLSX)使用：templete:<el-upload class="upload-demo" action="" :on-change="handleChange" :on-remove="handleRemove..
2021-09-15 15:55:45
487
原创 js转化日期格式
第一种：20201201转2020.12.01item.occurDate.substr(0, 4) + '.' + item.occurDate.substr(4, 2) + '.' + item.occurDate.substr(6, 2);第二种：（自动补0）2020-9-1转2020-09-01dateFill(mydate) { var date = mydate; var seperator1 = "-"; var year = date.getF
2021-09-15 14:19:31
1534
原创 vue使用防抖
防抖节流在网上随便一搜一大堆，但是自己拿下来用总是不能实现，可能是我自己调用的方式不对，这是我自己后来改的：函数部分： //防抖函数 debounce(fn, delay) { let _this = this return function() { if (_this.timer) { clearTimeout(_this.timer) } _this.timer = setTimeout(fn
2021-09-10 11:01:04
189
原创 wepy写微信小程序注意事项
1.微信小程序不支持<br/>换行解决方法：使用<text>哈哈哈哈/n哈哈哈哈</text>。需要注意的是text是女标签，如果有女标签不支持的css需求，需要将其设置为display:block。2.wepy使用相对或绝对路径，图片不显示解决方法：在调试的时候可以在本地上开一个server，走http可以显示。如下：<image src="http://localhost:8688/static/images/num/num_logo.
2021-09-09 10:07:43
86
原创 cropperjs实现放大缩小图片后配合canvas合成图片
原图：（这是两张图片，小车所在的图片是相框，芭比娃娃是可缩放的图片）放大后合成导出：html：<div class="lila"> <img src="~@/static/images/lila/lila_two.png" id="image" class="image"> <img src="~@/static/images/test/studo_2.png" id="bg1" class="bg1" /></div>.
2021-09-08 14:20:43
546
原创 有用的一些前端技术
如何实现快速生成朋友圈海报分享图https://developers.weixin.qq.com/community/develop/article/doc/000ac686c5c5506f18b87ee825b013
2021-09-08 13:52:35
390
原创 vue refs动态绑定
举个栗子：<div :ref="'hhh'+one" @click="tryref">hhhhhhhh</div>one是动态的值。代码实现：tryref(){ this.$refs[`hhh${this.one}`]; console.log(this.$refs[`hhh${this.one}`])}
2021-09-07 16:05:18
1408
原创 jquery ${xxx}
相当于字符串拼接。例：var a = 1;用加号拼接：console.log('一共有'+a+'个鸡蛋！')用${}拼接：console.log(`一共有${a}个鸡蛋！`)狭隘的说， 我感觉他可以用在字符串拼接上代替‘+’。
2021-09-07 15:52:29
112
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人