可直接到我的前端站去看溉箕。
手機號中間四位顯示星號
function handelMobile(value){
if(!value) return '';
if(typeof value !== 'string') value = value.toString();
return value.replace(/^(\d{3})\d*(\d{4})$/,'$1****$2');
}
// handelMobile(13923451241) 輸出:"139****1241"
日期格式化函數(shù)
// 也可獲取當(dāng)前日期:formatTime(new Date())
function formatTime(d){ // 輸出為 : 2019-10-08 17:50:44 星期二
const year = d.getFullYear();
const month = d.getMonth() + 1;
const day = d.getDate();
let days = d.getDay();
const weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
const week = weeks[days];
const hour = d.getHours();
const minute = d.getMinutes();
const second = d.getSeconds();
return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':') + ' ' + week;
},
function formatNumber(n){
n = n.toString()
return n[1] ? n : '0' + n
}
清除空格
// 清除所有空格
function removeAllSpace(str) {
return str.replace(/\s+/g, "");
}
// 清除左空格/右空格
function ltrim(s){ return s.replace( /^(\s*| *)/, ""); }
function rtrim(s){ return s.replace( /(\s*| *)$/, ""); }
復(fù)制文本內(nèi)容到剪切板
<div id="copeText">12345678</div>
<input type="button" onClick="copyUrl()" value="點擊復(fù)制代碼" />
function copeText(){
var copeText=document.getElementById("copeText").innerText;
var oInput = document.createElement('input');
oInput.value = copeText;
document.body.appendChild(oInput);
oInput.select(); // 選擇對象
document.execCommand("Copy"); // 執(zhí)行瀏覽器復(fù)制命令
document.body.removeChild(oInput)
// oInput.className = 'oInput';
// oInput.style.display='none';
// alert('復(fù)制成功');
}
前端生成文件并下載
function createAndDownloadFile(fileName, content) {
const aTag = document.createElement('a');
const blob = new Blob([content]);
aTag.download = `${fileName}.json`;
aTag.href = URL.createObjectURL(blob);
aTag.click();
URL.revokeObjectURL(blob);
}
// 以下是一個例子呛占,親測有效
axios({
method: 'post',
url: url,
data: paramsObj,
responseType: 'blob' // 表明返回服務(wù)器返回的數(shù)據(jù)類型
}).then((res) => { // 處理返回的文件流
let blob = new Blob([res.data], {type: "application/vnd.ms-excel"});
const aLink = document.createElement('a');
document.body.appendChild(aLink);
aLink.style.display='none';
const objectUrl = window.URL.createObjectURL(blob);
aLink.href = objectUrl;
aLink.download = '詞云數(shù)據(jù)'; //下載后的文件名稱
aLink.click();
document.body.removeChild(aLink);//這句是針對火狐的祖今,沒有這句話妆距,火狐就根本導(dǎo)不出文件來穷遂,火狐對a.download似乎有點個人意見,但Chrome可以娱据,折騰了好久蚪黑。
})
axios全局設(shè)置
//授權(quán)過期后axios操作跳轉(zhuǎn)到登錄頁的一種全局處理方式
axios.interceptors.request.use(
config => {
//如果 requestedWith 為 null盅惜,則為同步請求。
//設(shè)置 requestedWith 為 XMLHttpRequest 則為 Ajax 請求忌穿。
config.headers['X-Requested-With'] = 'XMLHttpRequest';
return config
},function(error){
return Promise.reject(error)
}
)
axios.interceptors.response.use(function (response) {
return response
}, function (error) {
if (error.response.status == 401){
window.location.href="/admin/login";
}
if (error.response.status == 403){
console.log("對不起抒寂,您的權(quán)限不足");
}
if (error.response.status == 600){
console.log({text:'網(wǎng)絡(luò)異常'});
}
if (error.response.status == 601){
console.log({text:'網(wǎng)絡(luò)異常'});
}
//return Promise.reject(error)
})
判斷是否為Iphone X
// 如何判斷是不是Iphone X
function isIphoneX(){
return /iphone/gi.test(navigator.userAgent) && (screen.height == 812 && screen.width == 375)
}
判斷為IOS還是安卓
// true:ios false:android
function isIOSFn(){
var isIOS = true;
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/); //ios終端
if(_isAndroid){
isIOS = false;
}
if(_isiOS){
isIOS = true;
}
return isIOS;
}
判斷是PC還是Mobile
function isPc(){
//true:是PC端 false:是移動端
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
js動態(tài)生成二維碼
<div id="qrcode"></div>
#qrcode{
width:200px; height:200px;position: fixed;bottom: 40%; right: 20%;
}
// 引入外部js文件
// QRCode.js 是一個用于生成二維碼的 JavaScript 庫。主要是通過獲取 DOM 的標(biāo)簽,再通過 HTML5 Canvas 繪制而成,不依賴任何庫
<script src="QRCode.js"></script>
// 方法調(diào)用
var qrcode = new QRCode(document.getElementById("qrcode"), { width : 200,height : 200 });
var token='params';
var QRCodeUrl='http:\\www.baidu.com'+'/Share/ScanQRCode?token='+token;
qrcode.makeCode(QRCodeUrl);
// QRCode.js文件
下載地址:http://files.cnblogs.com/files/weishuanbao/QRCode.js
數(shù)組去重
//1. 最簡單的方法就是利用 ES6 的 Set
var s = new Set([1, 2, 3, 3, '3']); // Set {1, 2, 3, "3"}
Array.from(s); // 輸出為:[1, 2, 3, "3"]
//2. 利用 filter 可以巧妙地去除 Array 的重復(fù)元素
var r,arr = ['apple', 'strawberry','awgpearkhl', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
r = arr.filter(function (element, index, self){
return self.indexOf(element) === index;
});
r;
千位分隔符
//1. 使用正則表達式 下面語句都輸出為: "123,456,789"
String(123456789).replace(/(\d)(?=(\d{3})+$)/g, "$1,");
//2.使用toLocaleString()方法
(123456789).toLocaleString('en-US');
如何判斷一個變量是否為數(shù)組(isArray)
// 1掠剑、instanceof
function isArray (obj) {
return obj instanceof Array;
}
// 2屈芜、Array對象的 isArray方法
function isArray (obj) {
return Array.isArray(obj);
}
// 3、Object.prototype.toString
function isArray (obj) {
return Object.prototype.toString.call(obj) === '[object Array]';
}
將數(shù)字轉(zhuǎn)換為大寫金額
/**
* 將數(shù)字轉(zhuǎn)換為大寫金額
* @param Num 數(shù)值
// 調(diào)用:changeToChinese(8998.2) 輸出為:"捌仟玖佰玖拾捌元貳角"
* */
function changeToChinese(Num) {
//判斷如果傳遞進來的不是字符的話轉(zhuǎn)換為字符
if (typeof Num === "number") Num = new String(Num);
Num = Num.replace(/,/g, "") //替換tomoney()中的“,”
Num = Num.replace(/ /g, "") //替換tomoney()中的空格
Num = Num.replace(/¥/g, "") //替換掉可能出現(xiàn)的¥字符
if (isNaN(Num)) return "";
//字符處理完畢后開始轉(zhuǎn)換朴译,采用前后兩部分分別轉(zhuǎn)換
var part = String(Num).split(".");
var newchar = "";
//小數(shù)點前進行轉(zhuǎn)化
for (var i = part[0].length - 1; i >= 0; i--) {
if (part[0].length > 10) return "";
var tmpnewchar = ""
var perchar = part[0].charAt(i);
switch (perchar) {
case "0":
tmpnewchar = "零" + tmpnewchar;
break;
case "1":
tmpnewchar = "壹" + tmpnewchar;
break;
case "2":
tmpnewchar = "貳" + tmpnewchar;
break;
case "3":
tmpnewchar = "叁" + tmpnewchar;
break;
case "4":
tmpnewchar = "肆" + tmpnewchar;
break;
case "5":
tmpnewchar = "伍" + tmpnewchar;
break;
case "6":
tmpnewchar = "陸" + tmpnewchar;
break;
case "7":
tmpnewchar = "柒" + tmpnewchar;
break;
case "8":
tmpnewchar = "捌" + tmpnewchar;
break;
case "9":
tmpnewchar = "玖" + tmpnewchar;
break;
}
switch (part[0].length - i - 1) {
case 0:
tmpnewchar = tmpnewchar + "元";
break;
case 1:
if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
break;
case 2:
if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
break;
case 3:
if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
break;
case 4:
tmpnewchar = tmpnewchar + "萬";
break;
case 5:
if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
break;
case 6:
if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
break;
case 7:
if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
break;
case 8:
tmpnewchar = tmpnewchar + "億";
break;
case 9:
tmpnewchar = tmpnewchar + "拾";
break;
}
var newchar = tmpnewchar + newchar;
}
//小數(shù)點之后進行轉(zhuǎn)化
if (Num.indexOf(".") != -1) {
if (part[1].length > 2) {
// alert("小數(shù)點之后只能保留兩位,系統(tǒng)將自動截斷");
part[1] = part[1].substr(0, 2)
}
for (i = 0; i < part[1].length; i++) {
tmpnewchar = ""
perchar = part[1].charAt(i)
switch (perchar) {
case "0":
tmpnewchar = "零" + tmpnewchar;
break;
case "1":
tmpnewchar = "壹" + tmpnewchar;
break;
case "2":
tmpnewchar = "貳" + tmpnewchar;
break;
case "3":
tmpnewchar = "叁" + tmpnewchar;
break;
case "4":
tmpnewchar = "肆" + tmpnewchar;
break;
case "5":
tmpnewchar = "伍" + tmpnewchar;
break;
case "6":
tmpnewchar = "陸" + tmpnewchar;
break;
case "7":
tmpnewchar = "柒" + tmpnewchar;
break;
case "8":
tmpnewchar = "捌" + tmpnewchar;
break;
case "9":
tmpnewchar = "玖" + tmpnewchar;
break;
}
if (i == 0) tmpnewchar = tmpnewchar + "角";
if (i == 1) tmpnewchar = tmpnewchar + "分";
newchar = newchar + tmpnewchar;
}
}
//替換所有無用漢字
while (newchar.search("零零") != -1)
newchar = newchar.replace("零零", "零");
newchar = newchar.replace("零億", "億");
newchar = newchar.replace("億萬", "億");
newchar = newchar.replace("零萬", "萬");
newchar = newchar.replace("零元", "元");
newchar = newchar.replace("零角", "");
newchar = newchar.replace("零分", "");
if (newchar.charAt(newchar.length - 1) == "元") {
newchar = newchar + "整"
}
return newchar;
}
將阿拉伯?dāng)?shù)字翻譯成中文的大寫數(shù)字
/**
* 將阿拉伯?dāng)?shù)字翻譯成中文的大寫數(shù)字
* @param num 數(shù)字
// numberToChinese(59999.12) 輸出為:"五萬九仟九百九十九點一二"
* */
function numberToChinese(num) {
var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");
var BB = new Array("", "十", "百", "仟", "萬", "億", "點", "");
var a = ("" + num).replace(/(^0*)/g, "").split("."),
k = 0,
re = "";
for (var i = a[0].length - 1; i >= 0; i--) {
switch (k) {
case 0:
re = BB[7] + re;
break;
case 4:
if (!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")
.test(a[0]))
re = BB[4] + re;
break;
case 8:
re = BB[5] + re;
BB[7] = BB[5];
k = 0;
break;
}
if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
re = AA[0] + re;
if (a[0].charAt(i) != 0)
re = AA[a[0].charAt(i)] + BB[k % 4] + re;
k++;
}
if (a.length > 1) // 加上小數(shù)部分(如果有小數(shù)部分)
{
re += BB[6];
for (var i = 0; i < a[1].length; i++)
re += AA[a[1].charAt(i)];
}
if (re == '一十')
re = "十";
if (re.match(/^一/) && re.length == 3)
re = re.replace("一", "");
return re;
}
JS獲取瀏覽器名字及版本號
工作中需要通過JS去獲取當(dāng)前使用的瀏覽器的名字以及版本號井佑,網(wǎng)上大堆資料都有一個關(guān)鍵詞是 navigator.appName,但是這個方法獲取的瀏覽器的名字只有兩種要么是IE要么就是Netscap眠寿,倒是可以用來判斷是否使用了IE躬翁,但是我想獲取具體的瀏覽器產(chǎn)品名字比如 Firefox,Chrome等盯拱。所以只好通過navigator.userAgent盒发,但是這個字符串是非常長的,分析他的特征狡逢,通過正則表達式來解決這個問題是不錯的方法宁舰。
- 獲取瀏覽器名字+版本字符串
function getBrowserInfo() {
var agent = navigator.userAgent.toLowerCase();
var regStr_ie = /msie [\d.]+;/gi;
var regStr_ff = /firefox\/[\d.]+/gi
var regStr_chrome = /chrome\/[\d.]+/gi;
var regStr_saf = /safari\/[\d.]+/gi;
//IE
if (agent.indexOf("msie") > 0) {
return agent.match(regStr_ie);
}
//firefox
if (agent.indexOf("firefox") > 0) {
return agent.match(regStr_ff);
}
//Chrome
if (agent.indexOf("chrome") > 0) {
return agent.match(regStr_chrome);
}
//Safari
if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
return agent.match(regStr_saf);
}
}
- 然后獲取版本號
var browser = getBrowserInfo() ;
alert(browser); //browser 為當(dāng)前瀏覽器名稱以及版本號
var verinfo = (browser+"").replace(/[^0-9.]/ig,""); //verinfo 為當(dāng)前瀏覽器版本號
vue-cli 項目構(gòu)建
在node.js 以及npm安裝的前提下。用vue-cli腳手架簡單構(gòu)建一個項目奢浑。
- $ npm install -g vue-cli
- $ vue init webpack my-project
- $ cd my-project
- $ npm install
- $ npm run dev
jq | 移動上拉加載
//控制頁面 滾動的時候 一次請求一遍 無數(shù)據(jù)時 goLoadData = false;
var goLoadData = true;
$(document).ready(function(){
$('body').scroll(function(e) {
if ((this.scrollHeight - (this.scrollTop + this.clientHeight) < 200 )){
if(goLoadData){
//加載下一頁數(shù)據(jù)
goLoadData = false;
}
}else{
// 沒有滾動到底端TODO 其他處理
}
});
});
jq | ajaxSetup()為ajax請求瘦身
/* 當(dāng)頁面有很多ajax請求明吩,且這些請求的參數(shù)比如url、type殷费、dataType都一樣印荔,
你會在每個請求里把這些參數(shù)都寫一遍還是另辟蹊徑?其實ajax有一個ajaxSetup方法详羡,
它就是用來設(shè)置全局ajax默認(rèn)選項的仍律。有了它,再也不用在每個ajax請求中把相同的參數(shù)都寫一遍了实柠。
*/
$.ajaxSetup({
url: '/api/',
type: 'post',
dataType: 'json',
error: function() {
alert('調(diào)用接口失敗');
return false;
}
});
/* 此外水泉,還有一個經(jīng)常遇到的場景——在每次請求開始的時候,
需要顯示一個loading動畫窒盐,當(dāng)請求結(jié)束時動畫隱藏草则。
對于這個,jQuery也是有封裝好了的方法供我們?nèi)ナ褂脟}蟹漓。
*/
$('#loading').ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
//例如:
$.ajaxSetup({
dataType:"json",
timeout:10000,
statusCode:{
401:function(data){
location.href="/admin/login";
},
403:function(data){
alert("對不起炕横,您的權(quán)限不足");
},
600:function(){
alert({text:'網(wǎng)絡(luò)異常'});
},
601:function(){
alert({text:'網(wǎng)絡(luò)異常'});
},
}
});
var commonJs = {
post:function(url,data,success,error,timeout,before,compelete){
commonJs.ajax('POST',url,data,success,error,timeout,before,compelete);
},
get:function(url,data,success,error,timeout,before,compelete){
commonJs.ajax('GET',url,data,success,error,timeout,before,compelete);
},
ajax:function(type,url,data,success,error,timeout,before,compelete){
if(!timeout){
timeout=10000;
}
$.ajax({
timeout:timeout,
url:url,
type:type,
data:data,
dataType:'json',
success:function(data){
if(data){
switch(data.code){
case 200:
if($.isFunction(success)){
success(data);
}
break;
case 400:
if($.isFunction(error)){
error(data);
}else{
if(data.msg){
alert(data.msg);
}
}
break;
default:
if($.isFunction(error)){
error(data);
}else{
if(data.msg){
alert(data.msg);
}
}
break;
}
}
},
error:function(){
if($.isFunction(error)){
try{error()}catch(error){};
return;
}
}
});
}
}
jq | 添加水印背景
<canvas id="myCanvas"></canvas>
#myCanvas {
position: absolute;
z-index: 1000;
pointer-events: none;
}
$(window).resize(resizeCanvas);
function resizeCanvas() {
var canvas = document.getElementById("myCanvas");
canvas.width = $(document).width();
canvas.height = $(document).height();
init();
};
resizeCanvas();
function init() {
var doWidth = $(document).width();
var doHeight = $(document).height();
//獲取Canvas對象(畫布)
var canvas = document.getElementById("myCanvas");
//簡單地檢測當(dāng)前瀏覽器是否支持Canvas對象,以免在一些不支持html5的瀏覽器中提示語法錯誤
if (canvas.getContext) {
//獲取對應(yīng)的CanvasRenderingContext2D對象(畫筆)
var ctx = canvas.getContext("2d");
//設(shè)置字體樣式
ctx.font = "italic small-caps 32px arial";
//設(shè)置字體填充顏色
ctx.fillStyle = "rgba(220,220,220, .36)";
//向上旋轉(zhuǎn)5度
ctx.rotate(-5 * Math.PI / 180);
//從坐標(biāo)點(50,50)開始繪制文字
var name = '[保密].'+$("#username").val()+$("#txtJobnumber").val();
//var heightcount = Math.floor(doHeight / 10);
//var widthcount = Math.floor(doWidth / 8);
for (var j = -400; j < doHeight; j = j + 200) {
for (var i = -400; i < doWidth ; i = i + 420) {
ctx.fillText(name, i, j);
}
}
}
}
jq | 文字列表循環(huán)向上滾動
(function($){
$.fn.myScroll = function(options){
var defaults = {
speed:40,
rowHeight:24
};
var opts = $.extend({}, defaults, options), intId = [];
function marquee(obj, step){
obj.find("ul").animate({ marginTop: '-=1'},0,function(){
var s = Math.abs(parseInt($(this).css("margin-top")));
if(s >= step){
$(this).find("li").slice(0, 1).appendTo($(this));
$(this).css("margin-top", 0);
}
});
}
this.each(function(i){
var sh = opts["rowHeight"], speed = opts["speed"], _this = $(this);
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
_this.hover(function(){
clearInterval(intId[i]);
},function(){
intId[i] = setInterval(function(){
if(_this.find("ul").height()<=_this.height()){
clearInterval(intId[i]);
}else{
marquee(_this, sh);
}
}, speed);
});
});
}
})(jQuery);
$(function(){
var _h = $("div.list_lh li").height();
_h = _h.toFixed(2);
$("div.list_lh").myScroll({
speed:20, //數(shù)值越大葡粒,速度越慢
rowHeight:_h //li的高度
});
});