1.求平均值
//求平均值函數(shù)
var avgVal = function (averageArr) {
var avg = 0;
var sum = 0;
for (var i = 0; i < averageArr.length; i++) {
sum += averageArr[i];
}
avg = sum / averageArr.length;
return avg;
}
//算出平均值
var avgX = avgVal(averageXArr)铸史；
2.把數(shù)組按照從大到小的順序排列
var arr =[9,1,0,8];
var sortNumber = function (a, b) {
return b - a
};
var newSortArr = arr.sort(sortNumber);
3.數(shù)字千位分割
function(num){
if(num){
return num.toString().replace(/^\d+/g, function(m){
return m.replace(/(?=(?!^)(\d{3})+$)/g, ',');
});
}
return 0;
};
4.以今天為節(jié)點坝疼，顯示前三周及后一周的日期
var base = +new Date() - 23 * 24 * 3600 * 1000;
var oneDay = 24 * 3600 * 1000;
var dateData = [];
for (var i = 0; i < 28; i++) {
var now = new Date((base += oneDay));
dateData.push(
[now.getMonth() + 1, now.getDate()].slice(0, 1) + "月" + [now.getMonth() + 1, now.getDate()].slice(1) + "日"
);
}
5.根據(jù)圖片長寬比例顯示圖片是橫向還是縱向（顯示圖片的原始比例）
var zooming = function (test) {
var that = $(test).find('.zooming');//class為zooming的div
var w = that.width();
var h = that.height();
var img = that.find('img');
var src = img.attr('src');
var image = new Image();
image.src = src;
image.onload = function () {
var W = image.width;
var H = image.height;
if ((w / h) < (W / H)) { //比如3:4小于4:3
img.addClass('active');//橫向展示的樣式
} else {
img.removeClass('active');
}
}
}
.zooming img{
height:100%;
width:auto;
}
.zooming img.active{
width:100%;
height:auto;
}
6.如果title中有#號禁荸，把#號替換成后邊f(xié)unction中的內(nèi)容
var title=('測試#' || "").replace(/\#([^\s]+)\#/g, function(a, b){
return '<span class="chatItemSubTitle">' + b + "</span>";
}),
7.在三維數(shù)組中，求子數(shù)組中第一個和第三個元素在所有數(shù)據(jù)中最小的三個值
//比如如下三維數(shù)組异袄，求所有數(shù)組中第一個值和第四個值在所有數(shù)組中最小的兩個數(shù)組
var arr=[
[
[1,55,9,56,"良"],
[2,25,11,9,"優(yōu)"],
[3,56,7,5,"良"],
],
[
[1,55,9,56,"良"],
[2,25,11,21,"優(yōu)"],
[3,56,7,63,"良"],
]
]
var getDataMin = function (datas) {
var arr = [],xArr=[],allData=[];
for(var a=0;a<datas.length;a++){
var categoryArr=datas[a];
for (var i = 0; i < categoryArr.length; i++) {
xArr.push(parseInt(categoryArr[i][0]));//所有數(shù)組的第一個數(shù)據(jù) allData.push(datas[a][i]);
}
}
var xArr1=xArr.slice();
//按從小到大排序
xArr.sort(function(a,b){return a-b;});
var minValIndex=[],minXValIndex=[];
var num,numX;//獲取最小的三個值再原數(shù)組中index
for(var j=0;j<3;j++){
var indexofXJ=xArr1.indexOf(xArr[j]);
if(xArr1.indexOf(xArr[j-1])==indexofXJ){
xArr1.splice(indexofXJ,1,'');//數(shù)組中相鄰的兩個值若相同則把其中一個設(shè)為''
indexofXJ=indexofXJ+1;
}
numX=indexofXJ;
minXValIndex.push(allData[numX][3]);
}
return {
minXIndex:minXValIndex,
};
};
8.數(shù)字滾動效果
function(el, num, from){ //第一個為dom節(jié)點夫偶，第二個為數(shù)字
from = from || 0;
var step = Math.floor((num - from) / 20); //滾動的間隔
el.innerHTML = $we.str.formatThousands(from);
var timeInterval = setInterval(function(){
from = Math.min(from + step, num); //當(dāng)沒到最大值時，繼續(xù)滾動
el.innerHTML = $we.str.formatThousands(from);
if(from >= num){
clearInterval(timeInterval);
}
}, 20);
};
9.文字換行效果
function (str, n) { //文字和英文都超過6個字節(jié)換行
if (!str) {
return "";
}
var cont = function (char) {
var charCode = char.charCodeAt(0);
if (charCode > 0 && charCode <= 128) {
return 1;
} else {
return 2;
}
};
var tmpN = cont(str[0]),
ret = [str[0]],
flag = 0,
chCode;
for (var i = 0; i + 1 < str.length; ++i) {
chCode = cont(str[i + 1]);
if (tmpN + chCode > n) {
flag++;
if (flag == 2) {
ret.splice(ret.length - 2, 2, "...");
return ret.join("");
} else {
if(n==8){
ret.push("<br/>");
tmpN = 0;
}else{
ret.push("\n");
tmpN = 0;
}
}
}
tmpN += chCode;
ret.push(str[i + 1]);
}
return ret.join("");
};
10.JavaScript判斷是否是iPhone X系列機型
參考文章鏈接：https://cloud.tencent.com/developer/article/1537948
const isIphonex = () => {
// X XS, XS Max, XR
const xSeriesConfig = [
{
devicePixelRatio: 3,
width: 375,
height: 812
},
{
devicePixelRatio: 3,
width: 414,
height: 896
},
{
devicePixelRatio: 2,
width: 414,
height: 896
}
] // h5
if (typeof window !== 'undefined' && window) {
const isIOS = /iphone/gi.test(window.navigator.userAgent)
if (!isIOS) return false
const { devicePixelRatio, screen } = window
const { width, height } = screen
return xSeriesConfig.some(
item =>
item.devicePixelRatio === devicePixelRatio &&
item.width === width &&
item.height === height
)
}
return false
}
if (isIphonex()) {
//do something
}
11.原生js實現(xiàn)trigger方法
<button id="btn-1">Button-1</button>
<script>
// 假如想通過點擊 Button-1 觸發(fā) window 的 resize 事件
let btn_1 = document.getElementById('btn-1');
btn_1.onclick = function () {
var myEvent = new Event('resize');
window.dispatchEvent(myEvent);
}
</script>
12.一維數(shù)組根據(jù)對象屬性轉(zhuǎn)二維數(shù)組
原數(shù)組：
var arr=[
{
divName: "宿遷市"
population: 10012
populationCity: 15300
populationRate: 123
},
{
divName: "上海市"
population: 10015
populationCity: 155300
populationRate: 123
}
轉(zhuǎn)成：
var arr2=[
['宿遷市','上海市']
[10012, 10015]
[15300, 155300]
[123, 123]
]
js為：
//把后臺傳過來的數(shù)據(jù)改成一個數(shù)組中按照屬性劃分為三個子數(shù)組的形式
translateArray(arrayData) {
let map=[];
let map2 = {};
let list = []; //總數(shù)組
let array=arrayData.concat();
let chartList = {
divName: [],
list: []
};
for(var a=0;a<Object.keys(array[0]).length;a++){
map.push({})
}
while (array.length) {
//獲取數(shù)組中單個對象
let current = array.shift(); // 會影響原數(shù)組
//取出單個對象中屬性的值
let items = Object.values(current);
//把對象的值作為鍵值對放到一個大對象中
for (var i = 0; i < items.length; i++) {
var keys = Math.random() + i;
let defaultValue=items[i]==0?0:[]
map[i][keys] = items[i]||defaultValue;
}
map2[current.divName] = map2[current.divName] || [];
}
let arr = [];
map.forEach(function(item, index) {
arr = Object.values(item); //大對象中屬性值取出放到數(shù)組中
for (var j = 0; j < arr.length; j++) {
arr[j] = Math.round(parseFloat(arr[j])*100)/100;//把字符串變成保留兩位小數(shù)的數(shù)字且四舍五入宙攻，不補位
}
list.push(arr);
});
chartList.divName = Object.keys(map2);
chartList.list = list;
return chartList;
}
}
13.根據(jù)傳入的日期格式來顯示日期
function (ms, format){
if(!ms){
return "";
}
if((""+ms).match(/-/)){
return ms;
}
var date = new Date();
date.setFullYear(1970,1,1);
date.setTime(0);
date.setMilliseconds(ms);
// return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
// return (date.getMonth() + 1) + "-" + date.getDate();
format = format || "M-d"; // y-M-d h:m:s
var month = date.getMonth() + 1;
return format.replace(/y/g, date.getFullYear())
.replace(/M/g, (month))
.replace(/d/g, (date.getDate()>9?date.getDate():"0"+date.getDate()))
.replace(/h/g, (date.getHours()>9?date.getHours():"0"+date.getHours()))
.replace(/m/g, (date.getMinutes()>9?date.getMinutes():"0"+date.getMinutes()))
.replace(/s/g, (date.getSeconds()>9?date.getSeconds():"0"+date.getSeconds()));
};
14.獲取一段話的字符長度（包括漢字字母）
getTxtLength (str) {
if (!str) {
return ;
}
var cont = function (char) {
var charCode = char.charCodeAt(0);
if (charCode > 0 && charCode <= 128) {
return 1;
} else {
return 2;
}
};
var tmpN = cont(str[0]),
chCode;
for (var i = 0; i + 1 < str.length; ++i) {
chCode = cont(str[i + 1]);
tmpN += chCode;
}
return tmpN;
},
15.頁面切換設(shè)置不同的背景音樂
function HTML5Audio(url, loop) {
var audio = new Audio(url);
audio.autoplay = true;
audio.loop = loop || false; //是否循環(huán)
audio.play();
return {
end: function(callback) {
audio.addEventListener('ended', function() {
callback()
}, false);
}
}
}
var audio1 = HTML5Audio(playURl)
audio1.end(function() {
Html5Audio(cycleURL, true)
})
16.在同一塊區(qū)域中，點擊切換顯示不同的圖片
var page = document.querySelector("#page");
//層級
var index = 10;
//切換切換
page.addEventListener("change",function(e){
//頁面元素
var pageElement = document.querySelector("." + e.target.value)
pageElement.style.zIndex = ++index; //根據(jù)index顯示不同的頁面
},false)
<section class="container">
<!-- 第一幅畫面 -->
<section class="page-a bg-adaptive">
</section>
<!-- 第二幅畫面 -->
<section class="page-b bg-adaptive">
</section>
<!-- 第三幅畫面 -->
<section class="page-c bg-adaptive">
</section>
</section>
選擇頁面：
<select id="page">
<option value="page-a" selected="">1</option>
<option value="page-b">2</option>
<option value="page-c">3</option>
</select>
