html
html
hy3528
这个作者很懒,什么都没留下…
展开
-
html中使用vant/element的插槽功能(slot)
把#input 替换为 Slot=‘input’vue-cli中写法。原创 2023-06-06 15:25:05 · 961 阅读 · 0 评论 -
获取本月第一天和最后一天
//获取指定月初月末 getMonthTime(time) { var now = new Date(time); //当前日期 var nowMonth = now.getMonth(); //当前月 var nowYear = now.getFullYear(); //当前年 //本月的开始时间 var monthStartDate = new Date(nowYear, nowMonth, 1); //本月的结束..原创 2022-03-23 17:05:51 · 360 阅读 · 0 评论 -
滚动条特殊样式
::-webkit-scrollbar { width: 10px; height: 10px; background-color: #f5f5f5;}/*定义滚动条轨道 内阴影+圆角*/::-webkit-scrollbar-track { // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: white;}/*定义滑块 内阴影+圆角*/原创 2022-03-01 14:37:24 · 118 阅读 · 0 评论 -
vue动态获取$ref怎么写
for (let e = 0; e < this.addArtList.length; e++) { this.$refs[`mavon-${e}`] }原创 2022-02-22 10:29:35 · 562 阅读 · 0 评论 -
利用el-checkbox-group 做三级分类选择
<el-checkbox-group class="pop_label_cont" v-model="addStageLabelList"> <el-checkbox class="pop_label_one" :label="item.Id" :disabled="item.IsState">{{item.Label}}</el-checkbox> <div class="pop_la...原创 2021-12-20 17:41:30 · 798 阅读 · 2 评论 -
js使用split获取文件后缀
获取后缀后返回相应类型进行操作 regex(e) { var type = String(e.split('.').slice(-1)) if (type == undefined) { return 'unlonwn' } if (type == 'jpg' || type == 'jpeg' || type == 'gif' || ty原创 2021-12-14 17:41:07 · 1480 阅读 · 0 评论 -
js转义html标签
将特殊符号转义会html标签replaceSpecialChar (str) { str = str.replace(/&quot;/g, '"'); str = str.replace(/&amp;/g, '&'); str = str.replace(/&lt;/g, '<'); str = str.replace(/&gt;/g, '>'); str = str.replac原创 2021-03-26 17:10:49 · 226 阅读 · 0 评论 -
js 倒计时
// 倒计时 getdatestr(AddDayCount) { var dd = new Date(); dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期 var y = dd.getFullYear(); var m = dd.getMonth() + 1; //获取当前月份的日期 var d = dd.getDate(); ...原创 2021-03-01 15:12:56 · 69 阅读 · 0 评论 -
js控制横向滚动条位置
将div的scrollLeft 设置为想要的位置,即可定位。原生写法document.getElementById('scroll_div').scrollLeft = document.getElementById('scroll_div').scrollWidth;vue写法this.$refs.scroll_div.scrollLeft = this.$refs.scroll_div.scrollWidthJQuery写法$('#scroll_div').scrollLeft($('#原创 2021-03-01 11:35:41 · 7384 阅读 · 3 评论 -
JS关闭微信浏览器
WeixinJSBridge.call('closeWindow');原创 2021-02-19 14:51:48 · 302 阅读 · 0 评论 -
微信浏览器返回页面自动刷新
created() { var needRefresh = window.sessionStorage.getItem('need-refresh'); window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); }原创 2021-02-19 14:01:08 · 1213 阅读 · 0 评论 -
骨架屏demo
css版本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <meta name="viewport" content="width=device-原创 2020-12-24 17:45:58 · 154 阅读 · 1 评论 -
手机号中间4位替换为星号(*)
// 替换手机号中间四位var str = ‘15912341234’;// 方法一str.replace(/(\d{3})(\d{4})(\d{3})/, function($0, $1, $2, $3){console.log($1+"**"+$3)})// 方法二str.replace(str.substr(3,4), '’.repeat(4));// 方法三str.substr(0,3)+"".repeat(4)+str.substr(7)...原创 2020-12-24 15:01:27 · 2349 阅读 · 0 评论 -
视频截帧
例子https://sucai.suoluomei.cn/sucai_zs/video/2020/03/03/78cb3207c9871eaf9017bd1cd036199e.mp4?x-oss-process=video/snapshot,t_2000,f_jpg,w_0,h_0,m_fast在视频地址后面拼接’?x-oss-process=video/snapshot,t_2000,f_jpg,w_0,h_0,m_fast’ 就可以视频截帧参数描述t截取视频多少毫秒的帧原创 2020-12-15 11:27:30 · 390 阅读 · 0 评论 -
大转盘抽奖
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> .box {原创 2020-10-08 12:00:12 · 116 阅读 · 0 评论 -
js对josn数组进行操作
添加var list = { name:"名字", age:"20"}list.sex = "男"添加后的数组为:{name:"名字",age:"20",sex:"男"}原创 2020-08-18 09:03:22 · 125 阅读 · 0 评论 -
html使用slice报错的解决办法
在页面中使用slice, 页面报错,报错原因 是由于数组对象未定义或为null 引起的,所以查看获取数据的接口是否请求到了数据。因为加载顺序(生命周期)的问题导致先执行的时候为空,做个空数据就好了 (typeIdPro.sysqalist || ‘’)原来的代码 <span v-for="(item,index) in card_info.introduce.slice(0,2)" :key="index"原创 2020-08-12 14:20:59 · 1349 阅读 · 0 评论 -
element button颜色
.el-button--primary.is-active,.el-button--primary:active {background: #007E7E;border-color: #007E7E;color: #fff;}.el-button--primary:focus,.el-button--primary:hover {background: #007E7E;border-color: #007E7E;color: #fff;}.el-button--primary {原创 2020-08-03 11:31:56 · 2713 阅读 · 0 评论 -
九宫格抽奖demo-单页面vue
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <meta name="viewport" content="width=device-width,原创 2020-07-18 14:12:47 · 353 阅读 · 0 评论 -
九宫格抽奖demo
<!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> * { pad原创 2020-07-17 16:00:11 · 168 阅读 · 0 评论 -
利用vant上传图片功能(可多选)
<div class="upimg"> <span>上传图片</span> <van-uploader v-model="fileList" @delete="deleteimg" :after-read="afterRead" multiple :max-count="9" ...原创 2020-07-13 10:04:07 · 7067 阅读 · 9 评论 -
返回上一页的方法js
window.history.go(-1); //返回上一页window.history.back(); //返回上一页window.location.go(-1); //刷新上一页window.history.back();location.reload();//强行刷新(返回上一页刷新页面)//如果要强行刷新的话就是:window.history.back();//刷新当前页 window.location.reload();Javascript 返回上一页:history.go(-1)原创 2020-07-09 11:58:06 · 435 阅读 · 0 评论 -
ajax请求之前执行的代码被等待到请求完毕后才执行
可能是因为async:false, //同步方式发起请求导致,设置为true即可,欢迎广大网友其他的问题或者解决办法。(收集踩坑记录)原创 2020-07-07 16:05:03 · 865 阅读 · 0 评论 -
精准获取链接后参数(/)
geturl() { var url = document.location.toString(); var perid = url.split("perid/")[1].split("/")[0]; this.perid = perid }原创 2020-06-18 16:14:34 · 338 阅读 · 0 评论 -
腾讯地图在H5的局部应用
效果图、<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <meta name="viewport" content="width=device-原创 2020-06-17 11:55:40 · 829 阅读 · 0 评论 -
H5单页面引入vue实现弹幕效果
body <!-- 弹幕 --> <div class="dmGroup" v-for="(item,index) in dmData" :key="index" v-bind:style="{top:item.top +'%',animationName:'dmAnimation-data-v-68b3be6b',animationDuration:item.time + 's',animationT原创 2020-06-03 14:31:34 · 2488 阅读 · 1 评论 -
foreach的实际应用
<foreach name="card_info.photo" item="item" key="index"> <div style="width: 100%;"> <img @click="dianji('{$item.photo}')" style="width: 100%;" src="{$item.photo}?x-oss-process=image/resize,p_70,limit_0" alt=""> </div>.原创 2020-06-02 17:17:25 · 212 阅读 · 0 评论 -
一键复制功能实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <meta name="viewport" content="width=device-width,原创 2020-06-01 14:54:55 · 1124 阅读 · 0 评论 -
html中使用vant的van-list列表懒加载
使用van-list标签将需要进行懒加载的内容包住 <van-list class="activity" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad"> <div class="activity_cont" v-for="(item,index) in activitylist" :key="index">原创 2020-05-26 17:27:15 · 5552 阅读 · 3 评论 -
swiper轮播图带页数版本
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.suoluomei.com/common/js2.0/npm/vant@2.2/lib/index.css"> <link rel="stylesheet" href="https://cdn.suoluomei原创 2020-05-25 15:49:31 · 795 阅读 · 1 评论 -
Css实现内容溢出添加横向滚动条
效果图在这里每一个div标签包裹着一张图片和一行文字以下代码直接copy看效果 <div class="banner"> <div class="one"> <img src="http://sucai.suoluomei.cn/sucai_zs/images/20190729/e082397f7c597ee10599b6723ebaf139.jpg" alt="图片"> <p原创 2020-05-25 11:36:51 · 1185 阅读 · 0 评论 -
css图片只显示居中部分
<div style="width:300px; height:300px;"> <img src="dog.jpg" alt=""/></div> div{ position: relative; left:100px; top:100px; ...原创 2020-03-27 16:33:02 · 730 阅读 · 0 评论 -
利用html2canvas时图片变形问题以及保存时超出屏幕缺失
//判断图片宽高赋予不同的css widthheight(e, id) { // 判断图片的宽高 let that = this // 图片地址 e是传进来的图片链接(或者你可以直接写图片链接进来) var img_a = e...原创 2020-03-27 15:20:13 · 4154 阅读 · 0 评论 -
h5上传图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-03-26 11:33:26 · 158 阅读 · 0 评论 -
原生alert弹框ios中防止出现乱码
window.alert = function (name) { var iframe = document.createElement("IFRAME"); iframe.style.display = "none"; iframe.setAttribute("src", 'data:text/plain,'); document.documentElemen...原创 2020-01-17 13:55:16 · 170 阅读 · 0 评论 -
element上传图片或者文件()此文章为上传图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/...原创 2020-01-14 14:55:32 · 418 阅读 · 0 评论 -
html引入腾讯地图导航
需要再http协议上打开,并且绑定过公众号,并把页面放到服务器上。否则打开则是空白页面链接后面需要带目的地坐标参数(或者从接口获取,但是一定要有一个目的地经纬度)。&latitude=28.662031&longitude=115.919083点击导航页面代码里已经把目的地参数传到腾讯地图页,自动规划线路再点击导航就跳转到了腾讯地图APP,已经下载了腾讯地图APP的会自...原创 2020-01-10 11:12:25 · 2783 阅读 · 0 评论 -
html引用腾讯地图(带导航)
请在http或https协议下使用!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2020-01-06 17:07:06 · 1898 阅读 · 0 评论 -
正则表达式日期-转/或者/转-
//只替换第一个“-”:2010/01-05 var dt = "2010-01-05"; var dt = dt.replace("-","/"); console.log(dt);//替换所有“-”,g为全局标志,另外如果加i就忽略大小写:2010/01/05 var dt = "2010-01-05"; var dt =...原创 2020-01-03 13:38:24 · 648 阅读 · 0 评论 -
HTML可s上传多个文件(多类型)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant...原创 2020-01-03 11:54:09 · 586 阅读 · 0 评论