日常常用的CSS&JS技巧

最新推荐文章于 2024-02-03 11:11:40 发布
最新推荐文章于 2024-02-03 11:11:40 发布
阅读量348 收藏
点赞数
分类专栏： 工作总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42514643/article/details/100210286
版权

工作中常用的css技巧，用于后期快速查询，不分先后。

日期处理“2019-10-25”
// 后台返回的此类时间，在IOS环境中是无法处理的
// 因此我们需要把此类时间转换为2019/10/25 才可以
function changeTime(val){
	// 判断传入的时间值是否存在，存在就把中间的-替换成/ 否则就使用当前电脑时间
	val=val?val.replace(/-/g,'/'):new Date();
	return val
}
INPUT 输入框数字键盘（移动端）
<input type="text" 
		name="mobile" 
		placeholder="请输入手机号码" 
		autocomplete="off" 
		pattern="[0-9]*" 
		maxlength="11"
        data-required='true' 
        data-tips="请输入您的手机">
彩色虚线css样式

在这里插入图片描述

xxx-class::before{
	content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
    background-size: 81px;
    }
英文字母换行；显示一行；显示两行，超过两行之后显示省略号（前提有固定宽度）
.text{
	// 英文字母换行
	word-wrap: break-word;

	// 显示一行
	overflow:hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	

	// 两行显示省略号
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	}
禁止用户长按选中文字
	// 禁止用户长按选中文字
	-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
移动端点击时增加active效果
// 需要点击的按钮样式添加
 &:active {
      background: rgba(243, 128, 43, .6);
      color: #fff;
      -webkit-tap-highlight-color: transparent;
    }

//JS中添加
document.body.addEventListener('touchstart', function () {});
fixed布局时技巧
// 防止fixed抖动,在需要的样式中添加
-webkit-transform: translateZ(0);
背景高斯模糊效果
/* 背景朦胧 在需要朦胧的元素上添加此样式*/
.filterBg {
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: blur(10px);
}
文字两端对齐
span{
		display: inline-block;
        text-align: justify;
        text-align-last: justify;
   }
LOADING 转圈HTML+CSS
 <div class="loadingBox" id="loadingBox" style="display: none">
    <div class="spinner">
      <div class="spinner-container container1">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container2">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
      <div class="spinner-container container3">
        <div class="circle1"></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
        <div class="circle4"></div>
      </div>
    </div>
  </div>


// css 样式，采用的less语法
.loadingBox {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.1);
  /* TWEENER - IE 10 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;

  .spinner {
    width: 30px;
    height: 30px;
    position: relative;
    margin-bottom: 1.0rem;

    .spinner-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }

  .container1>div,
  .container2>div,
  .container3>div {
    width: 8px;
    height: 8px;
    background-color: #FE7C04;
    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }

  .container2 {
    -webkit-transform: rotateZ(45deg);
    -ms-transform: rotate(45deg);
    transform: rotateZ(45deg);

    .circle1 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
  }

  .container3 {
    -webkit-transform: rotateZ(90deg);
    -ms-transform: rotate(90deg);
    transform: rotateZ(90deg);

    .circle1 {
      -webkit-animation-delay: -1s;
      animation-delay: -1s;
    }
  }

  .circle1 {
    top: 0;
    left: 0;
  }

  .circle2 {
    top: 0;
    right: 0;
  }

  .circle3 {
    right: 0;
    bottom: 0;
  }

  .circle4 {
    left: 0;
    bottom: 0;
  }

  .container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }

  .container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }

  .container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
  }

  .container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
  }

  .container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
  }

  .container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
  }

  .container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
  }

  .container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
  }

  .container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
  }
}

@-webkit-keyframes bouncedelay {

  0%,
  100%,
  80% {
    -webkit-transform: scale(0);
  }

  40% {
    -webkit-transform: scale(1);
  }
}

@keyframes bouncedelay {

  0%,
  100%,
  80% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }

  40% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}
封装TOAST
/**
 * 显示信息用于请求回调的错误信息显示
 * 需要检查reset.css中是否有tipsBox样式
 * @param {*} str 
 */

