![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端js,css
记录前端js,css相关知识
itfallrain
勤思,善学,知行,思敏,体健,豁达。
展开
-
三目运算的多目运算技巧(三种及三种以上的状态怎么使用)
1:使用场景,当有人一提到三目运算就会想着用0,1代表男女等的显示问题,只有两种状态值。但你有没有想过当状态不止两种的时候,比如三种及以上的时候,也可以使用三木运算呢?答案是可以。比如常用的vue数据渲染的时候 <div class="BottomRight"> {{val.deviceState==0?"未知":val.deviceState==1?"注册":val.deviceState==2?"注销":""}}</div>...原创 2020-06-19 09:51:05 · 2910 阅读 · 1 评论 -
layei 的iframe层向父层传数据---解决网上parent.$ is not a function报错问题!!!
1从iframe回参给父窗口父窗口隐藏ID<input type='text' id="handle_status" value="" hidden="hidden">父窗口layer.open({ type:2, content: '/role/edit?id='+id, area:['500px', '500px'], success:fu...原创 2019-10-15 16:17:24 · 4850 阅读 · 1 评论 -
springboot +Thymeleaf引入js css img--图片无效的解决办法
今天在springboot上面集成了thymeleaf模板引擎,再引入css,js和图片的时候出现了好多问题,下面就让你们看下有效的解决方式吧1:首先展示项目结构:2:其次是引入的格式<!DOCTYPE html><html lang="en"><html xmlns:th="http://www.thymeleaf.org"><head&...原创 2019-08-27 10:38:11 · 9459 阅读 · 4 评论 -
CSS文本溢出显示省略号
1单行 overflow:hidden; text-overflow:ellipsis; white-space:nowrap效果文本单行溢出…2多行 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-or...原创 2019-01-23 17:41:09 · 2510 阅读 · 0 评论 -
响应式布局判断怎么写?
响应式布局,头部引入的判断设备代码&amp;lt;link rel=&quot;stylesheet&quot; media=&quot;(min-width:750px)&quot; href=&quot;./css/footer.css&quot;&amp;gt;//超过750像素,PC端执行的样式 &amp;lt;link rel=&am原创 2019-01-21 17:45:39 · 625 阅读 · 0 评论 -
input[type=file]去掉“未选择任何文件”带效果图的哦~~~
给你们讲讲我实现的原理吧,那就是利用子绝父相定位,把input标签定到div标签上,这样点击还是input标签,只不过把他隐藏掉了原默认样式图实现方式效果图text.html <div class="surfaceThree">选择文件 <input type="file" title=" "> </div>text.css..原创 2019-01-19 10:11:40 · 6994 阅读 · 1 评论 -
css清除常用标签的默认样式
base.css/** @Author: Itfallrain* @Date: 2019-1-119 14:21:42* @Last Modified by: Itfallrain* @Last Modified time: 2019-1-119 16:22:34*/@charset "UTF-8";/*css 初始化 */html,body,ul,li,o...原创 2019-01-19 09:05:29 · 4853 阅读 · 0 评论 -
box shadow单边阴影两边阴影
box-shadow语法:x轴偏移值 y轴偏移值 模糊半径 阴影半径 || 颜色 insect,其中阴影半径可以为负值,意思是增加或减少指定数值的阴影半径正常阴影 box-shadow: 5px 5px 5px black;阴影半径为负值 box-shadow: 5px 5px 5px -5px black;阴影半径为正值 box-shadow: 5px 5px 5px 5px bla...原创 2019-01-12 18:43:25 · 3439 阅读 · 0 评论 -
Vue怎么判断数组、对象(集合)是否为空、属性是否为空字符传、json字符串,数组,对象的相互转换
1: Vue怎么判断对象是否为空JSON.stringify(evtValue)=='{}'Object.keys(xxxx).length==02:js判断对象是否为空对象的几种方法1.将json对象转化为json字符串,再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");alert(b);//truefor in 循环判断var obj = {};var b = functio原创 2020-06-24 11:24:24 · 31863 阅读 · 0 评论 -
VUE 常规截取和特殊字符之前之后截取
1:平常使用的let str = 'abcdef';// 0 str = str.slice(0);//返回整个字符串 abcdefstr = str.substring(0);//返回整个字符串 abcdefstr = str.substr(0);//返回整个字符串 abcdef// 使用一个参数str = str.slice(2);//截取第二个之后所有的字符 cdefstr = str.substring(2);//截取第二个之后所有的字符 cdefstr = str.subs转载 2020-06-23 16:32:27 · 18756 阅读 · 3 评论 -
layui用table.render加载数据 用table.reload重载里面的数据---解决table.render重新加载闪动的问题
今天在用layui 展示数据的时候,首先想到了table.render这个插件进行数据的展示,因为数据要实时刷新,说到实时刷新,你最低要三秒刷新一次表格的数据吧!!!一开始写了个定时把table.render放到定时函数里面,三秒执行一次函数,那么问题来了,虽然效果是实现了,但这是重新加载表格啊,三秒闪一次,别说是用户了,我都看不下去了,闪的眼疼,就想有没有只让数据重新加载,表格不动。终于功夫不负...原创 2019-10-23 17:29:32 · 27924 阅读 · 32 评论 -
Js实时监听input输入框值变化
<input oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" ><script> // 监听input输入框信息 // Firefox, Google Chrome, Opera, Safari, Internet Exp...原创 2019-10-08 15:01:23 · 3812 阅读 · 0 评论 -
ajax 请求
当接触一项新技术时,首先我们要问自己四个问题,如果这四个问题我们都能学习并理解到位,那么可以说这个新技术你已经完成了初步掌握,下面我们就这四个问题来说ajax应该怎么学习。如果你已经看过我写的JS中ajax的使用教程,相信你对ajax已经有了一个基础了解。那么可以直接看第四部分,以便节约您的时间。一,ajax是什么?AJAX = 异步 JavaScript 和 XML。是一种用于创建快速动态网...转载 2019-09-24 16:23:54 · 86 阅读 · 0 评论 -
程序员用0和1作图
1:独角兽111111111111111111111111111111111111111111111110000111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111000011111111111111111111111111111111111111111111 1111...原创 2019-09-03 17:07:30 · 2037 阅读 · 1 评论 -
flex超出换行属性
flex-wrap: wrap;原创 2019-01-16 15:55:02 · 15389 阅读 · 0 评论 -
用js(hover )+css实现下拉框效果(有效果图)
效果图test.html&amp;lt;div class=&quot;daohang&quot;&amp;gt; &amp;lt;a href=&quot;&quot;&amp;gt;首页&amp;lt;/a&amp;gt; &amp;lt;div class=原创 2019-01-16 12:58:38 · 1695 阅读 · 0 评论 -
纯JS实现tab选项卡切换效果
今天学到的用js写选项卡,有高亮效果,废话不多说,直接上代码吧!!!注意事项:css代码中有一个隐藏其他div的属性, display: none;这个一定要注意,要不然你写的都会显示出来html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...原创 2018-12-18 14:15:12 · 1263 阅读 · 0 评论 -
css选择第一个标签,倒数第二个标签,最后一个标签总结
注意事项:“:”冒号前后不能有空格!!!选择第一个标签例如:span:nth-child(1)选择倒数第二个标签例如:p:nth-last-child(2)选择最后一个标签:例如:p:last-child...原创 2018-12-18 16:00:33 · 33001 阅读 · 0 评论 -
vscode 无法同时打开多个文件? 怎么解决?
问:我每次打开一个新的文件都是覆盖原来打开的文件了, 不会新开一个标签显示… 怎么解决的呢? 答:你勤劳一点就好了,具体怎么做呢?双击打开另一个标签喽!!!你的是不是这样:解决办法:...原创 2018-12-18 18:15:59 · 41022 阅读 · 30 评论 -
登陆弹窗
js代码<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script><script> // 弹窗隐藏 $('.Close').click(function() { $('.newpopup').hide() ...原创 2019-01-10 14:24:26 · 442 阅读 · 0 评论 -
给div加背景图片
注意事项:url引入路径需要加引号:style="background: url('../images/符号 15 – 1.png');background-size:100% 100%;height:600px;"原创 2019-01-17 13:18:27 · 5212 阅读 · 0 评论 -
前端页面布局格式标记
<header>头部</header><nav>导航</nav><section>内容</section><footer>底部</footer>原创 2019-01-12 15:01:50 · 369 阅读 · 0 评论 -
css+js实现下拉框带效果图
test.html<select name="jumpMenu" id="jumpMenu" onchange="MM_jumpMenu('parent',this,0)"> <option value ="https://www.baidu.com/">我们的课程记录</option>原创 2019-01-08 15:06:17 · 445 阅读 · 0 评论 -
margin属性的边距四个方向分开写的两种方式
简单记忆:上,右,下,左(顺时针)margin: 5px 10px 15px 20px;简单记忆:上下,左右margin: 10px 20px;原创 2019-01-09 11:08:48 · 3403 阅读 · 0 评论 -
图片左右点击切换轮播js特效
常用相册图片左右点击切换轮播,可应用在商品详情、汽车展示、相册展示等,jQuery左右按钮切换图片,点击小图缩略图可切换到对应的大图,当缩略图过多时可点击左右按钮控制底部缩略图片左右滚动,进行更多的图片切换。&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&am原创 2019-01-09 18:07:33 · 9295 阅读 · 0 评论 -
css图片和文字对齐
图片和文字居中对齐 display: flex; align-items: center; justify-content: center; vertical-align: middle; ## 效果图原创 2019-01-09 18:46:15 · 8885 阅读 · 0 评论 -
js实现倒计时(天数,小时,分钟,秒)
效果图封装好的js代码,引入一下就可以了,在html中直接调用,简单粗暴使用time.jsfunction TimeDown(id, endDateStr) { //结束时间 var endDate = new Date(endDateStr); //当前时间 var nowDate = new Date(); //相差的总秒数 var to...原创 2019-01-15 11:52:20 · 10235 阅读 · 6 评论 -
用js写点击事件实现类名添加
实现原理:其实就是点击的时候把高变为auto 自适应,点击的时候下面的 height: auto;会覆盖上面的 height: 0.8rem;实现效果:未点击点击:test.html <section> <!-- 全部 --> <div class="main"> ...原创 2019-01-15 16:15:12 · 5829 阅读 · 2 评论 -
写手机端页面引入的单位换算代码
在你的页面直接添加这端代码就可以直接用rem单位来编写手机(移动)端页面了 <script type="text/javascript"> document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px'; </script>...原创 2019-01-21 11:51:03 · 503 阅读 · 0 评论 -
JS表单验证只有第一个IF起作用 怎么解决?
if(条件语句){ return false;}else{ return true;}if(条件语句){ return false;}else{ return true;}if(条件语句){ return false;}else{ return true;}你写的是不是上面这种情况?其实会出现只执...原创 2018-12-01 17:50:19 · 2413 阅读 · 2 评论