文章目录
图片处理
兼容性查询
替换掉JQuery
前端条形码
浏览器
Chrome滚动条美化
/* 滚动槽 */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
border-radius: 3px;
background: rgba(0,0,0,0.06);
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius: 3px;
background: rgba(0,0,0,0.12);
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
Element Carousel手指滑动
<div id="app">
<template>
<el-carousel :interval="4000" type="card" arrow="never" ref="carousel">
<el-carousel-item v-for="item in carouseData" :key="item.id">
<img class="element-img" alt="" :src="item.url">
</el-carousel-item>
</el-carousel>
</template>
</div>
methods: {
slideBanner() {
//选中item的盒子
var box = document.querySelector('.el-carousel__container');
//手指起点X坐标
var startPoint = 0;
//手指滑动重点X坐标
var stopPoint = 0;
var that = this;
//重置坐标
var resetPoint = function(){
startPoint = 0;
stopPoint = 0;
}
//手指按下
box.addEventListener("touchstart",function(e){
//手指点击位置的X坐标
startPoint = e.changedTouches[0].pageX;
});
//手指滑动
box.addEventListener("touchmove",function(e){
//手指滑动后终点位置X的坐标
stopPoint = e.changedTouches[0].pageX;
});
//当手指抬起的时候，判断图片滚动离左右的距离
box.addEventListener("touchend",function(e){
if(stopPoint == 0 || startPoint - stopPoint == 0){
resetPoint();
return;
}
if(startPoint - stopPoint > 0){
resetPoint();
that.$refs.carousel.next();
return;
}
if(startPoint - stopPoint < 0){
resetPoint();
that.$refs.carousel.prev();
return;
}
});
}
},
mounted() {
this.slideBanner();
},
JS
计算时分秒
/**
* 计算时分秒
* @param {String} endTime 结束时间 2022-08-08 18:18:18
* @param {String} startTime 开始时间 2022-08-08 16:16:16
* @return {String} 02:02:02
*/
function calcInterval(endTime, startTime) {
if (!endTime || !startTime) return "";
var seconds = (new Date(endTime.replace(/-/g, "/")).getTime() - new Date(startTime.replace(/-/g, "/")).getTime()) / 1000;
var ss = seconds % 60;
var mm = Math.floor(seconds % 3600 / 60);
var hh = Math.floor(seconds / 3600);
function add0 (time) {
return time < 10 ? `0${time}` : time;
}
return `${add0(hh)}:${add0(mm)}:${add0(ss)}`
}
时间格式化
计算机本地时间: 2021-2-8 5:56:38
new Date().toLocaleString().replace(/\//g, '-').replace(/\s.{2}/, ' ')
格林威治时间: 2021-02-08 09:41:31
new Date().toISOString().match(/^(.*)\./)[1].replace(/T/, ' ')
把UTC时间转换成当地时区时间
/**
* 把UTC时间转换成当地时区时间
* @param UTCDateString UTC时间
* @param timeZone 时区
*/
function convertUTCTime(UTCDateString, timeZone) {
// 格式化显示
const formatFunc = str => str > 9 ? str : '0' + str;
// 本地时区的时间戳
const localTimeStamp = new Date(UTCDateString).getTime() + timeZone * 3600000;
// 本地时区时间
const localTime = new Date(localTimeStamp);
return localTime.getFullYear()
+'-'+ formatFunc(localTime.getMonth() + 1)
+'-'+ formatFunc(localTime.getDate())
+' '+ formatFunc(localTime.getHours())
+':'+ formatFunc(localTime.getMinutes())
+':'+ formatFunc(localTime.getSeconds())
};
// 例:东八区
console.log(convertUTCTime('2021-02-24T17:16:14.5714345', 8));
获取元素属性
window.innerHeight ：浏览器内页面可用高度（含滚动条）
el.offsetTop：元素离页面顶部距离
监听滚动条滚动事件
window.addEventListener('scroll', function() {
console.log(window.pageYOffset);
})
事件委托
// 事件委托
$('#category')[0].addEventListener('click', e => {
const event = e || window.event
const target = event.target || event.srcElement
const getEl = el => {
if (!el) {
return
}
if () {
// 捕捉到正确元素，事件处理
} else {
getEl(el.parentNode)
}
}
getEl(target)
})
myCommon.js（常用函数）
- ajax的get请求
- 滚动元素到指定位置
- 节流
- 获取元素离浏览器顶部距离
- 复制内容到粘贴板
- 获取url参数
/**
* @description ajax的get请求
* @param {String} url 接口地址
* @param {String} method get/post
* @param {JSON} data post方法的请求数据
*/
function myAjax(url, method, data) {
return new Promise((resolve, reject) => {
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (this.status >= 200 && this.status < 400) {
// Success!
resolve(this.response);
} else {
// We reached our target server, but it returned an error
reject(this);
}
};
request.onerror = function() {
// There was a connection error of some sort
reject(this);
};
request.send();
})
}
/**
* @description 滚动元素到指定位置
* @param {Number} aims 目标高度
* @param {Element} el 被滚动的元素（不传默认滚动document）
* @param {Function} cb 滚动完后回调
*/
function scrollToTop(aims, el, cb) {
let target = null,
height = aims ? aims : 0,
ev = cb ? cb : (()=>{});
if (el) {
target = el;
} else {
target = document.documentElement;
}
// 缓动函数
const cubic = value => Math.pow(value, 3);
const easeInOutCubic = value => value < 0.5
? cubic(value * 2) / 2
: 1 - cubic((1 - value) * 2) / 2;
// 向上滚动
const beginTime = Date.now();
const beginValue = target.scrollTop;
const rAF = window.requestAnimationFrame || (func => setTimeout(func, 16));
const frameFunc = () => {
const progress = (Date.now() - beginTime) / 500;
if (progress < 1) {
target.scrollTop = beginValue - (beginValue - height) * easeInOutCubic(progress);
rAF(frameFunc);
} else {
target.scrollTop = height;
ev();
}
};
rAF(frameFunc);
}
/**
* @description 节流函数
* @param {Function} fn 触发的函数
* @param {Number} delay 间隔时间
*/
function throttle(fn, delay) {
let last = 0,
timer = null;
return function() {
let context = this,
args = arguments,
now = +new Date();
if (now - last < delay) {
clearTimeout(timer)
timer = setTimeout(function() {
last = now;
fn.apply(context, args);
}, delay)
} else {
last = now;
fn.apply(context, args);
}
}
}
/**
* @description 获取元素离浏览器顶部距离
* @param {Element} el 元素
*/
function getTop(el) {
var offset=el.offsetTop;
if(el.offsetParent!=null) offset += getTop(el.offsetParent);
return offset;
}
/**
* @description 复制内容到粘贴板
* @param {String} content 待复制的内容
* @param {String} message 复制完后的提示，不传则默认提示"复制成功"
*/
function copyToClip(content, message) {
var aux = document.createElement("input");
aux.setAttribute("value", content);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);
if (message == null) {
alert("复制成功");
} else{
alert(message);
}
}
/**
* @description 获取url参数
* @param {String} name 参数名
*/
function getQueryString(name) {
let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
let r = window.location.search.slice(1).match(reg);
if (r != null) {
return decodeURIComponent(r[2]);
};
return null;
}
CSS
CSS箭头
.arrow {
display: inline-block;
width: 8px;
height: 8px;
border-top: 1px solid #333;
border-left: 1px solid #333;
transform: rotate(135deg);
}
CSS三角形
#triangle02{
content: "";
width: 0;
height: 0;
font-size: 0;
border: 10px solid transparent;
border-right-color: red;
}
初始化样式
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 { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
Nginx
发布静态服务
server {
listen 9998;
server_name localhost;
client_max_body_size 10m;
location / {
root E:/100_Code/OfficalWebsite;
index index.html index.htm;
client_max_body_size 10m;
sendfile on; #设置为on表示启动高效传输文件的模式
keepalive_timeout 1080; #保持连接的时间，默认65s
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
client_max_body_size 10m;
}
}
代理本地服务
server {
listen 8888;
server_name 192.168.9.51;
client_max_body_size 10m;
location / {
proxy_pass http://127.0.0.1:8080;
}
location ^~/api {
proxy_pass http://192.168.9.42:8097;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
client_max_body_size 10m;
}
}
Git
分支操作
git branch -a // 查看所有分支
git branch xxx_name // 新建分支
git checkout xxx_name // 切换分支
git branch -d xxx_name // 删除分支
git push origin <分支名>:<分支名> // 推送到远程分支
代码提交
git status // 查看文件修改情况
git add . // 添加所有修改文件
git commit -m '提交信息' // 提交所有修改文件
git pull origin <分支名> // 拉取合并服务器代码
git push origin <分支名> // 推送本地代码
扫一扫
2828
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
