web前端的笔记
谢泽豪
这个作者很懒,什么都没留下…
展开
-
javascript里为什么不能把</script>放到字符串里
原因:因为代码里面也有</script>在后面,所以会发现这个关键词,就结束了。将str +=" </script>";改为str =" <Vscript>";原创 2023-05-11 09:21:39 · 203 阅读 · 0 评论 -
vue中动态化的按需使用keep-alive
vue中动态化的按需使用keep-alive转载 2022-10-06 13:04:26 · 240 阅读 · 0 评论 -
CSS:实现background-image背景图片全屏铺满自适应
CSS:实现background-image背景图片全屏铺满自适应原创 2022-09-24 20:27:32 · 1255 阅读 · 0 评论 -
layui 上传文件限制数量优化
业务场景:需要用户最多只能上传4个文件,第一次选择3个文件并上传成功,第二选择3个文件并上传成功,第三次选择3个文件,这时是触发限制数量条件(number)。现在需要解决第二次选择文件时就不能触发上传接口。在网上搜索出很多解决方案都是改layui源码,我就不太想改。然后看到一篇文章——【使用Layui的upload上传文件在上传之前做逻辑处理并终止上传】受到启发,并优化自己代码。//多图片上传 var uploadInst = upload.render({ e原创 2022-03-22 15:13:20 · 3264 阅读 · 0 评论 -
thinkphp 公共模板的demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>{block name="title"}{:config('web_site_title')}{/block}</title> <meta name="description" content="{:config('web_site_description')}"&g.原创 2021-06-23 15:21:54 · 444 阅读 · 2 评论 -
Ueditor(PHP)在编辑模式下解析带有HTML标签的内容
后端获取到的数据内容(content)放在一个隐藏域里面,然后在Ueditor的ready方法中调用setContent(),传隐藏域的text()。代码如下://这里用到thinkphp5.1//<p>11111</p>$this->assign("content", $content);设置一个隐藏域<div id="content1" hidden="hidden"> {$data.content}</div>&原创 2021-06-22 22:35:03 · 566 阅读 · 3 评论 -
Photoshop 前端切图
“移动工具”点击图标,选中图标所在的图层; 右击该图层,选择“转换为智能对象”;(ps这时候没反应,不要大惊小怪,是你看不到而已) 接着再次在这个图层上,右击——“编辑内容” 对话框点击确定 这是点击一个小图标选中图标后的图层面板右键点击该图层选择“转换为智能对象”没转换前的图层样式:转换后的图层样式:所以别说“我转换了p...转载 2019-12-04 14:42:41 · 104 阅读 · 0 评论 -
JavaScript 数组去重的完美解决思路
var r,arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry','orange']; r = arr.filter(function (element, index, self) { return self.indexOf(element) === in原创 2017-08-15 16:46:15 · 208 阅读 · 0 评论 -
JavaScript 懒加载图片
1.什么是懒加载当图片出现在可视区域时才加载图片。2.懒加载实现方式核心:可视区域(clientHeight)+滚动条距离顶部高度(scrollTop) > 元素到顶部距离(offsetTop)0.获取元素到顶部的距离(offsetTop)1.监听滚动2.在滚动方法里,实时获取可视区域(clientHeight) 和 滚动条距离顶部高度(scrollTop)3.对单个i原创 2017-08-26 15:15:09 · 316 阅读 · 0 评论 -
块级元素与行内元素特点
块级元素:1:块级元素会独占一行,其宽度自动填满其父元素宽度2 :块级元素可以设置 width, height属性。【注意:块级元素即使设置了宽度,仍然是独占一行的】3:块级元素可以设置margin 和 padding。行级元素:1:行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化2:行原创 2017-09-11 17:39:10 · 574 阅读 · 0 评论 -
纯 CSS 让弹出层居中显示
html,body,#mask{ height: 100%; margin: 0; } #mask{ width: 100%; background: black; opacity: 0.3; position: absolute; } #confirm{ width: 300px; height: 200px原创 2017-10-20 12:41:31 · 1172 阅读 · 0 评论 -
JavaScript 自定义封装XMLHttpRequest
ajaxGet("http://localhost/shop/shopPHP/?c=User&f=getUser&userId=1",function (res) { console.log(res)})function ajaxGet(url,fn) { let xhr=new XMLHttpRequest(); xhr.open("GET",url); xhr.send(); x原创 2017-10-20 16:18:39 · 1585 阅读 · 0 评论 -
vue-router与setInterval的问题
今天在vue-router中使用setInterval时,发现一个问题:在A页面触发setInterval方法,跳转到B页面时,A的setInterval方法仍然继续执行,解决方法:setInterval方法会返回一个id,在触发setInterval方法时保存这个id,然后在页面摧毁时(beforedestory)执行clearInterval方法,mounted () {原创 2017-10-12 18:08:31 · 1004 阅读 · 0 评论 -
HTML5 视频播放器 最全API
转载地址:https://segmentfault.com/a/1190000000380064前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器。所谓“打造自己的”,就是要自己重写video标签的控制栏部分,实现包括播放、暂停、进度和音量控制、全屏等功能,并自定义控制栏的样式。转载 2017-10-22 12:04:50 · 11041 阅读 · 0 评论 -
JavaScript 选项卡
ul{ padding: 0; margin: 0; } li{ list-style-type: none; float: left; padding: 5px 7px; margin-right: 10px; } .check{ background: yellow; } qweqe原创 2017-11-15 21:17:48 · 168 阅读 · 0 评论 -
(面试题)Webp优势
WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。原创 2017-12-15 16:32:32 · 573 阅读 · 0 评论 -
解决Chrome 记录账号密码后input呈现黄色背景的问题
input:-webkit-autofill { -webkit-animation: autofill-fix 1s infinite;}@-webkit-keyframes autofill-fix { from { background-color: transparent } to { background-color: transparent }} ...原创 2018-10-11 09:52:31 · 241 阅读 · 0 评论 -
vue axios 遇到“No 'Access-Control-Allow-Origin' header is present on the requested resource.”的问题
在使用axios时候遇到“No 'Access-Control-Allow-Origin' header is present on the requested resource.”的问题。原因:跨域访问失败解决方法:在php中增加 “ php header('Access-Control-Allow-Origin: *'); ?>”原创 2017-08-08 10:43:08 · 10334 阅读 · 0 评论 -
jQuery中的height(),innerHeight()和outerHeight()
div { width: 100px; height: 100px; background-color: #0000FF; border-top: 10px solid black; margin-top: 10px; padding-top: 10px; } console.log($("原创 2017-08-10 11:09:23 · 198 阅读 · 0 评论 -
axios以post方式传值的问题
有时候axios的post方式,无法传值,用JavaScript的URLSearchParams,将参数放进去即可!!原创 2017-08-08 20:58:20 · 1436 阅读 · 0 评论 -
从PHP获取一个数组,添加到页面的下拉选择框
项目中,web页面的下拉选择框需要从后台获取数据,动态添加到前端。so,做一个实例:php后台(thinkphp框架)+JavaScript动态添加。//下拉选择function data_select() { //实例化数据库中的"data"表 $data=M("data"); //获取数据,生成一个二维数组 $arr=$原创 2016-09-01 10:41:23 · 1741 阅读 · 0 评论 -
jquery改变控件值
(一)input控件(type="text",type="date"都可以)$("#inputId").val("值");( 二)select控件默认选中select中value="值"的选项$("#selectId option[value=‘值’]").attr("selected",true);默认选中select中text="值"的选项$("#s原创 2016-09-01 13:13:19 · 618 阅读 · 0 评论 -
bootstrap-datetimepicker的基本用法
项目中需要有一些日期选择框控件来选择日期,于是我在网上找了一些日期选择框控件例子,觉得bootstrap-datetimepicke这个框架不错。 Date Picking原创 2016-09-05 14:42:25 · 478 阅读 · 0 评论 -
web表单提交前用JavaScript验证
网上一大堆了,自己做个笔记。Insert title here function check(form){ if (form.userid.value=="") { alert("请输入用户名"); form.userid.focus(); return false; } if (form.pws.value=="") { alert(原创 2016-09-01 13:30:18 · 409 阅读 · 0 评论 -
html <iframe>自适应高度
原文地址:http://www.cnblogs.com/Nbge/archive/2013/06/14/3135697.html function iFrameHeight() { var ifm= document.getElementById("iframepage"); var subWeb = document.frames ? document转载 2016-09-06 09:17:33 · 287 阅读 · 0 评论 -
JavaScript 事件绑定
传统写法:element.onclick=function(e){....}W3C标准绑定方法:element.addEventListenter('click',function(enent){})IE事件注册方法:element.attachEvent('onclick',function(){});统一方法:function addEvent(element,even原创 2016-09-23 16:38:14 · 203 阅读 · 0 评论 -
JavaScript和jQuery实现回到顶部效果
网上一大堆了,自己做个笔记。.content{ margin:0 auto; width:980px; height:3600px; background:#000;}#top{ position:fixed; left:50%; margin-left:500px; width:40px; height:40px; background:#F00; dis原创 2016-09-08 15:38:31 · 213 阅读 · 0 评论 -
关于checkbox的文章
http://www.zhangxinxu.com/wordpress/2009/12/checkbox%E5%A4%8D%E9%80%89%E6%A1%86%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E4%B8%8E%E7%90%86%E8%A7%A3/转载 2016-11-02 16:42:08 · 186 阅读 · 0 评论 -
让div全屏
在项目中,有时候需要让一个div全屏只需要在css里设置,body,html的宽度和高度是100%,让目标div的宽度和高度也设置100%body,html{ width:100%; height:100%;}/*目标div*/div{ width:100%; height:100%;}原创 2016-12-20 15:36:09 · 612 阅读 · 0 评论 -
解决在表单中,window.location.herf无法跳转的问题
在表单中,window.location.herf无法跳转 /** * 省略部分代码 */ 1.可以把《form》标签注释掉2.可以把‘submit’ 换成 ‘button’原创 2017-01-12 09:52:22 · 2284 阅读 · 0 评论 -
解决修改css文件或js文件后浏览器无法及时更新的问题方法
开发过程中,浏览器会缓存一些js文件和css文件,会导致修改文件后,浏览器无法及时更新。解决方法:在引用文件中加入版本号,比如:第一次:第二次:原创 2017-03-08 10:55:15 · 2061 阅读 · 0 评论 -
div中有两个class名字的优先级问题
div{ width:200px; height: 200px; } .blue{ background-color: blue; } .red{ background-color: red; } 当div的class属性有两个值的时候,后者(.red)覆盖前者(.blue)的样式原创 2017-03-17 11:57:24 · 2405 阅读 · 0 评论 -
响应式布局一般要响应的尺寸
1170px(大屏幕 大桌面显示器)970px(中等屏幕 桌面显示器)750px(小屏幕 平板)小于768px (超小 手机屏幕)原创 2017-05-11 09:14:04 · 2952 阅读 · 0 评论 -
bootstrap-datetimepicker年视图中endDate设置之后比正常时间提前两个月
问题 bootstrap-datetimepicker年视图中endDate设置结束时间为2016-08,(即8月之后的日期不能选)而在日历上显示时为2016-06,相差两个月,即6月之后的日期不能选.解决方法 设置结束日期时默认添加两个月 但是当需要endDate为11或12月时,需要给endDate设置为2016-13/2016-14,这非日转载 2017-05-23 11:05:10 · 1945 阅读 · 0 评论 -
Safari上的table宽度问题
参考地址:http://stackoverflow.com/questions/23083462/how-to-get-an-iframe-to-be-responsive-in-ios-safari最近,遇到一个问题:在iPhone手机上使用浏览器(Safari或chrome)打开一个用表格的网站,如果表格的字段太多,浏览器会自动将表格撑开,不会出现左右滚动条,这导致整个网页的宽度改变,经过原创 2017-05-05 10:29:42 · 2001 阅读 · 1 评论 -
Vue.js安装(小白教程)
一.直接下载并用 标签引入二.cdn引入三.npm安装(Windows)1.到 https://nodejs.org/en/download/下载 nodejs下载完成后,直接点击安装,一直next就可以安装成功2.安装cnpm(淘宝镜像)npm install -g cnpm --registry=https://registry.npm原创 2017-06-14 14:43:35 · 2635 阅读 · 2 评论 -
利用JavaScript重新编日期格式
使用html5新特性——type="date",其默认格式为2016-09-01,可项目中往往需要不同的格式,于是乎利用JavaScript可以修改日期的格式。 var mvalue=""; function change(){ // // Array list of months. var months = new Array('Jan','Feb','Mar',原创 2016-09-01 10:27:38 · 177 阅读 · 0 评论