function showMsg(str, time) {
  time = time || 1500;
  var timer1 = null,
    timer2 = null;
  // 判断是否已经存在tipsbox元素，如果存在就不用添加了
  var oldtipsbox = document.getElementById('tipsbox');
  if (oldtipsbox != null) {
    clearTimeout(timer1);
    oldtipsbox.getElementsByClassName('tips')[0].innerHTML = str;
    oldtipsbox.style.display = "flex";
    timer1 = window.setTimeout(function () {
      oldtipsbox.style.display = "none";
    }, time)
  } else {
    clearTimeout(timer2);
    var fragment = document.createDocumentFragment();
    var tipsbox = document.createElement('div');
    var tips = document.createElement('div');
    tipsbox.setAttribute("class", "tipsbox");
    tipsbox.setAttribute("id", "tipsbox");
    tips.setAttribute("class", "tips");
    tips.innerHTML = str;
    tipsbox.appendChild(tips);
    fragment.appendChild(tipsbox);
    // 把文档碎片添加到body中
    document.body.appendChild(fragment);
    //  默认显示的时间
    timer2 = window.setTimeout(function () {
      tipsbox.style.display = "none";
    }, time)
  }
};


// CSS样式
.tipsbox {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 90000
}

.tipsbox .tips {
  padding: .4rem .3rem;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 12px;
  color: #fff;
  font-size: .28rem;
  max-width: 6.0rem;
  line-height: .6rem;
  text-align: center
}
godferyZhu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS3超酷日常工作备忘录列表特效
12-13
这是一款使用纯CSS制作的纯CSS3超酷日常工作备忘录列表特效。该特效中没有使用js代码，通过Checkbox技巧来完成交互动作。它可以记录某项日常工作是否完成。整体界面十分时尚大方。
Day 30天-CSS挑战:rocket:-JavaScript开发
05-26
为了提高编码技巧，将有30天的时间使用HTML5和CSS3进行小型日常项目。 这项挑战的灵感来自@MilenaCarecho！ :rocket:30天-CSS挑战:face_with_monocle::face_with_monocle:关于挑战每天将有30天的小型项目使用HTML5和...
css常用技巧
八步赶蝉
07-19 790
1.首先介绍css添加的方法 有四种 a.链接外部样式表 首先需要一个外部的css文件。外部样式表测试文件.css .a{ font-size: 20px; color: blue; background-color: aquamarine; } .b{ font-size: 40px; color: chartreuse; background-color: cornsilk...
常用的css技巧样式
面对疾风吧
06-02 335
下面总结了一些常用又有趣的css技巧，希望大家收藏，以减少查资料的时间。 三角形 最常见的一种形状了。切图，不存在的。 /** 正三角 */ .triangle { width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129, 127) transparent; } /** 倒三角 */ .tria
20个常用的CSS技巧
jarisMA的博客
02-02 296
20个常用的CSS技巧 转载地址 1.黑白图像 这段代码会让你的彩色照片显示为黑白照片 img.desaturate{ filter:grayscale(100%); -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -mz-filter:grayscale(100%);
12个Css常用技巧
高先生的猫
07-10 425
1. 利用css穿透覆盖默认样式 常见发生场景：假如我们需要通过 input，type="file"来上传文件，而这个 input 的默认样式，可以说是非常地丑。所以我们希望通过一张图片，与这个 input 大小一样，位置一致地盖在上面。这个时候，显然，这个时候点击图片，input 是不会起作用的。就是因为 img 隔绝了 click 的穿透，而我们希望的是，这个 img 只是视觉上遮挡了 input 的样式，但是点击的时候还是点击到 input。所以，只要让 img 可穿透即可。 css代码如下...
tricks-by-day:日常的 Web 开发技巧，包括 Javascript、CSS、UI 效果和任何有趣的东西！
05-31
2020-07-05：客户 2020-07-06： 2020-07-07： 2020-07-08：JavaScript 私有字段 2020-07-09： 2020-07-10：
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
10-22
这些实用技巧在日常的JavaScript开发中非常常见，了解并熟练运用它们可以提高代码的灵活性和用户体验。在学习JavaScript的过程中，还可以关注其他相关主题，如切换特效、查找算法、动画效果、错误调试、数据结构与...
Firebug 调试器Web开发者应掌握12个初级使用技巧
12-13
相信很多从事Web开发工作的开发者都听说和使用过Firebug，但可能大部分人还不知道，其实它是一个在网页设计方面功能相当强大的编辑器，它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是Firefox...
一些CSS/JS小技巧
dianchou9307的博客
12-24 107
CSS部分 1、文本框不可点击 .inputDisabled{ background-color: #eee;cursor: not-allowed;} 2、禁止复制粘贴 onpaste="return false" oncontextmenu="return false" oncopy="return false" oncut="return false" ...
CSS实用且常用的10个技巧分享。
xiaoweids的博客
08-07 167
这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。...
css 工作中实用技巧
bingot的博客
02-12 182
记录工作中经常用到的一些东西，不足的希望大家能在评论上补充。直接干 上下左右居中 第一种 //推荐使用 position: absolute; top: 0; left: 0; right: 0; bottom: 0; width:100px; height:100px; margin: auto; 第二种 //不推荐使用 positi...
一些CSS/JS小技巧整合
sainleee的博客
06-06 89
一些CSS和JS小技巧记录
一些js和css的注意事项和小技巧(持续更新)
qq_45279180的博客
02-10 763
一、css部分 1.1.文字排列方向 有点时候我们不希望文字从左往右进行排列如下所示： 这个时候我们就需要使用css的writing-mode属性了,该属性的属性值如下。 horizontal-tb 对于左对齐(ltr)脚本，内容从左到右水平流动。对于右对齐(rtr)脚本，内容从右到左水平流动。下一水平行位于上一行下方。 vertical-rl 对于左对齐(ltr)脚本，内容从上到下垂直流动，下一垂直行位于上一行左侧。对于右对齐(rtr)脚本，内容从下到上垂直流动，下一垂直行位于上一行右侧。 verti
css如何实现文字两端对齐效果
weixin_49054076的博客
03-27 1万+
设置 text-align，并且设置伪元素 after或者 before的样式，伪元素中可以添加width:100%或padding-left:100%都可以实现我们所要的效果。想要实现文字两端对齐效果，可以使用CSS的text-align属性。数字和英文字母则需要使用空格间隔开，再使用上述两种方法之一，就可以实现文字两端对齐了！
css 文字两端对齐
热门推荐
千里之行，始于足下！
01-12 2万+
1、需求是这样的：用div+css实现一个表单，要求表单中，输入框前面的label文字都两端对齐,效果如下: 2、先贴出html代码： <div class="item-box"> <span>姓名：</span> <el-input v-model="name"></el-input> </div> <div class="item-box"> <span>电话号码：</span
css实现文字两端对齐
最新发布
百变鹏仔工作室
02-03 564
可以实现文字两端对齐，但此属性对最后一行是无效的（因此对单行文本也是无效的），要使其对单行文本生效，需要新增一行，使其不再是最后一行。也可以借助一个空标签。标签内的文字将实现两端对齐，标签为一个空标签，用来撑开。标签的宽度，使其达到。
CSS 两行文字两端对齐与字符间距的处理
苏苏就是小苏苏的博客
07-06 2655
CSS 两行文字两端对齐与字符间距的处理
html js css javascript和vue
05-18
HTML、JS、CSS和JavaScript是Web开发中常用的技术栈，而Vue.js则是一种流行的JavaScript框架，用于构建交互式的Web用户界面。下面是它们的简要介绍： - HTML（超文本标记语言）是用于创建网页内容的标准语言，用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值