html
QSWQSWQSWQSWQSW
.
展开
-
h5移动端rem适配
h5移动端rem适配原创 2022-04-08 10:32:09 · 182 阅读 · 0 评论 -
每次点击按钮input增加,可继续增加输入不同的值
<input id="content" type="text" /><input type="button" id="btn" value="ok" onclick="show()"><script> function show() { var oText=document.getElementById("content"); var oP =document.createElement("p"); oP原创 2021-08-10 14:40:00 · 529 阅读 · 0 评论 -
html底部出现空白
找了好久才发现,是我某个元素设置了visibility: hidden;元素是隐藏了,但是这个元素的大小还在那放着。改为display none就好了。自己每个盒子设置了一下午的高度100% 用display flex 布局什么的都不好使,后来突然就想到了,记录一下,防止下次再找错找这么久。。...原创 2021-04-09 15:42:55 · 1402 阅读 · 0 评论 -
将数据追加到数组中然后赋值成对象在追加到新的数组中
好多input框,要以键值对的数组传数据给后台第一步:// 将动态添加的input框的value值都添加到一个数组里去 var numArr = []; // 定义一个空数组 var numArr2 = []; // 定义一个空数组 var txt = $('.inquiry_number'); // 获取所有文本框 var txt2 = $('.inquiry_value'); // 获取所有文本框 for (var i = 0; i < txt.le.原创 2021-03-01 14:10:57 · 913 阅读 · 2 评论 -
layui弹框回车禁止提交
在form下加一个隐藏的select就解决了<div class="layui-input-inline" style="display: none;"> <select lay-verify="" type="hidden"></select></div>原创 2020-12-29 16:17:07 · 1328 阅读 · 0 评论 -
[Intervention] Ignored attempt to cancel a touchmove event with cancelable=false
swiper报了这个错误,大家都说加touch-action 但是我的还是不好使然后**给body加了ontouchstart** 就好使了 感觉也比之前顺畅了这个操作是进行手机端兼容处理的,防止伪类:active失效。原创 2020-11-04 14:27:26 · 553 阅读 · 0 评论 -
手风琴菜单
HTML<dl class="list_dl"> <dt class="list_dt"> <p>工程车辆</p> <i class="list_dt_icon"></i> </dt> <dd class="list_dd"> <ul>原创 2020-10-14 13:50:13 · 125 阅读 · 3 评论 -
textarea限制字数
现在来说下怎么让大部分IE版本都支持textarea 标签限制字数,同时允许以chorme为内核的浏览器也支持。<textarea rows="5" maxlength="80" onchange="this.value=this.value.substring(0, 80)" onkeydown="this.value=this.value.substring(0, 80)" onkeyup="this.value=this.value.substring(0, 80)" ></te原创 2020-09-09 15:22:54 · 690 阅读 · 0 评论 -
带swiper的选项卡联动切换
**HTML<!DOCTYPE html >!<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-原创 2020-07-29 17:28:47 · 1678 阅读 · 0 评论 -
jq选项卡
<html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> <script src="http://libs.baidu.com/jquery/1.10.2/jq原创 2020-06-09 13:57:46 · 142 阅读 · 0 评论 -
CSS瀑布流
<!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-UA-Compatible" content="ie=edge"> <title>Document&l原创 2020-05-14 14:00:16 · 117 阅读 · 0 评论 -
CSS图片视觉差效果
<!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-UA-Compatible" content="ie=edge"> <title>Do原创 2020-05-14 13:36:07 · 699 阅读 · 0 评论 -
js微信h5页面背景音乐
微信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-UA-Compatible" content="ie=edge"> <scrip原创 2020-05-14 10:09:29 · 885 阅读 · 1 评论 -
可滑动导航栏隐藏滚动条
<!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-UA-Compatible" content="ie=edge"> <title>Do原创 2020-05-11 15:56:12 · 555 阅读 · 0 评论 -
响应式导航栏
HTML:<div class="c-nav"> <div class="container navFlex"> <div class="flexItem"> <img class="logo" src="http://weichai.seetaoism.com/Public/Ho...原创 2020-04-21 16:07:43 · 1138 阅读 · 1 评论 -
div透明,文字不透明
给div:background:rgba(190,190,190,0.5);原创 2020-04-08 16:49:25 · 290 阅读 · 2 评论 -
头部尾部固定,中间可滚动,不遮挡,flex布局
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <style type="text/css"> * { padding: 0; margi...原创 2020-04-07 17:46:49 · 470 阅读 · 0 评论 -
h5唤起ios app
点击下载的时候,将ios详情页需要的参数通过url地址拼接传给他。判断是不是ios应用,用ios给你的schema链接或者universal link链接检测一下。是的话,跳ios app的详情页链接。不是的话,我这里跳了一个空白页,空白页里直接跳转ios给的苹果商店链接。...原创 2020-04-07 16:22:00 · 727 阅读 · 0 评论 -
pdfh5.js 基于pdf.js和jQuery,移动端PDF预览插件,可手势缩放,支持懒加载
pdfh5.js 基于pdf.js和jQuery,移动端PDF预览插件,可手势缩放,支持懒加载转载 2020-01-13 15:33:51 · 1674 阅读 · 2 评论 -
使用onclick()事件以及"this"获取当前标签属性值
通过onclick事件来获取到动态数据中的data属性值在onclick事件的括号里写this,在方法函数里写一个值用来传输,这样就可以获取到想要的值了。原创 2020-01-13 14:56:46 · 4494 阅读 · 1 评论 -
如何在手机上预览本地h5页面
如何让本地的h5界面再手机端访问 前提条件电脑和手机必须连接同一个wifi 或者处于同一个网段1.安装nodeJS环境 http://nodejs.cn/2.在当前所在项目文件夹下输入命令:npm install anywhere -g3.输入命令:anywhere5.打开草料 https://cli.im/6.打开手机扫一下...原创 2019-12-24 10:52:41 · 641 阅读 · 0 评论 -
使用IntersectionObserver让html滚动到可见区域图片懒加载
<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="viewport" content="width=device...原创 2019-11-29 15:48:58 · 170 阅读 · 2 评论 -
点击切换图片并且点击图片可放大查看
html:<div class="form-inline chooseBanShi"> <span><i class="i_red">*</i>选择版式:</span> <select name="pid" id="format_Qi" onChange="document.x1.src=options[selec...原创 2019-11-18 17:43:51 · 1010 阅读 · 0 评论 -
使用wow.js和animate.css滑动页面加载盒子特效
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="../WOW-master/css/libs/animate.css">...原创 2019-10-31 18:05:31 · 166 阅读 · 0 评论 -
刷新页面切换图片
<!DOCTYPE HTML><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>刷新页面切换图片</title> </head> <body> <sc...原创 2019-10-31 16:22:02 · 1043 阅读 · 0 评论 -
列表点击编辑的时候多选删除
在做收藏和消息列表点击编辑进行全选删除和单选删除时,遇到了一个这样的问题:当点击编辑了之后,后面加载出来的列表条目不会渲染上去多选框,也添加不上被选中的状态,这样就导致无法判断是否被选中。请教了一番后,才知道需要把后加载出来的列表先解绑再绑定checked的状态。全选按钮:<input id="all" type="checkbox" class="dr_select" data="a...原创 2019-10-24 13:47:58 · 438 阅读 · 0 评论 -
波浪竖线样式的加载动画
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> <style> * { margin:...原创 2019-07-10 15:27:05 · 519 阅读 · 0 评论 -
打开门样式的加载动画
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打开门样式加载动画</title> <script src="js/jquery.min.js"></script> <style type="text/cs...原创 2019-07-10 15:23:37 · 242 阅读 · 2 评论 -
js点击阅读全文
html<div class="wrap"> <div class="detail_main content_wrap"> {$info['content']|htmlspecialchars_decode} </div> <div class="unfold-field"> <!-- <div class="unfl...原创 2019-07-10 15:16:03 · 2182 阅读 · 0 评论 -
html纯英文或者纯数字自动换行
word-break: break-all; word-wrap: break-word;原创 2019-07-02 10:57:33 · 713 阅读 · 0 评论 -
让一行文字滚动只需用一行代码!
最近做了一个功能是让文字滚动,不管从右向左,还是从左向右滚动,刚开始不知道怎么做,于是有了很多种方法,比如用轮播图,css等等,虽然也可以实现,但是实在是太麻烦了。今晚刚知道了一个标签就可以完成,之前见过,可是忘了。。所以想记录下来。这个标签就是-----↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓&amp;lt;marquee scrollAmount=...原创 2018-12-20 19:04:15 · 1550 阅读 · 0 评论 -
html隐藏溢出
牢记这三个属性的组合: overflow: hidden; text-overflow: ellipsis; white-space: nowrap;原创 2018-12-06 19:53:59 · 5801 阅读 · 0 评论 -
左滑侧边栏
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> <style type="text/css"> ...原创 2019-07-10 15:37:05 · 179 阅读 · 0 评论 -
上滑弹出带遮罩层的盒子
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="js/jquery.min.js"></script> <title></title> <style type="text/css"> ...原创 2019-07-10 15:44:04 · 324 阅读 · 0 评论 -
js上传头像
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="js/jquery.min.js"></script> <title></title> <script> window.onload ...原创 2019-07-10 16:07:54 · 1008 阅读 · 0 评论 -
js倒计时验证码
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.min.js"></script> <style type="text/css"> ...原创 2019-07-10 16:32:59 · 140 阅读 · 0 评论 -
css改变单选框样式
<!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...原创 2019-07-18 14:55:32 · 1178 阅读 · 0 评论 -
鼠标右键浏览器禁止右键查看源代码
document.onkeydown = function () {var e = window.event || arguments[0];if (e.keyCode == 123) {alert(‘请尊重劳动成果!’);return false;} else if ((e.ctrlKey) && (e.shiftKey) && (e.keyCode =...原创 2019-08-09 09:26:25 · 539 阅读 · 0 评论 -
css实现文字倒影
平常我们要实现倒影的效果,一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate。这种方法的缺点是占据空间以及DOM元素过多。 在使用webkit内核的浏览器中(chrome,safari,移动端浏览器),可以使用-webkit-box-reflect属性来实现倒影-webkit-box-reflect: below 1px -webkit-gradient(linear,...原创 2019-08-07 13:13:23 · 2896 阅读 · 0 评论 -
Video标签上面覆盖播放按钮点击播放
最终效果:自定义图片(背景不是poster)。覆盖到视频上,然后点击这个可以 播放。HTML部分:<div class="video-box" > <video id="video" autoplay="autoplay" controls="controls" style="width:100%;height:510px"> <...转载 2019-09-09 10:57:30 · 9151 阅读 · 0 评论