前端
前端学习记录,HTML、css等
BlizzardWu
这个作者很懒,什么都没留下…
展开
-
layui -- loading实现加载中效果
1、layer.msglayer.msg('Loading...', { icon: 16 , shade: 0.01 , time: 5000});2、弹出遮罩层显示加载中var loading = layer.load('Loading...', { shade: [0.1,'#fff'] //0.1透明度的白色背景});setTimeout(function (data) { //最后数据加载完 让 loading层消失 layer.close(loading);原创 2022-05-24 10:45:26 · 5643 阅读 · 1 评论 -
Layui 镜像站
推荐使用Layui镜像站:https://www.layui.siteLayui文档:Layui 开发使用文档 - 入门指南Layui示例:在线示例 - LayuiLayer文档:layer弹层组件开发文档 - LayuiLayer:layer 弹出层组件 - jQuery 弹出层插件Mobile:layer 移动端弹层界面组件...原创 2021-12-07 16:11:43 · 769 阅读 · 0 评论 -
vue、uni-app 数组的操作方法
【使数组发生更新】方法:修改了原始数组,会触发视图更新push() 、 pop()、shift()、unshift()、 splice() 、sort()、 reverse()、 join()【返回新数组、替换数组】:不会变更原始数组,而总是返回一个新数组filter()、concat() 、 slice()、 map()【 .filter() 】方法filter创建一个新数组,新数组中的元素是符合指定条件的元素。filter方法不会改变原数组,不对空数组进行检测。const arr= [转载 2021-12-07 15:26:35 · 2474 阅读 · 0 评论 -
input框的一些使用情况
有时候在写HTML DOM时会用到(不只是input框),就记录一下。HTML DOM 事件1.关闭历史记录autocomplete属性,默认为on,设置为off就可以关闭历史记录<input class="layui-input" value="空空" autocomplete="off"/>2.焦点事件onblur:当 <input> 输入框 失去焦点时触发onfocus:当 <input> 输入框获得焦点时触发<input class=原创 2021-08-18 16:38:45 · 233 阅读 · 0 评论 -
js 设置select选中的项
<select class="select_styled" id="ptz_com_nub"> <option style="font-size: 20px;" value="01" selected>COM1</option> <option style="font-size: 20px;" value="02">COM2 </option> <option style="font-size: 20px;"原创 2021-08-17 09:32:35 · 5744 阅读 · 0 评论 -
html数据复制到剪切板
一、原生js指令复制function copyUtil(info) { //数据是null或者‘’的时候复制不了 if(info== null || info== ''){ info= ' '; } var $textArea = $('<textarea></textarea>'); $textArea.val(info); $textArea.css('opacity','0'); $('body').append($textArea原创 2021-07-24 14:54:07 · 1200 阅读 · 0 评论 -
php 跳转新窗口
php跳转新窗口的方法:第一种方式:header()header()函数的主要功能是将HTTP协议标头(header)输出到浏览器。语法:void header ( string $string [, bool $replace = true [, int $http_response_code ]] )可选参数replace指明是替换前一条类似标头还是添加一条相同类型的标头,默认为替换。第二个可选参数http_response_code强制将HTTP相应代码设为指定值。 header函数中原创 2021-07-21 17:34:07 · 5726 阅读 · 1 评论 -
uni-app 更改checkbox的默认组件样式
有时候在uniapp上修改CheckBox的样式时无效果,是因为uni-app的默认组件是定义好了的,如果要修改可以找到组件所属css,也可以自行修改样式并覆盖原有样式。uni-checkbox-group{ width: 100% !important; }uni-checkbox-group uni-label{ width: 33% !important; display: inline-flex; margin-bottom: 20rpx; }/*checkbox 选项框大原创 2021-07-02 14:18:46 · 1303 阅读 · 1 评论 -
html 制作带遮罩层的提示框示例
html 部分:<!--loading图标 start--><div id="mask_loading" class="mask_loading"></div> <!-- 遮罩层 --><div id="loading" hidden="hidden" class="loading" style="display: none;"> <img src="../../static/loading.gif" /> <span原创 2021-07-02 14:00:20 · 432 阅读 · 0 评论 -
mui 消息提示框 toast自定义样式
js:参数说明说明duration持续显示时间,默认值 short(2000ms)支持 整数值 和 String ,String可选:long(3500ms),short(2000ms)type强制使用mui消息框(div模式)‘div’mui.toast('加载中...',{ duration:'long', type:'div' });css:.mui-toast-container { bottom: 40% !important;/*离布局底原创 2021-07-01 16:15:19 · 1064 阅读 · 0 评论 -
jq 阻止事件冒泡(点击子级<div>不触发父级<div>)
1:关于事件冒泡事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window 。(注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数,就算传递了事件 也不会有什么表现 但事件确实传递了。)2:如何避免冒泡1: 使用 event.cancelBubble=true;<div class="box1" id="box1" onclick="change_cong(2)" > <div class="box2" id="bo原创 2021-06-25 14:31:49 · 967 阅读 · 0 评论 -
uniapp HTML5+API 设置状态栏透明(沉浸式)/全屏/颜色等
参考文档:http://www.html5plus.org/doc/zh_cn/navigator.html1、沉浸式状态栏如果页面顶部是图片,一般会把状态栏变成透明。//是否支持沉浸式状态栏alert(plus.navigator.isImmersedStatusbar());默认是不支持的,会弹出false. 想让环境支持,需要修改项目下的配置文件manifest.json“plus”:{ “statusbar”: { “immersed”: true }, …}//修改完成后原创 2021-06-18 15:06:45 · 3687 阅读 · 1 评论 -
CSS之position详解
定义和用法position属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。position属性有五个可选值,分别是absolute、fixed、relative、static、inherit:absolute: 生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位。元素的位置通过left、top、right以及bottom属性进行规定。转载 2021-05-25 17:32:12 · 7078 阅读 · 0 评论 -
uniapp/css 之flex布局
阮一峰老师原文地址http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html转载 2021-05-24 17:01:36 · 206 阅读 · 0 评论 -
js 用<a>标签实现单文件、多文件批量下载
简述:HTML 5 里面为 <a> 标签添加了一个 download 的属性,我们可以轻易的利用它来实现下载功能。download 的属性值是可选的,它用来指定下载文件的文件名。1:单个文件下载<a href="http://xxx.com/text.jpg" download="filename">Download file</a>2:批量下载多个文件:思路:将 url 放在一个数组里,循环数组并触发下载:var urls = [['url':'a','n原创 2021-05-19 11:15:59 · 3215 阅读 · 0 评论