前端技术方案
关注
分享
扫一扫
工作过程中的经验总结
牧马少女
牧马少女的学习笔记。
展开
-
css background 多张背景图单列展示
切背景图的时候，最好把每张图的高度切成相等的。如果大图高度不能等分，那就前几张小图的高度相等，多的高度都匀给最后一张图。这样方便设置background-positio的值，给小图定位（每张小图的Y轴定位是有规律的）。应用场景：在移动端登录页设置背景图的时候，如果使用单张大图做背景，那么在网络不好的情况下图片会加载比较慢，图片是从上到下加载的，会看到下面的图片是白屏。如果设置background-size时，不想给图片的高度定死，可以设置宽100vw，高度auto。原创 2023-11-15 11:51:02 · 39 阅读 · 0 评论 -
解决360兼容模式下接口请求取缓存的问题
这些参数可以告诉服务器不要缓存请求的数据，以确保每次请求都是不同的。将其设置为 false，可以禁用请求的缓存。需要注意的是，这个参数只有在使用 GET 请求时才能生效。3、在发送请求时添加一个随机参数，以确保每次请求都是不同的。可以使用 Date.now() 方法来获取当前时间戳，然后将其作为一个随机参数添加到请求的 URL 中。我的页面在360兼容模式下请求接口时，接口并没有真的请求成功，而是从浏览器缓存获取数据，在network里看到接口请求状态全都是204，导致数据不更新。原创 2023-09-14 15:33:31 · 38 阅读 · 0 评论 -
new File() 在360兼容模式下不兼容
我的代码里需要用FormData的方式来上传图片，上传之前需要用 new File() 深拷贝图片的file对象。然后在360兼容模式下，上传图片时就js报错了。但是在360的极速模式还有谷歌、火狐等其他浏览器里是正常的，故猜测是 new File() 在360兼容模式下不兼容造成的。在 IE上传不支持 new File。经过排查发现，是因为promises的值有误，导致Promise.all()进入了catch()。最后一行一行代码排查到是。转载 2023-09-14 15:00:44 · 221 阅读 · 0 评论 -
去除移动端h5的横向滚动条
我的问题是，在移动端第一次访问h5页面时，页面尺寸被放大了一点，没有手机适配，所以出现了横向滚动条。手指缩小页面尺寸后，横向滚动条才消失。转载 2023-05-30 18:23:17 · 1017 阅读 · 0 评论 -
vue-fullscreen实现全屏功能
1、下载vue-fullscreen依赖。2、在mian.js中引用并注册。原创 2023-05-29 18:16:22 · 1874 阅读 · 0 评论 -
鼠标悬浮变手指或者左右箭头
cursor原创 2022-06-10 20:01:21 · 1957 阅读 · 0 评论 -
背景色动态渐变
效果如图：代码：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>canvas demo</title> <style> html { font-size: 62.5%; } body { margin: 0px; } #demo { width: 100v原创 2021-12-01 15:10:22 · 585 阅读 · 0 评论 -
用set()对数组和字符串去重
ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。数组去重的方法1：const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) { console.log(i);}上面代码通过add()方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值。去除数组的重复成员2：[...new Set([1,2,2,3,3,4,4,4,4])原创 2021-11-15 10:21:03 · 1337 阅读 · 0 评论 -
Vue + iView实现Excel上传
1、HTML部分<Col span="2">上传文件：</Col><Col span="22" class="uploadExcelBox"> <Upload ref="uploadExcel" :loading="uploadLoading" :action="uploadFileUrl" accept="xlsx,xls" :format="uploadFormat" :before-upload="beforeImgFile" :on-succ原创 2021-06-21 20:09:04 · 1521 阅读 · 10 评论 -
本地浏览器可发送跨域请求
1、浏览器桌面图标 -- 右键 -- 属性 -- 快捷方式 -- 目标2、在“目标”输入框里原有的值后面加如下(带一个空格)： --user-data-dir="c:\ChromeDebug" --test-type --disable-web-security3、应用 -- 确定 -- 然后重启浏览器就好了注意：此方法只有在本地有效。...原创 2020-12-01 15:52:46 · 294 阅读 · 0 评论 -
vue-element-admin使用Tinymce富文本插件的踩坑填坑
vue-element-admin项目的作者已经封装好了Tinymce富文本组件，我直接在Git上下载demo运用到自己项目里。这是Git地址：https://github.com/PanJiaChen/vue-element-admin一、Bug描述：（组件的代码和demo基本一致的前提下）我在编辑弹窗里引用了Tinymce富文本组件，如下图，table的每条数据都有一个“修改”按钮，每次点击“修改”按钮，则弹窗里显示该行对应的HTML。可是从第二次开始每次富文的内容都和第一次的一样，按道理不原创 2020-07-29 16:11:52 · 6908 阅读 · 15 评论 -
CSS : 文本换行 / 文本不换行 / 文本不换行，超出部分显示省略号
一、文本换行 html文本超出时换行：word-break属性http://www.w3school.com.cn/cssref/pr_word-break.asp二、文本不换行 文本不换行white-space: nowrap;三、文本不换行，超出部分显示省略号CSS 实现不换行 / 自动换行 / 文本超出隐藏显示省略号1、自动换行 div{ word-wrap:break-word; word-break:normal; } 2、强制不换行...原创 2020-07-08 10:39:06 · 1336 阅读 · 0 评论 -
问题：点击苹果自带的返回键返回上一页，刷新不刷新页面。
$(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } }); window.addEventListener('pagehide', functio.转载 2020-05-15 14:30:41 · 674 阅读 · 0 评论 -
js 秒转换成时分秒字符串
var second = 139;formatSeconds(second){//秒转换成时分秒 var s = parseInt(second);// 需要转换的时间秒 var m = 0;// 分 var h = 0;// 小时 if(s > 60) { m = parseInt(s/60); .原创 2020-05-13 19:30:05 · 843 阅读 · 1 评论 -
js：array / string / int 互转
一、array 转 string（1）var a, b;a = new Array(0,1,2,3,4);b = a.join("");//"01234"（2）var aColors = new Array("red","green","blue"); aColors.toString();//"red,green,blue"二、string 转 array...原创 2019-12-11 17:57:40 · 1463 阅读 · 0 评论 -
iOS设备微信页面回退内容不刷新的问题
解决方法：在回退后需要刷新的页面加以下js:$(function () { var isPageHide = false; window.addEventListener('pageshow', function () { if (isPageHide) { window.location.reload(); } ...转载 2019-11-02 10:52:38 · 248 阅读 · 0 评论 -
ios input框将页面顶起的兼容问题
给input加失去焦点事件，让页面滚动距离为0。$(".sitter-fee").blur(function(){ window.scrollTo(0,0);});原创 2019-10-29 17:41:31 · 350 阅读 · 0 评论 -
javascript 点击触发复制功能
https://www.cnblogs.com/yadiblogs/p/9892921.html转载 2019-10-21 19:31:47 · 869 阅读 · 0 评论 -
设置cookie以及删除cookie和cookie详解
https://www.cnblogs.com/maderlzp/p/7843365.html转载 2019-06-26 11:30:59 · 241 阅读 · 0 评论 -
实现pdf打印功能
方法一：将页面保存为图片，再将图片存为PDF。1、具体步骤讲解：https://www.cnblogs.com/xuzhengzong/p/8929665.html2、代码片段printing:function(){ //第3个参数为尺寸，避免分页时将网页切割。 var pdf = new jsPDF('p','pt',[1105, 2498]); // ...原创 2019-06-10 17:07:44 · 3024 阅读 · 1 评论 -
style标签中使用scoped
语法：<style type="text/css" scoped></style>XHTML中不允许简写：在style中使用了scoped，则style标签里的css仅作用于当前页面。css对子组件不生效，可以在子组件的style标签里也使用scoped，这样可以使一个页面对应自己的css，避免影响到其他页面。...原创 2019-06-05 15:49:42 · 5026 阅读 · 3 评论 -
SVG实例
SVG元素SVG各种类型的例子Demo1:渐变文字代码：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="A...原创 2019-04-29 17:03:19 · 887 阅读 · 0 评论 -
三目运算和四目运算
四目运算：:type="scope.row.state ==='已支付'?'success':(scope.row.state ==='处理中'?'warning':'danger')"三目运算：:type="scope.row.state ==='已支付'?'success':'warning'"...原创 2019-07-03 14:34:31 · 8509 阅读 · 0 评论 -
排序函数
一、JS方式https://www.cnblogs.com/wangting888/p/9701630.html二、冒泡排序https://www.cnblogs.com/jingmoxukong/p/4302718.html原创 2019-08-20 17:59:23 · 364 阅读 · 0 评论 -
用css画三角形
<!DOCTYPE html><html><head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Test</title> <meta name=...原创 2019-08-27 16:44:23 · 200 阅读 · 0 评论 -
设置viewport进行缩放
转载至（点击即可跳转至原博客）该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。如果你不这样的设定的话，那就会使用那个比屏幕宽的默认viewport，也就是说会出现横向滚动条。<meta name="viewport" content="width=device-width, initial-scale=1,minimum-sc...转载 2019-09-04 14:55:22 · 3447 阅读 · 0 评论 -
移动端H5页面在ios设备上软键盘顶起页面后隐藏，页面不回弹的解决方案
参考网址：https://www.cnblogs.com/fps2tao/p/9223753.htmlhttps://www.cnblogs.com/blackbentel/p/10239886.htmlhttps://blog.csdn.net/qq_22266149/article/details/95479107原创 2019-09-24 15:06:42 · 2599 阅读 · 0 评论 -
表单验证 常用的正则表达式
一、正则表达式用法：var reg =/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;var regResult = new RegExp(reg);regResult.test(value);//符合规则返回true，否则返回false二、常用的正则表达式：1、判断是否为 8-16位字母加数字 ：^(?![0-9]+$)...原创 2019-10-10 17:29:43 · 1964 阅读 · 0 评论 -
word-wrap / white-space / word-break
1、word-wrap2、white-space3、word-break文本超出显示省略号overflow:hidden; text-overflow:ellipsis; white-space:nowrap;原创 2019-04-27 17:35:58 · 152 阅读 · 0 评论 -
元素水平垂直居中的几种方式
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>元素水平、垂直居中</title> <style> body { margin: 0px 0px; padding: 20px 20px; } /* 公共css */ .demo { width: 300px;原创 2017-11-22 11:35:16 · 254 阅读 · 0 评论 -
在手机端点击input框不弹出输入法的方法
1、使用CSS样式 ： input { pointer-events: none; }2、 使用事件阻止 ： input.onmousedown = function (e) { e.preventDefault(); } 这样不仅会阻止键盘，同时 input 会失去光标跟随。 如果你的需求不受这点因素影响，可以采用这种方式，否则还是自定义实现吧。3、使用其他非焦点获取的标签来代替input原创 2017-11-22 11:32:39 · 23467 阅读 · 0 评论 -
input输入框不可编辑
(1)Contenteditable=true|false; 仅支持HTML5. (2)js的contentEditable (3)disabled | readonly | readonly unselectable原创 2017-11-22 11:29:59 · 732 阅读 · 0 评论 -
Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（html/Xhtml）。 如何触发： 意义：确定了正确的Doctype，xhtml里面的标识和css才能正常生效(也就是说它会很负责地告诉浏览器怎么解释你的这个标签和你写的css)。既然它是一种声明，它的责任就是告诉浏览器文档使用哪种html或者xhtml规范。原创 2017-11-15 13:45:01 · 641 阅读 · 0 评论 -
bootstrap添加移动设备支持
使用meta标签原创 2017-11-15 12:04:42 · 400 阅读 · 0 评论 -
HTML的metal标签
< meta name=”Keywords” content=”“> –设置网页关键词 不写无曝光< meta name=”Description” content=”“> –网页描述 方便搜索引擎搜索 利于SEO优化 给后台网络建站网络投资的人看原创 2017-11-15 12:01:36 · 1389 阅读 · 0 评论 -
文本和div加阴影
1、文字加阴影 http://www.w3cplus.com/blog/52.html 2、div加阴影 box-shadow: #885025 0px 0px 20px; /阴影/原创 2017-11-15 11:43:21 · 226 阅读 · 0 评论 -
text-rendering文本渲染
语法：格式：text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit值：auto:当绘制文本时，浏览器会进行智能识别，何时应该从速度、清晰度和几何精度方 面进行优化。关于各浏览器对该属性解释的差别，参见下面的兼容性表格。optimizeSpeed：当绘原创 2017-11-15 11:38:06 · 3847 阅读 · 0 评论 -
绝对路径与相对路径
https://www.cnblogs.com/shireyhu/p/7827194.html原创 2017-11-15 11:36:38 · 159 阅读 · 0 评论 -
height:100%;和height:auto;的区别
//子元素有多高，父元素就有多高，自动撑大 height:auto;//父元素有多高，该元素就有多高。 height:100%;table无法设置宽高，只能被子元素(tr,td)撑大。iframe 没法被子元素撑大，所以height:auto无效；要么设定固定值，要么写js代码实时计算高度，实现自适应；要么给父元素定宽高后，再给iframe设置height:100%。...原创 2018-03-24 13:53:10 · 702 阅读 · 1 评论 -
scrollBy(x,y)控制滚动条
1、操控整个网页的滚动条window.scrollBy(x,y); 2、操控页面上某一指定滚动条，比如页面上某个ul的滚动条obj.scrollBy(x,y);如图：原创 2018-12-06 16:04:43 · 713 阅读 · 0 评论