web建站教程

  1. 首页
  2. vuejs
  3. js
  4. 好玩
  5. seo教程
  6. 前端知识
  7. 百度echarts
  8. php入门
    nodejs
    mockjs
    mysql
    织梦cms
    帝国cms
    git教程
前端冷知识:25个正则表达式
2021年12月02日  浏览(98)
1、手机号码的校验 const phoneReg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/const phoneStr1 = 13058810100console.log(phoneReg.test(phoneStr1)) // trueconst phoneStr2 = 130588101011console.log(phoneReg.test(phoneStr2)) // false 2、身份证的校验 const sfzReg = /^[1-9]d{5}(18|19|([23]d))d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/const sfzStr1 = 415106199801012130console.log(sfzReg.test(sfzStr1)) // trueconst sfzStr2 = 718381298381212183console.log(sfzReg.test(sfzStr2)) // fa
阅读全文>>
前端33个js知识基础代码
2021年12月02日  浏览(58)
1. 检查日期是否有效 const isDateValid = (...val) = !Number.isNaN(new Date(...val).valueOf());isDateValid(December 17, 1995 03:24:00); // true 2. 计算两个日期之间的间隔 const dayDif = (date1, date2) = Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)dayDif(new Date(2021-11-3), new Date(2022-2-1)) // 90 3. 查找日期位于一年中的第几天 const dayOfYear = (date) = Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);dayOfYear(new
阅读全文>>
前端19个冷知识代码
2021年12月02日  浏览(58)
1. 获取当前页面的滚动位置 const getScrollPosition = (el = window) = ({ x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft, y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop }) getScrollPosition(); // {x: 0, y: 200} 2. 平滑滚动到页面顶部 const scrollToTop = () = { const c = document.documentElement.scrollTop || document.body.scrollTop if (c 0) { window.requestAnimationFrame(scrollToTop) window.scrollTo(0, c - c / 8) } } scrollToTop() 3. 确定设备是
阅读全文>>
开发移动端网页如何调用控制台(Eruda、vconsole)
2021年12月01日  浏览(123)
开发移动端Web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在手机浏览器中还算好,可以把网址在电脑上打开查看console信息。下面带大家了解2大神奇帮你轻松解决痛点! 1、Eruda //方法一:引入jsscript src=https://cdn.jsdelivr.net/npm/eruda/script//调用方法eruda.init();//方法二:通过npm安装:npm install eruda --savescript
阅读全文>>
js对象找到数组中相同参数插入替换原来的
2021年11月30日  浏览(101)
//数组var grapeList = [ { score: , color: 1111, checkDate: 1 }, { score: , color: , checkDate: 2 }, { score: , color: , checkDate: 3 }, { score: , color: , checkDate: 4 }, { score: , color: , checkDate: 5 },];//对象var setGrapeInfo={score:60,color:yellow,name:1234,checkDate:1};//插入替换grapeList = grapeList.map(t = { return t.checkDate === setGrapeInfo.checkDate ? setGrapeInfo : t;});//输出console.log(grapeList,grapeList);
阅读全文>>
JS中二进制、八进制、十进制、十六进制的相互转换
2021年11月25日  浏览(115)
var num = 100;parseInt(num,2).toString(8) //二进制转八进制parseInt(num,2) //二进制转十进制parseInt(num,2).toString(16) //二进制转十六进制parseInt(num,8).toString(2) //八进制转二进制parseInt(num,8) //八进制转十进制parseInt(num,8).toString(16) //八进制转十六进制num.toString(2) //十进制转二进制parseInt(num).toString(8) //十进制转八进制parseInt(num).toString(16) //十进制转十六进制parseInt(num,16).toString(2) //十六进制转二进制
阅读全文>>
jquery监听滚动条是否滚到底部
2021年11月24日  浏览(72)
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == scrollHeight){ console.log(我已经到底!); }}); 参数介绍: scrollTop:滚动条在Y轴上的滚动距离。 clientHeight:内容可视区域的高度。 scrollHeight:内容可视区域的高度加上溢出的距离。
阅读全文>>
js如何把数组里的字符串转为数字
2021年11月22日  浏览(103)
[1,2,3,4,5].map(Number); 结果输出: (5)[1, 2, 3, 4, 5]
阅读全文>>
百度echarts X轴把小数点去掉
2021年11月22日  浏览(145)
找到xAxis中,添加以下语句 minInterval:1
阅读全文>>
百度echarts X轴显示文本自定义
2021年11月17日  浏览(180)
找到xAxis中axisLabel,添加以下语句 axisLabel: {formatter: function(params) {//用replace替换return params.replace(原文本,自定义文本)}}
阅读全文>>
js根据当前网页的缩放比例修改样式
2021年11月16日  浏览(147)
获取当前页面的缩放值,来修改样式! function detectZoom (){ var ratio = 0, screen = window.screen, ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (~ua.indexOf(msie)) { if (screen.deviceXDPI screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio){ ra
阅读全文>>
百度echarts X轴内容太长的四种解决方案
2021年11月16日  浏览(122)
1、xAxis,axisLabel中倾斜45% xAxis: {nameLocation:end,//坐标轴名称显示位置axisLabel : {//坐标轴刻度标签的相关设置interval:0,rotate:45}} 2、换行显示(限制每行显示的字数) axisLabel : {formatter : function(params){ var newParamsName = ;// 最终拼接成的字符串var paramsNameNumber = params.length;// 实际标签的个数var provideNumber = 4;// 每行能显示的字的个数var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话,需
阅读全文>>
laydate时间插件获取时间范围
2021年11月08日  浏览(190)
参数介绍: elem:所要绑定的id元素 type:时间类型 range:设置分割字符 formate:时间类型 btns:需要显示的按钮,默认值:[clear, now, confirm],清空、现在、确定 done:回调获取选中时间,需要回调后执行的方法都可以写在这里 laydate.render({elem: #datetime,type: date,range: ~,formate: yyyy-MM-dd,btns: [confirm],done: function(value, data) {console.log(value, data)}});
阅读全文>>
原生js获取各种屏幕的宽度和高度
2021年11月08日  浏览(122)
网页可见区域宽:document.body.clientWidth网页可见区域高:document.body.clientHeight网页可见区域宽:document.body.offsetWidth (包括边线的宽)网页可见区域高:document.body.offsetHeight (包括边线的高)网页正文全文宽:document.body.scrollWidth网页正文全文高:document.body.scrollHeight网页被卷去的高:document.body.scrollTop网页被卷去的左:document.body.scrollLeft网页正文部分上:window.screenTop网页正文部分左:wi
阅读全文>>
js实现div局部刷新
2021年11月08日  浏览(57)
1、在需要局部刷新的div上定义一个id div id=nums内容/div 2、js代码 $(#nums).load(location.href + #nums*, ); 是不是很简单!
阅读全文>>
用iframe里面的关闭按钮关闭iframe弹窗
2021年11月08日  浏览(138)
1、html代码 iframe class=iframe src=tc.html frameborder=0 height=100% width=100%/iframe 2、js代码 $(window.parent.document).find(.iframe).css({display:none});
阅读全文>>
浙里办获取PV日志参数埋点
2021年10月28日  浏览(271)
PV日志埋点参数包含应用开发管理平台appId、应用开发管理平台应用名称、经度、纬度和用户类型。 1、先根据ZWJSBridge.getLocation获取经纬度 ZWJSBridge.onReady(() = {console.log(初始化完成后,执行bridge方法);});ZWJSBridge.getLocation().then((result) = {console.log(获取经纬度, result);this.latitudeStr = result.latitude;this.longitudeStr = result.longitude;}).catch((error) = {console.log(error);}); 2、根据ZWJSBridge.getUserType获取用户类
阅读全文>>
console.log输出图片和ascii
2021年10月27日  浏览(113)
在console输出自己想要的图片和ascii图形 console.log( %c , `padding: 25px 100px; margin:50px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABBCAYAAACU5+uOAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABn9JREFUeNrsnD2O20YUxykjhQPEBXMEqXZF5QABtF0+KuoIUu0ADgU4pQ2ILuJaOoLVxelEIAfwqnFq8QjLIjZcrofGEHl+nnkzpIbSrvT/AQNbyxE5M3z/eR/k7uDh03eR5mfVnqj2g2rfRefLe9Xeqvanan/XP/j48nEEgIkH+t/nqv2l2o9nLo5Iz6+e5xs9bwBEgfyk2rMLnf8z7TkBsArktwtfgycwAyAJZHzhazCGGQBJII8ufA0ewQyAK0kHA
阅读全文>>
js将一个数组按照同一字段变成多维数组
2021年10月26日  浏览(97)
//数据let arr = [{id:1,name:北京,type:985},{id:2,name:上海,type:985},{id:3,name:天津,type:211},{id:4,name:广州,type:985},{id:5,name:深圳,type:211},{id:6,name:武汉,type:985}]//方法function groupBy(array, f) { let groups = {}; array.forEach(function(o) { let group = JSON.stringify(f(o)); groups[group] = groups[group] || []; groups[group].push(o); }); return Object.keys(groups).map(function(group) { return groups[group]; });} //调用groupBy(arr, function(item) { return item.type;})
阅读全文>>
浙里办调用ZWJSBridge方法须知
2021年10月25日  浏览(394)
浙里办项目中所有要调用ZWJSBridge方法之前必须先执行onReady初始化。 //ZWJSBridge初始化ZWJSBridge.onReady(() = { console.log(初始化完成后,执行bridge方法);});//老年版和常规版判断ZWJSBridge.getUiStyle({}).then(result = {console.log(result);}).catch(error = {console.log(error);});//自动拨打电话ZWJSBridge.phoneCall({corpId: this.mobile }).then(result = { console.log(#### ZWJSBridge.phoneCall() log. ####); console.log(result);}).catch(error = { conso
阅读全文>>

常用标签