文章目录
- 49.将图片转化成base64格式
- 48.获取URL路径中的值参数
- 47.PC端网站在手机模式下打开显示不全的问题
- 46.页面跳转传递对象或数组
- 45.CSS 3.0文字悬停跳动特效
- 44.404背景动画
- 43.终止forEach循环
- 42.乘法精度问题
- 41.解决pc端显示完全,手机端显示不全
- 40.响应式网页样式格式化
- 39.非响应式手机网页样式格式化
- 38.判断设备类型
- 37.幽灵按钮
- 36.jquery实现文字上下滚动效果
- 35.移动端弹窗公告
- 34.禁止移动端页面缩放
- 33.微信浏览器样式格式style.css(项目已rem为单位并非px)
- 32.JS判断当前浏览器是不是微信浏览器
- 31.禁止移动端触摸滚动
- 30.解决ios端从子页history.back()返回后不重新加载ready
- 29.选取本地图片并上传
- 28.localStorage和sessionStorage存取数据
- 27.Cookie存取数据
- 26.调用函数里面的函数
- 25.document.location.href的传参和取值
- 24.iframe在父页传值给子页
- 23.对象数组排序
- 22.数组排序
- 21.年月日大小比较
- 20.动态修改animation的keyframes 样式(Message 消息提示)
- 19.图片手风琴
- 18.轮播图
- 17.百度地图点击获取坐标
- 16.百度地图根据输入的位置获取坐标
- 15.下单侧边弹窗
- 14.动态添加宽度
- 13.滚动条的样式修改
- 12.常用正则表达式
- 11.JS中获取输入框的值
- 10.JS中禁止HTML的滚动
- 9.JS合并数组
- 8.点击按钮背景回弹动画
- 7.border-radius实现半椭圆
- 6.transparent实现三角形
- 5.实现border-bottom由中间向两边的渐变效果
- 4.JS中动态修改backgroundSize和backgroundPosition
- 3.去掉时间的冒号:和横杆-
- 2.让两个容器的滚动条同步
- 1.div溢出部分可滚动查看并且不显示滚动条
- css样式笔记
49.将图片转化成base64格式
写法一:
/**
* https图片转化成base64
*/
const getBase64 = (url, callback) => {
let img = new Image(), dataURL = '';
img.src = url + "?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存,浏览器会报错;
img.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
img.onload = function () { //要先确保图片完整获取到,这是个异步事件
let canvas = document.createElement("canvas"), //创建canvas元素
width = img.width, //确保canvas的尺寸和图片一样
height = img.height;
canvas.width = width;
canvas.height = height;
canvas.getContext("2d").drawImage(img, 0, 0, width, height); //将图片绘制到canvas中
dataURL = canvas.toDataURL('image/png'); //转换图片为dataURL
callback ? callback(dataURL) : null; //调用回调函数
};
}
// let imgSrc = "./1.jpg"; // 本地路径
let imgSrc = "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"; // https图片服务响应要设置了access-control-allow-origin: * 才不会报跨域的错误
getBase64(imgSrc, (dataURL) => {
console.log(dataURL)
})
写法二:
// let imgSrc = "./1.jpg"; // 本地路径
let imgSrc = "https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"; // https图片服务响应要设置了access-control-allow-origin: * 才不会报跨域的错误
function getBase64Image(img) {
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
let ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
let dataURL = canvas.toDataURL("image/" + ext);
return dataURL;
}
let image = new Image();
image.src = imgSrc + "?v=" + Math.random(); // 处理缓存,fix缓存bug,有缓存,浏览器会报错;
image.setAttribute("crossOrigin", 'Anonymous') // 解决控制台跨域报错的问题
image.onload = function () {
let base64 = getBase64Image(image);
console.log(base64);
}
48.获取URL路径中的值参数
获取某个参数:
// 获取URL路径的某个参数
const getPathParamstr = (name) => {
const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
let r = null;
// vue可能拿不到search的参数,可以取href的
if (window.location.search == null || window.location.search == '') {
const params = window.location.href.split("?");
const pram = params[params.length - 1];
r = pram.match(reg);
} else {
r = window.location.search.slice(1).match(reg);
}
if (r != null) return decodeURIComponent(r[2]);
return '';
}
获取全部参数:
// 获取URL路径的全部参数
const getPathParams = () => {
let r = null;
// vue可能拿不到search的参数,可以去href看看
if (window.location.search == null || window.location.search == '') {
const params = window.location.href.split("?");
r = pram;
} else {
r = window.location.search.slice(1);
}
let arr = r.split('&')
let params = {}
for (var i = 0; i < arr.length; i++) {
params[arr[i].split('=')[0]] = decodeURIComponent(arr[i].split('=')[1])
}
return params
}
47.PC端网站在手机模式下打开显示不全的问题
<meta name="viewport" content="width=device-width, initial-scale=0.3, maximum-scale=1, minimum-scale=0.3">
46.页面跳转传递对象或数组
var data = {
a:'1',
b:'2'
}
//跳转时转化
url: `./page?data=${encodeURIComponent(JSON.stringify(data))}`
//接受后转会
JSON.parse(decodeURIComponent(options.data))
45.CSS 3.0文字悬停跳动特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3.0文字悬停跳动特效</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
.loader {
position: relative;
}
.loader span {
position: relative;
font-size: 2em;
color: #fff;
display: inline-block;
text-transform: uppercase;
animation: animate 2s ease-in-out infinite;
animation-delay: calc(0.1s * var(--i));
animation-play-state: paused;
}
.loader:hover span {
animation-play-state: running;
}
@keyframes animate {
0%,
40%,
100% {
transform: translateY(0);
}
20% {
transform: translateY(-50px);
}
}
</style>
</head>
<body>
<div class="loader">
<span style="--i:1;">w</span>
<span style="--i:2;">e</span>
<span style="--i:3;">i</span>
<span style="--i:4;">a</span>
<span style="--i:5;">n</span>
<span style="--i:6;">l</span>
</div>
</body>
</html>
44.404背景动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>404</title>
</head>
<style>
body {
margin: 0;
padding: 0;
display: -webkit-box;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
flex-flow: row wrap;
align-content: center;
-webkit-box-pack: center;
justify-content: center;
}
div {
width: 100%;
text-align: center;
}
.number {
margin: 100px 0 0 0;
background: #fff;
position: relative;
font: 900 30vmin 'Consolas';
letter-spacing: 5vmin;
text-shadow: 2px -1px 0 #000, 4px -2px 0 #0a0a0a, 6px -3px 0 #0f0f0f, 8px -4px 0 #141414, 10px -5px 0 #1a1a1a, 12px -6px 0 #1f1f1f, 14px -7px 0 #242424, 16px -8px 0 #292929;
}
.number::before {
background-color: #673ab7;
background-image: radial-gradient(closest-side at 50% 50%, #ffc107 100%, rgba(0, 0, 0, 0)), radial-gradient(closest-side at 50% 50%, #e91e63 100%, rgba(0, 0, 0, 0));
background-repeat: repeat-x;
background-size: 40vmin 40vmin;
background-position: -100vmin 20vmin, 100vmin -25vmin;
width: 100%;
height: 100%;
mix-blend-mode: screen;
-webkit-animation: moving 10s linear infinite both;
animation: moving 10s linear infinite both;
display: block;
position: absolute;
content: "";
}
@-webkit-keyframes moving {
to {
background-position: 100vmin 20vmin, -100vmin -25vmin;
}
}
@keyframes moving {
to {
background-position: 100vmin 20vmin, -100vmin -25vmin;
}
}
</style>
<body>
<div class="number">404</div>
</body>
</html>
43.终止forEach循环
try {
[1, 2, 3].forEach((e) => {
if (e == 2) {
throw Error('终止循环');
}
console.log(e)
})
} catch (e) {
console.log(e.message)
}
42.乘法精度问题
7*0.8 js计算的结果是5.6000000000000005,而不是5.6
function multiply(a, b) {
var aDec = a.toString().split('.')[1] || '';
var bDec = b.toString().split('.')[1] || '';
var fix = aDec.length + bDec.length;
return (a * b).toFixed(fix);
}
41.解决pc端显示完全,手机端显示不全
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3, maxmum-scale=1.0, minimum-scale=0.3">
40.响应式网页样式格式化
用两套样式,pc端用px作为单位,wap端用rem作为单位,以iPad的768px为分界点
<!-- pc -->
<link rel="stylesheet" type="text/css" href="./css/index.css" media="(min-width:768px)">
<!-- wap -->
<link rel="stylesheet" type="text/css" href="./css/index-wap.css" media="(max-width:768px)">
//封装响应式像素方法,初始化单位,实现手机端1rem=100px
function responsivePX() {
//获取页面的宽度
var deviceWidth = document.documentElement.clientWidth;
// console.log(deviceWidth)
//如果页面大于750,即px端的页面,则把html的像素锁死在100px
if (deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
}
// 第一次初始化像素大小
responsivePX();
window.onresize = function() {
// 监听窗口二次刷新像素大小
responsivePX();
};
39.非响应式手机网页样式格式化
设计稿按750,1rem=100px
//初始单位,1rem=100px;
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
window.onresize = function () {
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 750) deviceWidth = 750;
document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
};
38.判断设备类型
<script type="text/javascript">
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
// console.log("移动端")
}else{
// console.log("PC端")
}
}
browserRedirect();
</script>
37.幽灵按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幽灵按钮</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
.box {
background-color: #333;
width: 1000px;
height: 600px;
display: flex;
justify-content: center;
align-items: center;
}
.box .button {
display: flex;
justify-content: start;
align-items: center;
width: 180px;
height: 50px;
border: 2px solid rgba(255, 255, 255, 0.8);
color: #2dcb70;
font-size: 18px;
font-weight: 700;
padding: 0 0 0 20px;
box-sizing: border-box;
text-decoration: none;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
position: relative;
}
.box .button .arrows {
font-size: 26px;
transform:scale(1.2,2);
margin-left: 30px;
transition: 0.4s ease;
}
.box .button:hover {
border: 2px solid rgba(255, 255, 255, 1);
}
.box .button:hover .arrows {
margin-left: 45px;
}
.box .button .line {
position: absolute;
background-color: none;
transition: 0.4s ease;
-webkit-transition: 0.4s ease;
}
.box .button .line-top {
width: 0;
height: 2px;
left: -100%;
top: -2px;
}
.box .button:hover .line-top {
width: 180px;
background-color: #fff;
left: -2px;
top: -2px;
}
.box .button .line-left {
width: 2px;
height: 0;
bottom: -100%;
left: -2px;
}
.box .button:hover .line-left {
height: 50px;
background-color: #fff;
left: -2px;
bottom: -2px;
}
.box .button .line-right {
width: 2px;
height: 0;
background-color: #fff;
top: -100%;
right: -2px;
}
.box .button:hover .line-right {
height: 50px;
background-color: #fff;
top: -2px;
right: -2px;
}
.box .button .line-bottom {
width: 0;
height: 2px;
right: -100%;
bottom: -2px;
}
.box .button:hover .line-bottom {
width: 180px;
background-color: #fff;
right: -2px;
bottom: -2px;
}
</style>
<body>
<div class="box">
<a href="#" class="button">
<p>幽灵按钮</p>
<p class="arrows">→</p>
<span class="line line-top"></span>
<span class="line line-left"></span>
<span class="line line-right"></span>
<span class="line line-bottom"></span>
</a>
</div>
</body>
</html>
36.jquery实现文字上下滚动效果
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jquery实现文字上下滚动效果</title>
</head>
<style>
body,
ul {
margin: 0;
}
.column {
background-color: pink;
height: 100px;
line-height: 100px;
overflow: hidden;
}
</style>
<body>
<div class="column" id="news">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script language="javascript">
$(function () {
setInterval(() => {
$("#news").find('ul').animate({
marginTop: '-100px'
}, 500, function () {
$(this).css({ marginTop: "0px" });
//获取第一个li节点
var li = $("ul").children().first().clone();
//将拷贝的第一个节点插入最后面
$("ul li:last").after(li);
//清理掉第一个节点
$("ul li:first").remove();
})
}, 2500);
})
</script>
</html>
35.移动端弹窗公告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹窗公告</title>
</head>
<style>
body,
html {
font-size: 62.5%;
height: 100%;
padding: 0;
margin: 0;
background-color: #FFFFFF;
font-family: 'Microsoft YaHei', arial, sans-serif, 'Droid Sans Fallback';
}
.popover-mask-layer {
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
z-index: 1002;
display: none;
}
.announcement-popup {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
z-index: 1003;
animation: openAnnouncementPopup 1s;
}
/* 打开公告动画 */
@keyframes openAnnouncementPopup {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
/* 关闭公告动画 */
@keyframes closeAnnouncementPopup {
from {
transform: scale(1);
}
to {
transform: scale(0);
}
}
.announcement-popup .content {
width: 75vw;
position: relative;
}
.close-btn img {
width: 2rem;
height: 2rem;
position: absolute;
top: -2.5rem;
right: -2.5rem;
border: 1px solid white;
border-radius: 50%;
padding: 0.4rem;
background-color: rgba(0, 0, 0, 0.3);
display: none;
}
.announcement-img {
width: 75vw;
}
.announcement-img img {
width: 100%;
}
</style>
<body>
<!-- 公告弹窗遮罩层 -->
<div id="PopoverMaskLayer" class="popover-mask-layer"></div>
<!-- 公告弹窗 -->
<div id="AnnouncementPopup" class="announcement-popup">
<div class="content">
<div class="close-btn" onclick="closeAnnouncementPopup()">
<img id="AloseBtn" src="http://photogz.photo.store.qq.com/psc?/V14ZaBeY40XWC8/zkoezU7GGNbZGOF.DPhgQZjV2a5npNMM5D47K1jMLBHO3ccXXkEwsTHa*69Gi8pC21IGDd.1QNtNWV6qa3LiG*rcxILsCtRzD7P0jdYffdQ!/b&bo=QABAAEAAQAADGTw!&rf=viewer_4"
alt="">
</div>
<div class="announcement-img">
<img id="AnnouncementImg"
src="http://m.qpic.cn/psc?/V14ZaBeY40XWC8/BbSbWrmEw8nJ9LYcvxlBA0J8rkIkYFf9bHvROv0OdwrI0uFWFlLSmxfR*IcRSO3Tii1aQYbaZ.PTHHvTH21LXQ!!/b&bo=LwF2AS8BdgECCS0!&rf=viewer_4"
alt="">
</div>
</div>
</div>
</body>
<script>
document.getElementById('AnnouncementImg').onload = () => {
// 开启通告弹窗
document.getElementById('PopoverMaskLayer').style.display = 'block';
document.getElementById('AnnouncementPopup').style.display = 'flex';
setTimeout(()=>{
document.getElementById('AloseBtn').style.display = 'block';
},1400)
// 禁止页面触摸滚动
document.getElementById('AnnouncementPopup').ontouchmove = function (event) {
event.preventDefault();
}
}
// 关闭通告弹窗
function closeAnnouncementPopup() {
document.getElementById('PopoverMaskLayer').style.display = 'none';
document.getElementById('AnnouncementPopup').style.animation = 'closeAnnouncementPopup 0.3s';
setTimeout(() => {
document.getElementById('AnnouncementPopup').style.display = 'none';
}, 200)
}
</script>
</html>
34.禁止移动端页面缩放
<meta name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
33.微信浏览器样式格式style.css(项目已rem为单位并非px)
body, html {
padding: 0;
margin: 0;
background-color: #FFFFFF;
overflow-x: hidden;
}
/* 取消wap网页的滚动条,pc端去掉 */
body::-webkit-scrollbar {
display: none;
}
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img {
margin: 0;
padding: 0;
border: medium none;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
* {
box-sizing: border-box;
}
em {
font-style: normal;
}
/*重置列表元素*/
ul, li {
list-style: none;
}
/*重置超链接元素*/
a {
text-decoration: none;
color: #333333;
}
a:hover {
text-decoration: none;
}
/*重置图片元素*/
img {
border: 0px;
vertical-align: middle;
}
/*重置表格元素*/
table {
border-collapse: collapse;
border-spacing: 0;
}
input {
outline: medium;
}
32.JS判断当前浏览器是不是微信浏览器
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
if (isWeixin) {
console.log('微信浏览器')
} else {
console.log('非微信浏览器')
}
31.禁止移动端触摸滚动
在浏览器禁止页面滚动document.body.style.overflow = 'hidden';
是没问题的但是真机测试时使用ios设备时并不会生效,所以需要用ontouchmove 来处理,使用的话看下面弹窗的列子。
提示:弹窗最外层的div宽度高度都沾满是有意义的,因为只有禁用了整个弹窗,这样的好处是即使关闭了弹窗也不会禁用到弹窗底下的内容滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
height: 150vh;
}
/* 确定取消按钮弹窗 */
.the-cover-layer {
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
z-index: 5000;
display: none;
}
.custom-popup {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 5001;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
.custom-popup .content {
width: 80vw;
height: 38vw;
text-align: center;
border-radius: 0.5rem;
background-color: #fff;
margin-bottom: 10vh;
}
.custom-popup .title {
height: 10vw;
line-height: 14vw;
font-size: 1.44rem;
}
.custom-popup .code {
height: 14vw;
font-size: 1.28rem;
color: #999;
border-bottom: 1px solid #ddd;
word-break: break-all;
padding: 2vw 2vw 0 2vw;
box-sizing: border-box;
}
.custom-popup .btn {
display: flex;
height: 14vw;
line-height: 14vw;
font-size: 1.44rem;
text-align: center;
}
.custom-popup .cancel-btn {
height: 14vw;
width: 50%;
line-height: 14vw;
font-size: 1.44rem;
color: #333;
border-right: 1px solid #ddd;
}
.custom-popup .affirm-btn {
height: 14vw;
width: 50%;
line-height: 14vw;
font-size: 1.44rem;
color: #576B95;
}
</style>
<body>
<div onclick="openPopup()">点击打开弹窗</div>
<!-- 弹窗遮掩层 -->
<div id="TheCoverLayer" class="the-cover-layer"></div>
<!-- 优惠券订单弹窗 -->
<div id="Popup" class="custom-popup">
<div class="content">
<div class="title">标题</div>
<div class="code">您确定?</div>
<div class="btn">
<div onclick="popupCancel()" class="cancel-btn">取消</div>
<div onclick="popupAffirm()" class="affirm-btn">确定</div>
</div>
</div>
</div>
</body>
<script>
// 打开弹窗
var popupCancel = function () { };
var popupAffirm = function () { };
function openPopup() {
// 打开弹窗
document.getElementById('Popup').style.display = 'flex';
document.getElementById('TheCoverLayer').style.display = 'block';
// 禁止触摸滚动页面
document.getElementById('Popup').ontouchmove = function (event) {
event.preventDefault();
}
//弹窗确定按钮
function myPopupAffirm() {
// 关闭弹窗
document.getElementById('Popup').style.display = 'none';
document.getElementById('TheCoverLayer').style.display = 'none';
}
popupAffirm = myPopupAffirm;
//弹窗取消按钮
function myPopupCancel() {
// 关闭弹窗
document.getElementById('Popup').style.display = 'none';
document.getElementById('TheCoverLayer').style.display = 'none';
}
popupCancel = myPopupCancel;
}
</script>
</html>
30.解决ios端从子页history.back()返回后不重新加载ready
// 解决ios端从子页history.back()返回后不重新加载ready
$(function () {
var isPageHide = false;
window.addEventListener('pageshow', function () {
if (isPageHide) {
window.location.reload();
}
});
window.addEventListener('pagehide', function () {
isPageHide = true;
});
})
29.选取本地图片并上传
注意:ajax请求是一定要带上processData: false和contentType: false这两个参数,否则报错
<div>
<input type="file" id="selectFile" onchange="selectFile(this)">
<div class="upload-attachment-btn">上传图片</div>
</div>
// 上传图片
function selectFile(e) {
//获取图片名称
//let files = e.files;
//console.log(files)
//console.log(e.files[0])
var file = e.files[0]//此时的file便是选择图片后返回的没压缩的图片
var formData = new FormData();//根据后端的需求,通过FormData构造函数创建一个空对象
formData.append("DevIcon", file)//DevIcon为后端规定的取数据时的名字
// console.log(formData.get("DevIcon"))
//用ajax请求发图片传给后端,
$.ajax({
url: '',
data: formData,
type: 'POST',
processData: false,// 不要去处理发送的数据
contentType: false,// 不要去设置Content-Type请求头
cache: false,//上传文件不需要缓存
async: false,
success: function (res) {
//console.log(res)
},
});
}
另外还可以用FileReader对象的readAsDataURL()方法将图片压缩成base64位路径,这样HTML就可以显示了
// 图片压缩
function selectFile(e) {
// //获取图片名称
// // let files = e.files;
// // console.log(files)
// console.log(e.files[0])
var file = e.files[0]
var reader = new FileReader();
reader.onload = function (e) {
var LocalImage = e.target.result;
//此时的LocalImage 图片路径便可以放到img标签的src进行显示了
console.log(LocalImage)
};
reader.readAsDataURL(file);
}
28.localStorage和sessionStorage存取数据
两者都会存到本地,localStorage存储时效永久,除非手动清理缓存;sessionStorage存储时效为浏览器窗口未关闭
//保存数据语法:
localStorage.setItem("name", "weianl");
//读取数据语法:
var name = localStorage.getItem("name")
console.log(name) //weianl
//删除数据语法:
localStorage.removeItem("name");
//保存数据语法:
sessionStorage.setItem("name", "weianl");
//读取数据语法:
var name = sessionStorage.getItem("name")
console.log(name) //weianl
//删除指定键的数据语法:
sessionStorage.removeItem("name");
//删除所有数据
sessionStorage.clear();
如果要存的是JavaScript 对象,要先转换为字符串,使用时才转成对象,不然你会发现打印的大小为:[object Object]
var res = {a:1,b:2}
localStorage.setItem("UserJson", JSON.stringify(res));
// 获取用户基本信息:
var UserJson = JSON.parse(localStorage.getItem("UserJson"))
console.log(UserJson)//{a: 1, b: 2}
27.Cookie存取数据
cookie:设置的cookie过期时间前一直有效,即使窗口和浏览器关闭
// 设置Cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
// console.log(d)
// console.log(d.getTime())
d.setTime(d.getTime() + (exdays * 60 * 1000));
// console.log(d)
var expires = "expires=" + d.toGMTString();
// console.log(expires)
document.cookie = cname + "=" + cvalue + "; " + expires;
}
// 获取Cookie
function getCookie(key) {
if (document.cookie.length > 0) {
c_start = document.cookie.indexOf(key + "=");
if (c_start != -1) {
c_start = c_start + key.length + 1;
c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) {
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
// 设置cookie,1表示有效期为1分钟
setCookie("name", "weianl",1);
//获取cookie
console.log(getCookie("name"));//weianl
26.调用函数里面的函数
//定义一个变量名
var child;
function father() {
var a = 7;
function childInterior() {
var b = 27;
console.log(b);
}
child = childInterior;
console.log(a);
}
//先调用外部函数
father();//7
//再调用内部函数
child();//27
25.document.location.href的传参和取值
父页传参
document.location.href = './index-goods-detail.html?id=' + 1 + '&name=' + 'hello';
子页接收参数
var url = location.search //获取url中"?"符后的字串
console.log(url) //?id=1&name=hello
var returnedObj = new Object()
// 判断是否有返回值
if (url.indexOf('?') != -1) {
var str = url.substr(1)
console.log(str)//id=1&name=hello
var strs = str.split('&')
console.log(strs) //["id=1", "name=hello"]
for (var i = 0; i < strs.length; i++) {
returnedObj[strs[i].split('=')[0]] = strs[i].split('=')[1]
}
console.log(returnedObj) //此时的值就是我们需要的参数{id: "1", name: "hello"};
}
24.iframe在父页传值给子页
(注意,只有在浏览器环境里面使用,如果是微信内置网站,是不生效的,要用cookie做标记,且不能放到window.onload里)
父页
<!-- 底部导航 -->
<footer class="footer-item">
<iframe id="frameID" src="/footer.html" frameborder="0"></iframe>
</footer>
<script type="text/javascript">
var frame = document.getElementById('frameID');
frame.contentWindow.postMessage('你好!');
</script>
子页
<script type="text/javascript">
// //监听父页传过来的Message值
window.addEventListener('message', function (event) {
console.log(event.data);//你好!
});
</script>
23.对象数组排序
//对象数组排序
var arr = [
{name:'123',num:0},
{name:'321',num:17},
{name:'1234',num:7},
{name:'567',num:27}
];
function compare(property){
return function(a,b){
var value1 = a[property];
var value2 = b[property];
return value1 - value2;//降序为value2 - value1
}
}
arr.sort(compare('num'))
// arr = [
// { name: '123', num: 0 },
// { name: '1234', num: 7 },
// { name: '321', num: 17 },
// { name: '567', num: 27 }
// ];
22.数组排序
let Arr = [1, 100, 30, 20, 50, 40]
Arr.sort() //只能排序0-9以内的数组 结果[1, 100, 20, 30, 40, 50]
Arr.sort((a, b) => a - b) //返回正数则a排列在b之前,返回负数则b排列在a之前
console.log(Arr) //[1, 20, 30, 40, 50, 100]
//挂载原型
Array.prototype.MySort = function() {
return this.sort((a, b) => a - b)
}
let Arr = [1, 100, 30, 20, 50, 40]
Arr.MySort() //调用
console.log(Arr) // [1, 20, 30, 40, 50, 100]
21.年月日大小比较
//最新公告时间范围:2020年1月23日-2020年1月30日
let startTime = '2020-1-22 0:00:00';
let endTime = '2020-1-31 9:00:00';
// 将字符串时间转换成时间戳
let startTimestamp = new Date(startTime).getTime()
console.log(startTimestamp)
let endTimestamp = new Date(endTime).getTime()
console.log(endTimestamp)
// 当前时间的时间戳
let nowTimestamp = new Date().getTime();
console.log(nowTimestamp)
if (nowTimestamp >= startTimestamp && nowTimestamp < endTimestamp) {
console.log('在时间范围内')
}
20.动态修改animation的keyframes 样式(Message 消息提示)
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动态修改keyframes</title>
<style>
.popUpWindows {
width: 500px;
height: 80px;
line-height: 80px;
padding:0 20px;
background: #fff;
position: absolute;
animation: myfirst 4s;
left: 50%;
top: -100px;
margin-left: -250px;
color: #666;
font-weight: 800;
font-size: 20px;
box-shadow: 0px 0px 4px #999;
border-radius: 10px;
display: none;
}
.clickPopUpWindows {
height: 100px;
line-height: 100px;
width: 200px;
text-align: center;
color: snow;
background: springgreen;
cursor: pointer;
}
/* 默认动画样式 */
@keyframes myfirst {
0% {
top: -100px;
}
25% {
top: 50px;
}
50% {
top: 50px;
}
75% {
top: 50px;
}
100% {
top: -100px;
}
}
</style>
</head>
<body>
<p><b>注意:</b> 该实例在 Internet Explorer 9 及更早 IE 版本是无效的。</p>
<div class="popUpWindows">这是一个弹窗</div>
<div class="clickPopUpWindows" onclick="ClickPopUpWindows()">弹出窗口</div>
</body>
<script>
function ClickPopUpWindows() {
var popUpWindows = document.querySelector(".popUpWindows");
//设置display的block和none可以让动画执行多次
popUpWindows.style.display = "block";
// console.log(popUpWindows)
var mykeyframes = document.styleSheets[0];
// console.log(mykeyframes)
//清除之前写入的动画样式
mykeyframes.deleteRule(2);
console.log(mykeyframes);
//在原先的位置插入新的的动画样式
mykeyframes.insertRule(
"@keyframes myfirst{"
+ "0%{top:-100px; background: #FFFFFF;}"
+ "10%{top:50px; background: #FFFFFF;}"
+ "25%{top:50px; background: #F0F9EB;}"
+ "50%{top:50px; background: #FDF6EC;}"
+ "90%{top:50px; background: #FEF0F0;}"
+ "100%{top:-100px; background: #FFFFFF;}"
, 2
);
window.setTimeout(() => {
popUpWindows.style.display = "none";
}, 4000)
}
</script>
</html>
19.图片手风琴
<!doctype html>
<html>
<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>jQuery手风琴特效</title>
<script type="text/javascript" src="http://tangjiusheng.com/skin/default/js/jquery-1.7.2.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 1210px;
height: 400px;
margin: 150px auto;
padding: 4px;
border: 1px solid #ccc;
box-sizing: border-box;
overflow: hidden;
}
.box .slide {
width: 200px;
float: left;
cursor: pointer;
transition: 1.5s;
}
.box .slide img {
width: 600px;
height: 400px;
}
.box .on {
width: 600px;
}
</style>
</head>
<body>
<div class="box">
<div class="slide "><img src="./img/1.jpg" /></div>
<div class="slide "><img src="./img/3.jpg" /></div>
<div class="slide "><img src="./img/2.jpg" /></div>
<div class="slide "><img src="./img/1.jpg" /></div>
</div>
</body>
<script type="text/javascript">
$(function () {
$(".slide").hover(function () {
$(this).stop().addClass("on").siblings().removeClass("on");
});
});
</script>
</html>
18.轮播图
<!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</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
div {
width: 500px;
height: 300px;
position: relative;
box-sizing: border-box;
}
.carousel li {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity .3s;
/* 切换图片时的过度效果 */
}
.carousel li a img {
width: 500px;
height: 300px;
}
.carousel .selection {
/* 显示的图片需要的类 */
opacity: 1;
z-index: 10;
}
.prev,
.next {
/* 左右箭头的样式 */
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
line-height: 50px;
background: white;
color: #aaa;
border: 1px solid #bbb;
border-radius: 50%;
opacity: .3;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 101;
cursor: pointer;
user-select: none;
}
.prev:hover,
.next:hover {
opacity: .8;
}
.prev {
left: 20px;
}
.next {
right: 20px;
}
.circle {
position: absolute;
height: 8px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
bottom: 20px;
}
.circle li {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(180, 180, 180, .3);
border: 1px solid transparent;
float: left;
margin-left: 10px;
cursor: pointer;
}
.circle .current {
/* 选中小点的样式 */
background: rgba(180, 180, 180, .8);
border: 1px solid rgb(50, 50, 50);
}
</style>
<body>
<div>
<ul class="carousel">
<li class="selection"><a href="#1"><img src="./img/1.jpg" alt=""></a></li>
<li><a href="#2"><img src="./img/2.jpg" alt=""></a></li>
<li><a href="#3"><img src="./img/3.jpg" alt=""></a></li>
</ul>
<div class="prev">
< </div> <div class="next"> >
</div>
<ul class="circle">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
<script>
var currentIndex = 0;//当前图片的索引
var id;
var len = document.querySelector('.carousel').childElementCount;//得到ul下面li的个数
function carousel(index) {//建一个函数,用来提供一个索引然后切换到索引对应的图片
if (currentIndex === len) {//判断一下,当前图片索引是否等于li的个数,因为当前索引是从0开始的,所以总数的值是没有的
currentIndex = index = 0
}
if (currentIndex < 0) {
currentIndex = index = len - 1;
}
document.querySelector('.current').className = '';//将页面上有选中样式的小点的样式清空
document.querySelector('.circle li:nth-child(' + (index + 1) + ')').className = 'current'//根据索引来控制那个小点是显示状态
document.querySelector('.selection').className = '';//将页面上有选中样式的图片的样式清空
document.querySelector('.carousel li:nth-child(' + (index + 1) + ')').className = 'selection'//根据索引来控制那张图片显示
}
function prev() {//后退函数
currentIndex--;//当前索引减1
carousel(currentIndex) //调用carousel函数
}
function next() {//前进函数
currentIndex++;//当前索引加1
carousel(currentIndex) //调用carousel函数
}
var lis = document.querySelectorAll('.circle li');//得到页面上的所有小点
for (var i = 0; i < lis.length; i++) {//for循环遍历
lis[i].index = i;//将i值先保存一下
lis[i].onclick = function () {//
currentIndex = this.index
carousel(currentIndex);
}
}
function auto() {//自动切换
id = setInterval(next, 1000)//间隔函数,每一秒调用一次前进函数
}
function stop() {
clearInterval(id)
}
auto();
document.querySelector('.prev').onclick = prev//后退按钮的点击事件
document.querySelector('.next').onclick = next//前进按钮的点击事件
document.querySelector('div').onmouseover = stop//div的鼠标移入事件
document.querySelector('div').onmouseout = auto//div的鼠标移出事件
</script>
</body>
</html>
17.百度地图点击获取坐标
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
<!-- 注意修改钥匙 -->
<!-- 仅展示用,无key -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<!-- 正确格式 -->
<!-- <script type="text/javascript"
src="https://api.map.baidu.com/api?v=2.0&ak=换成你的钥匙&__ec_v__=20190126"></script> -->
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");// 创建地图实例
var point = new BMap.Point(121.479048, 31.240008);// 创建点坐标
map.centerAndZoom(point, 15);// 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();// 设置地图可缩放大小
map.addEventListener("click", function (e) {
//获取地图红标数组
var allOverlay = map.getOverlays();
//清空红标
if (allOverlay !== "") {
for (var i = 0; i < allOverlay.length; i++) {
map.removeOverlay(allOverlay[i]);
}
}
//点击地图后的新坐标
point = new BMap.Point(e.point.lng, e.point.lat);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker);
window.setTimeout(()=>{
alert(e.point.lng + "," + e.point.lat);
},500)
map.panTo(new BMap.Point(e.point.lng, e.point.lat));//把点击的点设置为地图中心点
});
function myFun(result) {
var cityName = result.name;
map.setCenter(cityName);
// alert(cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun);
// map.getCenter().lng + "," + map.getCenter().lat //获取当前地图中心点 的经纬度坐标值
// map.getZoom() //获取当前地图的缩放级别
</script>
</html>
16.百度地图根据输入的位置获取坐标
调用LocalSearch方法会返回一串obj,里边有个数组,取的是匹配最接近的下标0的坐标,当然肯定会有搜索空的时候,呵呵。
<html>
<head>
<title>根据地址查询经纬度</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 注意修改钥匙 -->
<!-- 仅展示用,无key -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
<!-- 正确格式 -->
<!-- <script type="text/javascript"
src="https://api.map.baidu.com/api?v=2.0&ak=换成你的钥匙&__ec_v__=20190126"></script> -->
</head>
<body style="background:#f9f9f9; margin:0 auto">
<div style="width:730px;margin:30px auto;">要查询的地址:<input id="address" type="text" value="北京天安门"
style="margin-right:50px;" />
<input type="button" value="查询" onclick="searchByStationName();" />
<div id="container"></div>
</div>
</body>
<script type="text/javascript">
var map = new BMap.Map("container");
var localSearch = new BMap.LocalSearch(map);
function searchByStationName() {
var keyword = document.getElementById("address").value;
localSearch.setSearchCompleteCallback(function (searchResult) {
var lnglatArr = [];
// console.log(searchResult)
var poi = searchResult.getPoi(0);
lnglatArr = [poi.point.lng, poi.point.lat];
console.log(lnglatArr)
window.alert(lnglatArr);
});
localSearch.search(keyword);
}
</script>
</html>
15.下单侧边弹窗
js版
<div class="side-windows" id="sideWindowsID">xxx 刚刚下单啦</div>
.side-windows{
background: rgba(0, 0, 0,0.4);
color: #fff;
height: 26px;
line-height: 26px;
font-size: 12px;
padding: 0 8px;
text-align: center;
border-radius: 20px;
position: fixed;
top: 40px;
display: none;
}
/* 下单弹窗*/
var sideWindowsID = document.getElementById("sideWindowsID");
sideWindowsID.style.display = 'block';
// 获取弹窗的宽度
var PopupWindowWidth = sideWindowsID.clientWidth;
// 将弹窗脱离视图层
sideWindowsID.style.left = -PopupWindowWidth + 'px';
// 利用定时器将窗口显示到视图层内
var tid = setInterval(() => {
sideWindowsID.style.left = sideWindowsID.offsetLeft + 1 + "px";
v = parseInt(sideWindowsID.style.left);
if (v > 0) clearInterval(tid)
}, 0);
//3秒后在执行
window.setTimeout(() => {
// 利用定时器将窗口移除到视图层外
var tid1 = setInterval(() => {
sideWindowsID.style.left = sideWindowsID.offsetLeft -1 + "px";
v = parseInt(sideWindowsID.style.left);
if (v < -PopupWindowWidth) {
clearInterval(tid1)
sideWindowsID.style.display = 'none';
}
}, 0);
}, 3000)
css版,注意,弹窗宽度是写死的
<div class="side-windows-1" id="sideWindowsID1">xxx 刚刚下单啦</div>
.side-windows-1{
background: rgba(0, 0, 0,0.4);
color: #fff;
height: 26px;
line-height: 26px;
font-size: 12px;
padding: 0 8px;
text-align: center;
border-radius: 20px;
position: fixed;
top: -100px;
width: 100px;
animation:popover-animation 4s;
-webkit-animation:popover-animation 4s;
}
@keyframes popover-animation
{
0% {left:-100px; top:0px;}
25% {left:0px; top:0px;}
50% {left:0px; top:0px;}
75% {left:0px; top:0px;}
100% {left:-100px; top:0px;}
}
@-webkit-keyframes popover-animation /* Safari and Chrome */
{
0% {left:-100px; top:0px;}
25% {left:0px; top:0px;}
50% {left:0px; top:0px;}
75% {left:0px; top:0px;}
100% {left:-100px; top:0px;}
}
14.动态添加宽度
<div class="side-windows" id="sideWindows">刷新页面观看</div>
.side-windows{
background: rgba(0, 0, 0,0.5);
color: #fff;
width: 0px;
height: 200px;
line-height: 30px;
text-align: center;
position: fixed;
top: 40px;
}
var tid = setInterval("IncreaseTheWidth()", 1);
function IncreaseTheWidth() {
document.getElementById("sideWindows").style.width = document.getElementById("sideWindows").clientWidth + 1 + "px";
v = parseInt(document.getElementById("sideWindows").style.width);
if (v > 100) clearInterval(tid)
}
13.滚动条的样式修改
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-track 滚动条的轨道(里面装有Thumb)
::-webkit-scrollbar-thumb 滚动条里面的小滑块
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
.body-div::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.body-div::-webkit-scrollbar-track {
background: rgb(239, 239, 239);
border-radius: 2px;
}
.body-div::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 10px;
}
.body-div::-webkit-scrollbar-thumb:hover {
background: #666;
}
.body-div::-webkit-scrollbar-corner {
background: #179a16;
}
12.常用正则表达式
//邮箱
function isAvailableEmail(sEmail) {
var reg=/^([\w+\.])+@\w+([.]\w+)+$/;
return reg.test(sEmail);
}
isAvailableEmail("123@qq.com");
//手机
var phoneNum = '123';
// var reg = /^1[3|4|5|6|7|8|9][0-9]{9}$/;
var reg = /^1[3-9]\d{9}$/
if (!reg.test(phoneNum )) {
this.alert('手机号格式错误');
}
//银行卡
var pattern = /^([1-9]{1})(\d{14}|\d{18})$/;
if (!reg.test(pattern )) {
this.alert('银行卡格式错误');
}
//银行卡隐藏中间的几位“****”
var str = "1234567890123456";
var reg = /^(\d{4})\d+(\d{4})$/;
str = str.replace(reg, "$1****$2");
//用户名:
/^[a-zA-Z0-9_-]{4,15}$/ //只能是字母数字下划线横杠,长度4-15位
//密码:
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/ //至少含一个字母,数字 长度6-20位
// 纯中文
let regChi = /^[\u4e00-\u9fa5]+$/;
//纯英文数字
let regEngNum = /^[a-zA-Z\d]+$/;
//纯数字
let reg = /^[0-9]*$/
let reg = /^\d+$/
11.JS中获取输入框的值
点击获取
<input type="text" placeholder="输入留言" value="" id="msaInput">
<div onclick="msgComfirm()">确定</div>
function msgComfirm() {
var msaInput = document.getElementById("msaInput");
var inputValue = msaInput.value // 获取输入框的值
console.log(inputValue)
}
监听获取
<input type="text" placeholder="输入留言" value="" oninput="OnInput (event)">
function OnInput(event) {
console.log(event.target.value);
}
10.JS中禁止HTML的滚动
document.documentElement.style.overflowY = 'hidden';
9.JS合并数组
1.
var a = [1,2,3];
var b = [4,5,6];
var c = a.concat(b);//c=[1,2,3,4,5,6]
2.
var a = [1,2,3];
var b = [4,5,6];
for(var i in b){
a.push(b[i]);
}
//a=[1,2,3,4,5,6]
8.点击按钮背景回弹动画
<div class="btn">点击按钮回弹动画</div>
.btn {
background: #999;
color: #fff;
width: 200px;
font-size: 20px;
padding: 20px 30px;
text-align: center;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.btn::after {
content: "";
background: rgba(0, 0, 0, 0.3);
position: absolute;
width: 750px;
height: 750px;
left: calc(50% - 375px);
top: calc(50% - 375px);
opacity: 0;
margin: auto;
border-radius: 50%;
transform: scale(1);
transition: all 0.4s ease-in-out;
}
.btn:active:after {
transform: scale(0);
opacity: 1;
transition: 0s;
}
.btn:hover {
cursor: pointer;
}
7.border-radius实现半椭圆
<div class="test"></div>
.test{
border-radius: 150px 150px 0 0 / 100px 100px 0 0;
background: #00f;
height: 50px;
width: 150px;
}
效果图:
6.transparent实现三角形
<div class="test"></div>
.test{
width: 0;
height: 0;
border: solid transparent;
border-width: 0px 50px 50px 50px ;
border-bottom-color: rgb(0, 0, 0);
}
效果图:
5.实现border-bottom由中间向两边的渐变效果
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(135deg, #fff, #fff), linear-gradient(to left, #fff, #666, #fff);
border-bottom: 2px transparent solid;
效果图:
4.JS中动态修改backgroundSize和backgroundPosition
<div id="test"><div>
var testNumArr = [ '1','2','3']
//backgroundSize 百分比和px、rem等可以混用
window.document.getElementById('test').style.backgroundSize = '100%' + testNumArr[0] + "rem";
//当backgroundPosition的宽高大于div盒子的宽高是可以实现图片剪切的效果,下面的负1rem就是减去头部的1rem的高度
window.document.getElementById('test').style.backgroundPosition='0 -1rem';
3.去掉时间的冒号:和横杆-
let time1 = 12:00;
let time2 = 9-18;
time1.replace(/\:/g, "");
time2.replace(/\-/g, "");
2.让两个容器的滚动条同步
用querySelector获取容器的滚动条的dom对象,用addEventListenerjina监听当前容器滚动了多少,再把值赋值给另外一个容器,scrollTop 顶部对齐,scrollLeft 左边对齐。
//让滚动条y轴同步
var a = document.querySelector('#leftID')
var b = document.querySelector('#rightID')
a.addEventListener('scroll', function() {
b.scrollTop = a.scrollTop;
})
b.addEventListener('scroll', function() {
a.scrollTop = b.scrollTop
});
//让滚动条x轴同步
var a1 = document.querySelector('#topID')
var b1 = document.querySelector('#bottomID')
a1.addEventListener('scroll', function() {
b1.scrollLeft = a1.scrollLeft;
})
b1.addEventListener('scroll', function() {
a1.scrollLeft = b1.scrollLeft
})
1.div溢出部分可滚动查看并且不显示滚动条
Element UI 的滚动条 第一种:
(.a是加了overflow属性的类名)
.a::-webkit-scrollbar {
display: none
}
第二种(溢出截断滚动条,不是迫不得已就别用):
(注意:div b 的宽度一定要比div a 的宽度宽16px以上,因为滚动条的宽度大概是16px;而且内容一定要撑满外层div;如果div里是for循环显示内容的,那么这个div就要放到div b 的里面。)
<div class="a">
<div class="b">
<div >123</div>
<div >123</div>
<div >123</div>
//<div for='arr'></div>
</div>
</div>
<style>
.a{
width:100px;
height:100px;
overflow:hidden;
}
.b{
width:120px;
height:100px;
overflow-y:scroll;
}
</style>
css样式笔记
文字:
文字超出隐藏:text-overflow: ellipsis;
文字超出切除:text-overflow: clip;
文字超出不换行:white-space: nowrap;
允许长文本换行:word-wrap: break-word;
单词拆分换行:word-break: break-all;
(允许在单词内换行)和word-break: keep-all;
(只能在半角空格或连字符处换行)
文字缩进: text-indent: 10px;
文字行高: line-height: 10px;
文字行宽: letter-spacing: 10px;
文字缩放: transform:scale(0.9,1.1)
(x:横缩放,y:竖缩放)
文字超出两行显示省略号:
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;/*行数 */
-webkit-box-orient: vertical;
react的文字格式化: font-size: calc(10px + 2vmin);