1、解决mint-ui 日期组件 IOS 的页面层级相互影响滑动的问题
<mt-datetime-picker ref="picker" v-model="time" type="time" confirmText="保存" @confirm="handleConfirm" //确定的回调函数 @visible-change="visbleChange" //解决滑动问题 > </mt-datetime-picker>
data(){
return{
//监听函数
handler: function(e) {
e.preventDefault();
}
}
}
/*解决页面层级相互影响滑动的问题*/
closeTouch() {
document
.getElementsByTagName("body")[0]
.addEventListener("touchmove", this.handler, { passive: false }); //阻止默认事件
},
openTouch() {
document
.getElementsByTagName("body")[0]
.removeEventListener("touchmove", this.handler, { passive: false }); //打开默认事件
},
visbleChange(val) {
if (val) {
this.closeTouch();
} else {
this.openTouch();
}
},
2、解决IOS点返回键会出现空白
updated() {
document.scrollingElement.scrollTop = 0;
}
3、ivew table组件更换图片
h(
"Tooltip",
{ props: { content: "数据分析", placement: "bottom" } },
[
h("img", {
domProps: {
src: require("../../static/image/data.png")
},
style: {
width: "33px",
position: "relative",
top: "3px",
"margin-left": "4px",
cursor: "pointer"
},
on: {
click: () => {
this.show3 = 1;
}
}
})
]
),
4、倒计时效果
data(){
return{
sOrE: "",
showTime: "", //倒计时
}
}
//学校下最新一条场次信息
GetZXActInfo() {
var _this = this;
var url = APIConfig.Front.GetZXActInfo;
_this.$api.get(url, {}, resp => {
resp.Data.forEach(el => {
_this.ActivityName = el.ActivityName;
_this.EndTime = el.EndTime;
_this.checkTime(resp.OtherData);//从服务器里面拿时间 调下面的方法
});
});
},
// 倒计时的方法
checkTime(date) {
var _this = this;
clearInterval(window.myvar);
var endTime = new Date(_this.EndTime).getTime();
var nowTime = new Date(date).getTime();
_this.second = endTime - nowTime;
_this.sOrE = "beforeEnd";
window.myvar = setInterval(_this.setShowTime, 1000);
},
setShowTime() {
var _this = this;
var offset = Math.floor(_this.second / 1000);
// alert(offset);
// debugger;
var sec = offset % 60;
var min = Math.floor(offset / 60) % 60;
var hour = Math.floor(offset / 60 / 60) % 24;
var day = Math.floor(offset / 60 / 60 / 24);
sec = sec < 10 ? "0" + sec : sec;
min = min < 10 ? "0" + min : min;
hour = hour < 10 ? "0" + hour : hour;
day = day < 10 ? "0" + day : day;
if (_this.sOrE === "beforeStart")
_this.showTime = day + "天" + hour + "时" + min + "分" + sec + "秒";
if (_this.sOrE === "beforeEnd")
_this.showTime = day + "天" + hour + "时" + min + "分" + sec + "秒";
_this.second = _this.second - 1000;
if (offset <= 0) {
_this.showTime = "0秒";
clearInterval(window.myvar);
}
},
5、vue项目启动问题
npm cache clear --force
6、超出n行用省略号代替(注：要注明宽度)
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical;
7、修改iview的Scroll组件滚动的高度
.xxxxScroll /deep/ .ivu-scroll-container {
height: 460px !important;
}
8、背景图的样式
.demo {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* min-width: 1000px; */
z-index: -10;
zoom: 1;
background-color: #fff;
background: url("~/static/img/schLeader/background.png");
background-repeat: no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
9、mint LoadMore 的一些问题
mt-loadmore组件
:auto-fill='autoFill'为false，以防止上来无限请求
:给mt-loadmore父组件css:overflow: scroll;防止华为手机和苹果模式下浏览器手机测试上拉无效
:给mt-loadmore父组件css:-webkit-overflow-scrolling: touch;防止苹果手机拖动生涩
:给mt-loadmore父组件高度:style="{ height: wrapperHeight + 'px' }
mounted() {
this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
}
上边这个是官方方法，用来去除轻微上拉就触发检测机制从而加载下一页的BUG
不要忘记判断加载完成全部后台传来的数据列表后，this.allLoaded = true;就会禁止上拉加载
10、获取手机端的屏幕宽度和高度
宽度： var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 高度： var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
11、在一个div下面画一条竖线
<div class="div></div>
.div {
position: relative;
}
.div::after {
content: ''; // 必须
position: absolute;
left: 30px;
bottom: 0;
right: 0;
width: 720px;
height: 1PX;
background-color: #dcdcdc;
}
12、箭头的收缩
注意：在父组件中拿到datalist，然后遍历，将每一个dropDownType变为true，然后传给子组件
<img
:src="require('~static/img/icon-down.png')"
style="width: 20px; position: absolute; right: 15px; top: 14px"
v-bind:class="{ imgReg: datalist[0].dropDownType }"
@click="dropDownArrow(datalist[0].dropDownType, datalist[0].id)"
/>
注：实际应用中，将datalist[0] 换为 item
datalist:
[
{ id: "1", dropDownType: "false" },
{ id: "2", dropDownType: "false" },
],
//收缩的方法
dropDownArrow(DropDownType, id) {
var _this = this;
_this.$nextTick(() => {
_this.datalist.forEach((item, index) => {
if (item.id == id) {
item.dropDownType = !DropDownType;
}
});
_this.$forceUpdate();
});
},
.imgReg {
transform: rotate(180deg);
-ms-transform: rotate(180deg);
/* IE 9 */
-moz-transform: rotate(180deg);
/* Firefox */
-webkit-transform: rotate(180deg);
/* Safari 和 Chrome */
-o-transform: rotate(180deg);
}
13、Vant组件的手机端图片上传
<van-uploader
v-model="fileList"
multiple
:max-count="9"
:after-read="afterRead"
@delete="deleteImg"
preview-size="60"
>
<img :src="require('~static/img/addImg.png')" style="width: 40px" />
</van-uploader>
fileList: [],
formData: {
iconUrl: [],
},
afterRead(file) {
// 此时可以自行将文件上传至服务器
console.log(file);
this.takePhoto(file);
},
deleteImg(file, detail) {
console.log(this.formData.iconUrl);
// console.log(detail);
this.formData.iconUrl.splice(detail.index, 1);
console.log(this.formData.iconUrl);
},
takePhoto(e) {
var _this = this;
var urlfile = _this.APIConfig.WorkPlan.FileUpload;
// let file = e[0]; //获取图片资源 // 只选择图片文件
// if (!file.file.type.match("image.*")) {
// return false;
// }
// if (e.length + _this.formData.iconUrl.length > 9) {
// alert("你最多只能选择9张照片！");
// return;
// }
// var ticket = sessionStorage.getItem("ticket");
// if (ticket == null || ticket == undefined) {
// ticket = "test";
// }
var ticket = sessionStorage.getItem("ticket");
if (ticket == null || ticket == undefined) {
ticket = "1";
}
let form_data = new FormData();
if (e.length == undefined) {
var list = [];
list.push(e);
console.log(list);
for (var i = 0; i < list.length; i++) {
//FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
//注意：如果你的服务器端是PHP那么为了与php命名习惯一致在名称中需要添加[]，如formData.append('files[]',files[i]);
form_data.append("image", list[0].file); //向formdata里面存放键值对
}
} else
for (var i = 0; i < e.length; i++) {
//FormData.set 和 append() 的区别在于，如果指定的键已经存在， FormData.set 会使用新值覆盖已有的值，而 append() 会把新值添加到已有值集合的后面。
//注意：如果你的服务器端是PHP那么为了与php命名习惯一致在名称中需要添加[]，如formData.append('files[]',files[i]);
form_data.append("image", e[i].file); //向formdata里面存放键值对
}
$.ajax({
type: "POST", // 上传文件要用POST
url: urlfile,
dataType: "json",
crossDomain: true, // 如果用到跨域，需要后台开启CORS
processData: false, // 注意：不要 process data
contentType: false, // 注意：不设置 contentType
headers: {
ticket: ticket,
},
data: form_data,
})
.success(function (resp) {
console.log(resp);
// resp = resp.replace(//g,'\"');
// resp = JSON.parse(resp);
resp.data.forEach((element) => {
console.log(element);
// _this.formData.encloid.push(element.fileid);
// _this.formData.enclo.push(element);
// var index = element.lastIndexOf("/");
// var str = element.substring(index + 1, element.length);
_this.formData.iconUrl.push(element);
// _this.fileList.push(element);
});
})
.error((err) => {
console.log(err);
});
},
14、前端数组去重
...new Set(arr)
15、图片的选中与移除
<div
v-for="(item, index) in dataList"
:key="index"
>
<img
:src="require('~static/image/zwImg/gou.png')"
style="height: 45px; position: absolute"
v-show="item.ChooseStatus" //控制对勾的选中与移除
/>
</div>
@click="picClick(item, index)" //给循环的某一个元素加点击事件
XZList:[], //用一个list来存储选中的元素
picClick(item, index) {
var _this = this;
_this.$nextTick(() => {
let obj = JSON.parse(JSON.stringify(_this.dataList[index]));
// console.log(obj);
obj.ChooseStatus = !obj.ChooseStatus;
this.$set(_this.dataList, index, obj);
if (obj.ChooseStatus) {
let tempIndex = _this.XZList.indexOf(item.SerID);
if (tempIndex == -1) _this.XZList.push(item); //加
} else {
for (let i = 0; i < _this.XZList.length; i++) {
if (_this.XZList[i].SerID == item.SerID) {
_this.XZList.splice(i, 1); //减
}
}
}
// console.log(_this.XZList);
});
},
16、解决ios滑动卡顿
overflow: scroll; -webkit-overflow-scrolling: touch;//这个属性可以实现，手指离开屏幕会惯性滑动一段距离
17、前端分页
<template>
<Table border :columns="tableColumns1" :data="tableData1"/>
<Page :total="dataCount"
:page-size="pageSize"
show-sizer class="paging"
@on-change="changepage"
@on-page-size-change="pagesize"/>
</template>
<script>
let testData = {
"histories": [
{
"username": "实例一",
},
{
"username": "实例二",
},
]
};
export default {
data () {
return {
ajaxtableData1:[],
// 初始化信息总条数
dataCount:0,
// 每页显示多少条
pageSize:5,
// 当前页码
page:1,
tableData1: []
}
},
methods: {
// 获取历史记录信息
handleListApproveHistory(){
// 保存取到的所有数据
this.ajaxtableData1 = testData.histories;
this.dataCount = testData.histories.length;
// 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
if(testData.histories.length < this.pageSize){
this.tableData1 = this.ajaxtableData1;
}else{
this.tableData1 = this.ajaxtableData1.slice(0,this.pageSize);
}
},
changepage(index){
// 当前页码
this.page = index;
let _start = ( index - 1 ) * this.pageSize;
let _end = index * this.pageSize;
this.tableData1 = this.ajaxtableData1.slice(_start,_end);
},
pagesize(index){
let _start = ( this.page - 1 ) * index;
let _end = this.page * index;
this.tableData1 = this.ajaxtableData1.slice(_start,_end);
// 当前展示条数
this.pageSize = index;
}
},
mounted () {
},
created(){
this.handleListApproveHistory();
}
}
</script>
<style>
</style>
18、Linux 删除乱码的文件
1、先列出文件节点
ls -i
2、find . -inum xxxxxxx -exec rm {} -rf \;
19、java数组去除空值
array.filter(d=>d)
20、js 判断数据类型
1、typeof 不能检测出是数组还是对象； 2、instanceof 只能用来判断是数组还是对象，不能判断string和Boolean； 3、最佳方案： const value = ... ; Object.prototype.toString.call(value).slice(8,-1)
21、查看大图
1、引入vant 预览大图组件
import { ImagePreview } from 'vant';
2、接口获取list，然后
// 清空
_this.iconPathArray = [];
// 遍历list，将标题图片存入数组
_this.list.forEach(el=>{
_this.iconPathArray.push(el.iconPath)
})
3、data里面定义
iconPathArray:[] // 预览大图
4、在需要点击图片展示大图的地方加点击事件
@click="getImgPreview(index)"
// 点击展示大图
getImgPreview(index) {
const _this = this;
ImagePreview({
images: _this.iconPathArray,
showIndex: true,
loop: false, //是否循环播放
startPosition: index
})
}
方法二(pc端)：
1、安装依赖
npm install v-viewer --save
2、全局引入
import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})
3、使用
<viewer :images="getName(photo)">
//photo 一定要一个数组，否则报错
<img
v-for="(src,index) in photo"
:src="src"
:key="index"
:οnerrοr="errorImg"
>
</viewer>
// 预览大图
getName(fileList) {
let newarr = [];
for (let i = 0; i < fileList.length; i++) {
if (fileList.fileTypeId == 1) {
newarr.push(fileList[i].fileName);
}
}
return newarr;
},
22、滚动条样式
/*滚动条样式*/
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: #eaeaea;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #f7f8f6;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #eaeaea;
}
23、秒 转为 时分秒
let time = 30;
let result = parseInt(time)
let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
let res = '';
if(h !== '00') res += `${h}小时`;
if(m !== '00') res += `${m}分钟`;
res += `${s}秒`;
console.log(res);
24、鼠标悬浮在图片上，图片有突出效果
<img :src="" class="img" />
img:hover {
transform: scale(1.4);
}
img{
cursor: pointer;
transition: all 0.6s;
}
25、让文字和长数字在同一行
word-break: break-all
26、小功能
var zfc = "[1,2,3]";
console.log(zfc.split("[")[1].split("]")[0].split(",")); //["1", "2", "3"]
var arr = ['1','2','3']
console.log(arr.map(item=>item*1)); //[1, 2, 3]
27、发短信、打电话
1、打电话
window.location.href = "tel:" + phone;
2、发短信
//用户的电话号码
var phone =$('#messagecall').val();
//发送短信的内容
var name=$('.message_content').html();
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1
|| u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
|| u.indexOf('iPhone') > -1; //ios终端
if (isAndroid) {
var sendcontent = 'sms:' + phone + '?body='+name;//android ///
window.location.href = sendcontent;
} else if (isiOS) {
var sendcontent = 'sms:' + phone + '&body='+name;//ios ///
window.location.href = sendcontent;
} else {
var sendcontent = 'sms:' + phone + '?body='+name;//android ///
window.location.href = sendcontent;
}
28、日期时间格式的转化
dateFormat(_date, fmt) {
var date = new Date(_date);
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"H+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
},
29、css3动画特效：上下晃动的div
<div id="square" class="container animated">上下晃动</div>
/**
* transform-origin 设置旋转元素的基点位置
* animation-name 设置动画名称
* animation-duration 设置动画时间
* animation-fill-mode 设置播放后的状态
* animation-iteration-count 设置循环播放的次数
* transition-timing-function: cubic-bezier 贝塞尔曲线效果，它有四个值，指在X轴与Y轴的两个曲线的点，第一个点：X1 Y1;第二个点：X2 Y2
* transform: translate3d 设置动画Z轴位移几个元素，表示只在Z轴上移动
*
* 需要注意：transform: translate3d 不等于 transform: translateZ
*/
.animated {
animation-duration: 1s; /*动画时间*/
animation-fill-mode: both; /*播放后的状态*/
}
.animated {
animation-iteration-count: infinite; /*动作循环的次数：infinite 无限循环*/
}
.animated {
animation-duration: 2s; /*动画时间*/
}
.container {
background: #2D97DB;
width: 90%;
height: 90%;
padding: 100px;
margin: 20px auto;
font-family: "微软雅黑";
font-size: 40px;
color: white;
text-align: center;
line-height: 90%;
}
.container:hover{
animation-name:container; /*动画的名称*/
transform-origin: center bottom; /*设置动画旋转元素的基点为：居中靠下*/
cursor: pointer;
}
@keyframes container{
0%,
100%,
20%,
50%,
80% {
transition-timing-function: cubic-bezier(0.215,.61,.355,1); /*贝塞尔曲线 ： X1 Y1 X2 Y2*/
transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
}
40%,
43%{
transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
transform: translate3d(0,-30px,0);
}
70%{
transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
transform: translate3d(0,-15px,0);
}
90%{
transform: translate3d(0,-4px,0);
}
}
30、实现div左右翻转
<div class="animated">左右翻转</div>
.animated{
width: 100px;
height: 100px;
background: red;
margin: 100px;
}
.animated:hover {
animation: mymove 2s;
-webkit-animation: mymove 2s ; /* Safari and Chrome */
}
@keyframes mymove {
50% {
transform: scale(-1,1);
}
}
@-webkit-keyframes mymove{ /* Safari and Chrome */
50% {
transform: scale(-1,1);
}
}
31、实现文字滚动播放
<p class="box">
<span class="roll">纯CSS文字滚动播放</span>
</p>
<style>
* {
margin: 0;
padding: 0;
}
body{
background: #efefef;
}
.box {
width: 300px;
margin: 10px auto;
overflow: hidden;
background: #fff;
border-radius: 5px;
padding: 5px;
}
.roll {
white-space: nowrap;
animation: 10s loop linear infinite normal;
display: inherit;
}
@keyframes loop {
0% {
transform: translateX(300px);
-webkit-transform: translateX(300px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
@-webkit-keyframes loop {
0% {
transform: translateX(300px);
-webkit-transform: translateX(300px);
}
100% {
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
}
</style>
32、实现网页飘窗功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js飘窗</title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
#float{width: 80px;height: 80px;position: fixed;top: 100px;background-color: #000;}
</style>
</head>
<body>
<div id="float"></div>
<script type="text/javascript">
var div = document.getElementById("float");//获取对象
var myt = 100,myl = 0; //定义初始top/left值
var step = 2; //要移动多少像素
var w = div.offsetWidth, h = div.offsetHeight;//获取元素的宽高
var bw = document.body.clientWidth, bh = document.body.clientHeight;//获取可见窗口的宽高
var directionX = "right", directionY = "down";//定义移动方向
function go(){
//判断移动方向
if(directionX == "right"){//判断向右移动时到最右侧
if((myl+w+step)>bw){
directionX = "left";
}
}else{
if((myl-step)<0){
directionX = "right";
}
}
if(directionY == "down"){//判断向下移动时到最下侧
if((myt+h+step)>bh){
directionY = "up";
}
}else{
if((myt-step)<0){
directionY = "down";
}
}
//移动
if(directionX == "right"){
myl += step;
}else{
myl -= step;
}
if(directionY == "down"){
myt += step;
}else{
myt -= step;
}
div.style.left = myl + "px";
div.style.top = myt + "px";
}
var myVar = setInterval(go,40);//定时器
div.οnmοuseοver=function(){//鼠标移动到元素上停止函数
clearInterval(myVar);
}
div.οnmοuseοut=function(){//鼠标离开元素继续
myVar = setInterval(go,40);
}
</script>
</body>
</html>
33、移动端 控制台插件
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.0.0/vconsole.min.js"></script>
<script>
new VConsole();
</script> -->
<!-- 手机端调试工具 -->
<!-- <script src="https://cdn.bootcss.com/eruda/1.5.8/eruda.min.js"></script>
<script>
eruda.init();
console.log('控制台打印信息');
</script> -->
34、日期小工具
// 获取当前月的第一天
function getDate() {
var myDate = new Date()
var tYear = myDate.getFullYear()
var tMonth = myDate.getMonth()
tMonth = doHandleZero(tMonth + 1)
return tYear + '-' + tMonth + '-01'
}
// 获取当前月的最后一天
function getLastDay() {
var date = new Date()
var new_month = date.getMonth() + 1
// 取当前的年份
var new_year = date.getFullYear()
// 取当年当月中的第一天
var new_date = new Date(new_year,new_month,1)
var currentdate = `${new_year}-${new_month}-${new Date(new_date.getTime() - 1000 * 60 * 60 *24).getDate()}`
return currentdate
}
// 获取某一个月的最后一天
function getMonthLast(date){
const stringDate = new Date(date)
const enddate = new Date(stringDate.getFullYear(),stringDate.getMonth() + 1, 0)
return enddate
}
35、antd 表格里面的字段换行展示
注： 和后端商量好返回的字段用逗号隔开
customRender: (text)=>{
if (text) {
let strArr = []
strArr = text.split(',')
return (
strArr.map(item=>{
return (<li>{item}</li>)
})
)
}
}
36、截取特定字符
//js 截取指定字符后面/前面的所有字符串
let str = '你还好吗？嗯？我很好！'
//截取第一个？前面的字符串
var index = str.indexOf("？")
var resolve = str.substring(0, index);
console.log(resolve)
//你还好吗
//截取第一个？后面的字符串
var indexs = str.indexOf("？")
var resolves = str.substring(indexs + 1, str.length);
console.log(resolves)
//嗯？我很好！
//截取最后一个？前面的字符串
let indexss = str.lastIndexOf("？")
var resolvess = str.substring(0, indexss);
console.log(resolvess)
//你还好吗？嗯
//截取最后一个？后面的字符串
let indexsss = str.lastIndexOf("？")
var resolvesss = str.substring(indexsss + 1, str.length);
console.log(resolvesss)
//我很好！
//因为是省事一次性打印出来所以后面的命名都加了对应的几个s,单个运用的时候去掉就行
37、判断小数点前有几位数
let str = num.toString()
if (str.substring(0, str.indexOf('.')).length > 2) {
this.$message.warning('小数点前的位数不能大于两位！')
return
}
38、判断小数点后有几位数
let x = num.toString().split('.')
let y = x.length > 1 ? x[1].length : 0
if (y > 2) {
this.$message.warning(`有${y}位小数,请重新输入！`)
return
}
39、将数字转为中文
convertToChinese(num) {
let changeNum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
let unit = ['', '十', '百', '千', '万']
num = parseInt(num)
let getWan = temp => {
let strArr = temp.toString().split('').reverse()
let newNum = ''
let newArr = []
strArr.forEach((item, index) => {
newArr.unshift(item === '0' ? changeNum[item] : changeNum[item] + unit[index])
})
let numArr = []
newArr.forEach((m, n) => {
if (m !== '零') numArr.push(n)
})
if (newArr.length > 1) {
newArr.forEach((m, n) => {
if (newArr[newArr.length - 1] === '零') {
if (n <= numArr[numArr.length - 1]) {
newNum += m
}
} else {
newNum += m
}
})
} else {
newNum = newArr[0]
}
return newNum
}
let overWan = Math.floor(num / 10000)
let noWan = num % 10000
if (noWan.toString().length < 4) {
noWan = '0' + noWan
}
return overWan ? getWan(overWan) + '万' + getWan(noWan) : getWan(num)
},
40、antd合并单元格
{
title: '供应商名称',
dataIndex: 'orgName',
align: 'center',
customRender: (value, row, index) => {
return this.mergeRows(value, index, 'orgName', row)
},
},
mergeRows(value, index, key, row) {
const obj = {
children: value ? value : '-',
attrs: {},
}
if (key == 'bidContact') {
obj.children = value + row.bidPhone
}
if (key == 'quotationType') {
obj.children = this.convertToChinese(value) + '次报价'
}
if (this.tbrListSlyy.length > 0 && index > 0 && value == this.tbrListSlyy[index - 1][key]) {
obj.attrs.rowSpan = 0
return obj
}
let rowSpan = 1
for (let i = index + 1; i < this.tbrListSlyy.length; i++) {
if (value !== this.tbrListSlyy[i][key]) {
break
}
rowSpan++
}
obj.attrs.rowSpan = rowSpan
// obj.children = value ? value + '-' +rowSpan : '-'
return obj
},
41、实现div一直旋转
<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">
</div>
#xuanzhun{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 1s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 1s;
-webkit-animation: rotate 3s linear infinite;
-moz-animation: rotate 3s linear infinite;
-o-animation: rotate 3s linear infinite;
animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
to{transform: rotate(359deg)}
}
42、鼠标点击会有爆炸效果
function clickEffect() {
let balls = [];
let longPressed = false;
let longPress;
let multiplier = 0;
let width, height;
let origin;
let normal;
let ctx;
const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
const canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
const pointer = document.createElement("span");
pointer.classList.add("pointer");
document.body.appendChild(pointer);
if (canvas.getContext && window.addEventListener) {
ctx = canvas.getContext("2d");
updateSize();
window.addEventListener('resize', updateSize, false);
loop();
window.addEventListener("mousedown", function(e) {
pushBalls(randBetween(10, 20), e.clientX, e.clientY);
document.body.classList.add("is-pressed");
longPress = setTimeout(function(){
document.body.classList.add("is-longpress");
longPressed = true;
}, 500);
}, false);
window.addEventListener("mouseup", function(e) {
clearInterval(longPress);
if (longPressed == true) {
document.body.classList.remove("is-longpress");
pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
longPressed = false;
}
document.body.classList.remove("is-pressed");
}, false);
window.addEventListener("mousemove", function(e) {
let x = e.clientX;
let y = e.clientY;
pointer.style.top = y + "px";
pointer.style.left = x + "px";
}, false);
} else {
console.log("canvas or addEventListener is unsupported!");
}
function updateSize() {
canvas.width = window.innerWidth * 2;
canvas.height = window.innerHeight * 2;
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';
ctx.scale(2, 2);
width = (canvas.width = window.innerWidth);
height = (canvas.height = window.innerHeight);
origin = {
x: width / 2,
y: height / 2
};
normal = {
x: width / 2,
y: height / 2
};
}
class Ball {
constructor(x = origin.x, y = origin.y) {
this.x = x;
this.y = y;
this.angle = Math.PI * 2 * Math.random();
if (longPressed == true) {
this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
} else {
this.multiplier = randBetween(6, 12);
}
this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
this.r = randBetween(8, 12) + 3 * Math.random();
this.color = colours[Math.floor(Math.random() * colours.length)];
}
update() {
this.x += this.vx - normal.x;
this.y += this.vy - normal.y;
normal.x = -2 / window.innerWidth * Math.sin(this.angle);
normal.y = -2 / window.innerHeight * Math.cos(this.angle);
this.r -= 0.3;
this.vx *= 0.9;
this.vy *= 0.9;
}
}
function pushBalls(count = 1, x = origin.x, y = origin.y) {
for (let i = 0; i < count; i++) {
balls.push(new Ball(x, y));
}
}
function randBetween(min, max) {
return Math.floor(Math.random() * max) + min;
}
function loop() {
ctx.fillStyle = "rgba(255, 255, 255, 0)";
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
if (b.r < 0) continue;
ctx.fillStyle = b.color;
ctx.beginPath();
ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
ctx.fill();
b.update();
}
if (longPressed == true) {
multiplier += 0.2;
} else if (!longPressed && multiplier >= 0) {
multiplier -= 0.4;
}
removeBall();
requestAnimationFrame(loop);
}
function removeBall() {
for (let i = 0; i < balls.length; i++) {
let b = balls[i];
if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
balls.splice(i, 1);
}
}
}
}
clickEffect();//调用特效函数
3090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
