一、html标签替换
function mystring(str) {
var ret = str;
while(ret.indexOf(">") >= 0 || ret.indexOf("<") >= 0) {
ret = ret.replace("<", "<").replace(">", ">");
}
return ret;
}
二、时间拼接
function time() {
var t = new Date();
var n = t.getFullYear();
var y = bianhuan(t.getMonth() + 1);
var r = bianhuan(t.getDate());
var s = bianhuan(t.getHours());
var f = bianhuan(t.getMinutes());
var m = bianhuan(t.getSeconds());
var time = n + "-" + y + "-" + r + " " + s + ":" + f + ":" + m;
return time;
}
三、加“0”判断
function bianhuan(v) {
v = v < 10 ? "0" + v : v;
return v;
}
四、原生JS文件上传
<textarea cols="50" rows="10" id="txt" οndragοver="mydragover(event)" οndrοp="mydrop(event)" ></textarea>
<input type="file" id="file" οnchange="mychange()" />
<input type="button" οnclick="tianjia()" value="添加文本" />
<script type="text/javascript">
function tianjia(){
document.getElementById("file").click();
}
function mychange(){
var files=document.getElementById("file").files;
for (var i = 0; i < files.length; i++) {
var fr=new FileReader();
fr.readAsText(files[i],"gb2312");
fr.οnlοad=function(){
var txt=document.getElementById("txt");
txt.innerHTML=this.result;
};
}
}
function mydragover(ev){
ev.preventDefault();
}
function mydrop(ev){
ev.preventDefault();
var files=ev.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var freader=new FileReader();
freader.readAsText(files[i]);//没有返回值
freader.οnlοad=function(){//文件加载完成调用此函数
var txt=document.getElementById("txt");
txt.innerHTML=this.result;
};
}
}
</script>
五、返回刷新
function CheckReload() {
if (window.name != bencalie) {
location.reload();
window.name = bencalie;
}
else {
window.name = ;
}}
六、获得两个日期之间相差的天数
//startDate="2018-01-10";
// endDate="2018-01-15";
function getDays(date1, date2) {
var date1Str = date1.split("-");//将日期字符串分隔为数组,数组元素分别为年.月.日
//根据年 . 月 . 日的值创建Date对象
var date1Obj = new Date(date1Str[0], (date1Str[1] - 1), date1Str[2]);
var date2Str = date2.split("-");
var date2Obj = new Date(date2Str[0], (date2Str[1] - 1), date2Str[2]);
var t1 = date1Obj.getTime();
var t2 = date2Obj.getTime();
var dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
var minusDays = Math.floor(((t2 - t1) / dateTime));//计算出两个日期的天数差
var days = Math.abs(minusDays);//取绝对值
return days;
}
七、判断某天星期几
// startDate="2018-01-10";
// endDate="2018-01-15";
var date1 = new Date(startDate).getDay();
var date2 = new Date(endDate).getDay();
//console.log(date1+"==="+date2);
if (date1 == 0) {
$("#startDate_xq").html("周日");
} else if (date1 == 1) {
$("#startDate_xq").html("周一");
} else if (date1 == 2) {
$("#startDate_xq").html("周二");
} else if (date1 == 3) {
$("#startDate_xq").html("周三");
} else if (date1 == 4) {
$("#startDate_xq").html("周四");
} else if (date1 == 5) {
$("#startDate_xq").html("周五");
} else if (date1 == 6) {
$("#startDate_xq").html("周六");
}if (date2 == 0) {
$("#endDate_xq").html("周日");
} else if (date2 == 1) {
$("#endDate_xq").html("周一");
} else if (date2 == 2) {
$("#endDate_xq").html("周二");
} else if (date2 == 3) {
$("#endDate_xq").html("周三");
} else if (date2 == 4) {
$("#endDate_xq").html("周四");
} else if (date2 == 5) {
$("#endDate_xq").html("周五");
} else if (date2 == 6) {
$("#endDate_xq").html("周六");
}
八、生成六位不重复验证码函数
function methods() {
//定义存储6位验证码的字符串
var a = "";
//定义计数器
var count = 0;
while(true) { //生成验证码
var y = parseInt(Math.random() * 10);
//不重复判断，将生成的验证码y和最后的a去对比
if(a.indexOf(y) == -1) {
a = a + y;
count++;
}
if(count == 6) //判断验证码是不是6位
{
break;
}
}
return a;
}console.log(methods());
九、反选效果
<input type="checkbox" value="1" name="IsPhone1"/>电话</label>
//设置选中
1、$('input[name="IsPhone1"]').prop("checked", true);
//获取选中的值
1、$('input:radio:checked').val()；
2、$("input[type='radio']:checked").val();
3、$("input[name='rd']:checked").val();
//判断是否选中
1、if ($('input[name="IsPhone1"]').prop("checked")) {
IsPhone1 = 1;
}//反选
function check_box() {
var s=document.getElementById("box");
var rs=document.getElementsByName("bx");
if(s.checked==true){
for (var i=0;i<rs.length;i++) {
rs[i].checked=!rs[i].checked;
}
}
}/**
全选或反选按钮
* /
*/
$("#all").click(function () {
var isChecked = $(this).prop("checked");
if (isChecked) {
$("tbody input[type='checkbox']").each(function () {
$(this).prop("checked", true);
});
} else {
$("tbody input[type='checkbox']").each(function () {
$(this).prop("checked", false);
});
}
});
/**
判断是否全选事件
* /
*/
$("tbody input[type='checkbox']").click(function () {
var selectall = 1;//默认全选
$("tbody input[type='checkbox']").each(function () {
if ($(this).prop("checked")) {
} else {
$("#all").prop("checked", false);
selectall = 0;
return false;
}
});
if (selectall == 1) {
$("#all").prop("checked", true);
}
});/**
确认分配
* /
*/
function okdistribute() {
var checkboxlength = $("tbody input[type='checkbox']:checked").length;
if (checkboxlength == 0) {
layer.msg('您未选中任何员工', { anim: 6, icon: 2 });
return;
}
//console.log(checkboxlength);
var checkedval = [];
$("tbody input[type='checkbox']").each(function (i) {
if ($(this).prop("checked")) {
checkedval.push($(this).val());
}
});
var checkedlength = checkedval.length;//选中了几名员工
var checkedval = checkedval.join(",");//选中员工的值
console.log(checkedlength+"---"+checkedval);
var index = layer.confirm('确定分配' + checkedlength+'名员工到【巡检部门A】吗？', {
btn: ['确定', '取消'] //按钮
}, function () {
//layer.msg(data.SuccessStr, { anim: 6, icon: 1 });
layer.msg("分配成功", { anim: 6, icon: 1,time:1500 });
}, function () {
layer.close(index);
});
}
十、weui时间日期格式化方法
$("#datatext").datetimePicker({
title: "请选择日期",
times: function () {
return [];
},
onClose: function (data) {
console.log(data.value)
if (data.value) {
$("#datatext").val(data.value[0] + "-" + data.value[1] + "-" + data.value[2]);
selsectyear = data.value[0];
selsectmonth = data.value[1];
selsectday = data.value[2];
}
}
});
十一、获取验证码
var _code = "";
var isClick = true;
function GetCode(ele) {var phone = $("#phone").val();
if (phone == "") {
window.wxc.xcConfirm("请输入手机号！", { title: "提示:" });
return;
}
if (!(/^1[34578]\d{9}$/.test(phone))) {
window.wxc.xcConfirm("手机号不合法！", { title: "提示:" });
return;
}if (isClick) {
isClick = false;
var timer;
var n = 60;
if (n == 60) {
clearInterval(timer)
};
var that = ele;
timer = setInterval(function () {
n--;
if (n == 0) {
clearInterval(timer);
that.innerHTML = "重新获取";
isClick = true;
n = 60;
} else {
n >= 10 ? that.innerHTML = n + 's后重发' : that.innerHTML = '0' + n + 's后重发';
}
}, 1000);
}
}
十二、弹出框一直在屏幕中间
//让指定的DIV始终显示在屏幕正中间
function letDivCenter(divName){
var top = ($(window).height() - $(divName).height())/2;
var left = ($(window).width() - $(divName).width())/2;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
$(divName).css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();
}
十三、QQ咨询
οnclick="javascript:window.open('http://wpa.qq.com/msgrd?v=3&uin=2900670495&site=qq&menu=yes', '_blank');" title="点击咨询"
十四、去空格
//写一个function，清除字符串前后的空格。字符串中的所有空格（兼容所有浏览器）
function trim(str){
return str.replace(/(^\s*)|(\s*$)|(\s*)/g,"")
}
十五、去滚动条
::-webkit-scrollbar {
width: 0px;
height: 1px;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.2);
}
.categroy-cnt::-webkit-scrollbar {
background-color: transparent;
}
/*页面滚动条*/
html::-webkit-scrollbar {
width:6px;
height:6px;
background:#CCC;
}
html::-webkit-scrollbar-button {
display:none;
}
html::-webkit-scrollbar-track-piece {
display:none;
}
html::-webkit-scrollbar-thumb {
background:#999;
}
html::-webkit-scrollbar-thumb:hover {
background:#3399CC;
}
十六、解决浮点误差js
当你拿到 1.4000000000000001 这样的数据要展示时，建议使用 toPrecision 凑整并 parseFloat 转成数字后再显示，如下：
parseFloat(1.4000000000000001.toPrecision(12)) === 1.4 // True
封装成方法就是：function strip(num, precision = 12) {
return +parseFloat(num.toPrecision(precision));
}
为什么选择 12 做为默认精度？这是一个经验的选择，一般选12就能解决掉大部分0001和0009问题，而且大部分情况下也够用了，如果你需要更精确可以调高。
十七、判断是手机还是电脑访问
//flag返回值为true则说明是电脑客户端
function check() {
var userAgentInfo=navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod", "BlackBerry", "webOS");
var flag=true;
for(var v=0;v<Agents.length;v++) {
if(userAgentInfo.indexOf(Agents[v])>0) {
flag=false;
break;
}
}
return flag;
}
十八、js倒计时
function showTime() {
var newTime = new Date();
var endTime = new Date("2019/12/31,00:00:00");
var totalTime = parseInt(endTime.getTime() - newTime.getTime()) / 1000;var day = parseInt(totalTime / (24 * 60 * 60));
var hour = parseInt((totalTime / (60 * 60)) % 24);
var min = parseInt((totalTime / 60) % 60);
var seconds = parseInt(totalTime % 60);
document.getElementById("show").innerHTML = "ߠkڽŪ۹Ԑ" + day + "ͬ" + hour + "ʱ" + min + "ؖ" + seconds + "ī";
setTimeout(showTime, 500)
}
showTime();
十九、原生滚动加载函数
$(window).scroll(function () {
if ($(document).scrollTop() <= 0) {
}
if ($(document).scrollTop() >= $(document).height() - $(window).height()) {
if (NextPage < MaxPage || NextPage == MaxPage) {
$("#nonext").hide();
$("#uping").hide();
$("#loading").show();
LoadData(NextPage);
}
}
});
二十、页面禁止查看源代码函数
document.οnkeydοwn=function(){
var e = window.event||arguments[0];
if(e.keyCode==123){
alert('请尊重劳动成果！');
return false;
}else if((e.ctrlKey)&&(e.shiftKey)&&(e.keyCode==73)){
alert('请尊重劳动成果！');
return false;
}else if((e.ctrlKey)&&(e.keyCode==85)){
alert('请尊重劳动成果！');
return false;
}else if((e.ctrlKey)&&(e.keyCode==83)){
alert('请尊重劳动成果！');
return false;
}
}
document.οncοntextmenu=function(){
alert('请尊重劳动成果！');
return false;
}
二十一、enter键快速登录或搜索
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 13) {
Login();
}
};
二十二、阻止蒙层底层滑动
$('#showmask').on("touchmove", function(e) {
e.preventDefault();
})
二十三、输入金额控制两位小数，所需金币先按1元=100金币计算
<input type="text" οnkeyup="this.value=checkmoney(this.value)" />
function checkmoney(value) {
let regStrs = [
['^0(\\d+)$', '$1'], // 禁止录入整数部分两位以上，但首位为0
['[^\\d\\.]+$', ''], // 禁止录入任何非数字和点
['\\.(\\d?)\\.+', '.$1'], // 禁止录入两个以上的点
['^(\\d+\\.\\d{2}).+', '$1'] // 禁止录入小数点后三位位以上
];
for(let i = 0; i < regStrs.length; i++) {
let reg = new RegExp(regStrs[i][0]);
value = value.replace(reg, regStrs[i][1]);
}
if(value.substring(0,1)=='.'){
value=''
}
if(value!=''){
var needmoney=parseInt(value*100)
if(needmoney>parseInt($(".current_money").find('span').html())){
//计算金币大于当前金币
$(".money_lack").css('display','block');
$('.putbtn').css('background','#c1c1c1')
}else if(needmoney===0){
//输入的金额为0
$('.putbtn').css('background','#c1c1c1')
$(".money_lack").css('display','none');
}else{
//输入金额正常
$('.putbtn').css('background','#ff720e')
$(".money_lack").css('display','none');
}
}else{
//不输入金额
needmoney=0
$('.putbtn').css('background','#c1c1c1')
$(".money_lack").css('display','none');
}
//计算的金币个数
$('.money_need').find('span').html(needmoney)
return value;
}
二十四、滚定判断是否滚到底部
$(document).scroll(function(){
if($(document).scrollTop()+$(window).height()==$(document).height()){
$(".apply_agree").css('background-color','#ff720e');
$(".apply_agree").attr('onclick', 'agreebtn()');
}else{
$(".apply_agree").css('background-color','#c1c1c1');
$(".apply_agree").removeAttr('onclick', '');
}
})
二十五、对象拼接成查询参数字符串
function getContactParamsString(paramMap) {
var str = "";
for (var key in paramMap) {
str = str + key + "=" + paramMap[key] + "&";
}
return str;
}
二十六、导航透明度控制
window.onscroll = function() {
$(".tit").css("opacity", (window.scrollY / window.innerHeight) * 10);
}
.tit {
width: 100%;
height: 1rem;
background: rgb(31, 204, 158);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
opacity: 0;
}
二十七、判断身份证号
if(!judgeCard($("#idcard").val().trim())) {
alertTip("请输入正确的身份证号码！", TOAST_LENGTH);
return
}function judgeCard(str) {
if (!str) {
alertTip(errMes["nullCardCode"],TOAST_LENGTH)
} else {
var num = str.toUpperCase();
if (!(/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(num))) {
alertTip(errMes["cardCode"],TOAST_LENGTH);
return false
}
var len, re;
len = num.length;
if (len == 15) {
re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/);
var arrSplit = num.match(re);
var dtmBirth = new Date("19" + arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
var bGoodDay;
bGoodDay = (dtmBirth.getYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
if (!bGoodDay) {
alertTip(errMes["cardCode"],TOAST_LENGTH);
return false
} else {
if (new Date().getYear() < dtmBirth.getYear()) {
return false
} else {
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2");
var nTemp = 0,
i;
num = num.substr(0, 6) + "19" + num.substr(6, num.length - 6);
for (i = 0; i < 17; i++) {
nTemp += num.substr(i, 1) * arrInt[i]
}
num += arrCh[nTemp % 11];
return true
}
}
}
if (len == 18) {
var code = str.split('');
re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/);
var arrSplit = num.match(re);
var dtmBirth = new Date(arrSplit[2] + "/" + arrSplit[3] + "/" + arrSplit[4]);
var bGoodDay;
bGoodDay = (dtmBirth.getFullYear() == Number(arrSplit[2])) && ((dtmBirth.getMonth() + 1) == Number(arrSplit[3])) && (dtmBirth.getDate() == Number(arrSplit[4]));
if (!bGoodDay) {
alertTip(errMes["cardCode"],TOAST_LENGTH);
return false
} else {
var valnum;
var arrInt = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2);
var arrCh = new Array("1", "0", "X", "9", "8", "7", "6", "5", "4", "3", "2");
var nTemp = 0,
i;
for (i = 0; i < 17; i++) {
nTemp += num.substr(i, 1) * arrInt[i]
}
valnum = arrCh[nTemp % 11];
if (valnum.toLowerCase() != code[17].toLowerCase()) {
return false;
}
return true
}
}
alertTip(errMes["cardCode"],TOAST_LENGTH);
return false
}
}
二十八、输入框非数字清空
οnkeyup="this.value=this.value.replace(/\D/gi,'')"
二十九、移动端全屏背景css
html,
body {
width: 100%;
height: 100%;
}.logo {
width: 100%;
height: 100%;
background: url('../images/bg1.png')no-repeat center;
background-size: 100% 100%;
}
三十、移动端为文档绑定触摸事件
document.ontouchmove = function() {
$('.btngroups').css({
'bottom':'-2rem',
'transition':'1s',
});
}
document.ontouchend = function() {
$('.btngroups').css({
'bottom':'0.2rem',
'transition':'1s',
});
}
三十一、函数节流（减少代码执行频率）
function throttle(fn, interval = 500) {
let run = true;
return function() {
if(!run) return;
run = false;
setTimeout(() => {
fn.apply(this, arguments);
run = true;
}, interval);
};
}
三十二、函数防抖（判断某个动作结束，如刚刚的滚动结束、input输入结束等）
function debounce(fn, interval = 500) {
let timeout = null;
return function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
fn.apply(this, arguments);
}, interval);
};
}
三十三、弹出数字键盘
<!-- 有"#" "*"符号输入 -->
<input type="tel">
<!-- 纯数字 -->
<input pattern="\d*">
三十四、打开原生应用
<a href="weixin://">打开微信</a>
<a href="alipays://">打开支付宝</a>
<a href="alipays://platformapi/startapp?saId=10000007">打开支付宝的扫一扫功能</a>
<a href="alipays://platformapi/startapp?appId=60000002">打开支付宝的蚂蚁森林</a>
三十五、解决active伪类失效
<body ontouchstart></body>//给body注册一个空事件
三十六、忽略自动识别
<!-- 忽略浏览器自动识别数字为电话号码 -->
<meta name="format-detection" content="telephone=no"><!-- 忽略浏览器自动识别邮箱账号 -->
<meta name="format-detection" content="email=no">
三十七、解决input失焦后页面没有回弹
一般出现在
IOS设备中的微信内部浏览器，出现的条件为：
- 页面高度过小
- 聚焦时，页面需要往上移动的时候
所以一般
input在页面上方或者顶部都不会出现无法回弹解决办法为，在聚焦时，获取当前滚动条高度，然后失焦时，赋值之前获取的高度：
<template>
<input type="text" @focus="focus" @blur="blur">
</template><script>
export default {
data() {
return {
scrollTop: 0
}
},
methods: {
focus() {
this.scrollTop = document.scrollingElement.scrollTop;
},
blur() {
document.scrollingElement.scrollTo(0, this.scrollTop);
}
}
}
</script>
扫一扫
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
