1.求平均值
//求平均值函数
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.把数组按照从大到小的顺序排列
var arr =[9,1,0,8];
var sortNumber = function (a, b) {
return b - a
};
var newSortArr = arr.sort(sortNumber);
3.数字千位分割
function(num){
if(num){
return num.toString().replace(/^\d+/g, function(m){
return m.replace(/(?=(?!^)(\d{3})+$)/g, ',');
});
}
return 0;
};
4.以今天为节点，显示前三周及后一周的日期
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.根据图片长宽比例显示图片是横向还是纵向（显示图片的原始比例）
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中有#号，把#号替换成后边function中的内容
var title=('测试#' || "").replace(/\#([^\s]+)\#/g, function(a, b){
return '<span class="chatItemSubTitle">' + b + "</span>";
}),
7.在三维数组中，求子数组中第一个和第三个元素在所有数据中最小的三个值
//比如如下三维数组，求所有数组中第一个值和第四个值在所有数组中最小的两个数组
var arr=[
[
[1,55,9,56,"良"],
[2,25,11,9,"优"],
[3,56,7,5,"良"],
],
[
[1,55,9,56,"良"],
[2,25,11,21,"优"],
[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]));//所有数组的第一个数据 allData.push(datas[a][i]);
}
}
var xArr1=xArr.slice();
//按从小到大排序
xArr.sort(function(a,b){return a-b;});
var minValIndex=[],minXValIndex=[];
var num,numX;//获取最小的三个值再原数组中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,'');//数组中相邻的两个值若相同则把其中一个设为''
indexofXJ=indexofXJ+1;
}
numX=indexofXJ;
minXValIndex.push(allData[numX][3]);
}
return {
minXIndex:minXValIndex,
};
};
8.数字滚动效果
function(el, num, from){ //第一个为dom节点，第二个为数字
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); //当没到最大值时，继续滚动
el.innerHTML = $we.str.formatThousands(from);
if(from >= num){
clearInterval(timeInterval);
}
}, 20);
};
9.文字换行效果
function (str, n) { //文字和英文都超过6个字节换行
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实现trigger方法
<button id="btn-1">Button-1</button>
<script>
// 假如想通过点击 Button-1 触发 window 的 resize 事件
let btn_1 = document.getElementById('btn-1');
btn_1.onclick = function () {
var myEvent = new Event('resize');
window.dispatchEvent(myEvent);
}
</script>
12.一维数组根据对象属性转二维数组
原数组：
var arr=[
{
divName: "宿迁市"
population: 10012
populationCity: 15300
populationRate: 123
},
{
divName: "上海市"
population: 10015
populationCity: 155300
populationRate: 123
}
转成：
var arr2=[
['宿迁市','上海市']
[10012, 10015]
[15300, 155300]
[123, 123]
]
js为：
//把后台传过来的数据改成一个数组中按照属性划分为三个子数组的形式
translateArray(arrayData) {
let map=[];
let map2 = {};
let list = []; //总数组
let array=arrayData.concat();
let chartList = {
divName: [],
list: []
};
for(var a=0;a<Object.keys(array[0]).length;a++){
map.push({})
}
while (array.length) {
//获取数组中单个对象
let current = array.shift(); // 会影响原数组
//取出单个对象中属性的值
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); //大对象中属性值取出放到数组中
for (var j = 0; j < arr.length; j++) {
arr[j] = Math.round(parseFloat(arr[j])*100)/100;//把字符串变成保留两位小数的数字且四舍五入，不补位
}
list.push(arr);
});
chartList.divName = Object.keys(map2);
chartList.list = list;
return chartList;
}
}
13.根据传入的日期格式来显示日期
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.页面切换设置不同的背景音乐
function HTML5Audio(url, loop) {
var audio = new Audio(url);
audio.autoplay = true;
audio.loop = loop || false; //是否循环
audio.play();
return {
end: function(callback) {
audio.addEventListener('ended', function() {
callback()
}, false);
}
}
}
var audio1 = HTML5Audio(playURl)
audio1.end(function() {
Html5Audio(cycleURL, true)
})
16.在同一块区域中，点击切换显示不同的图片
var page = document.querySelector("#page");
//层级
var index = 10;
//切换切换
page.addEventListener("change",function(e){
//页面元素
var pageElement = document.querySelector("." + e.target.value)
pageElement.style.zIndex = ++index; //根据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>
网友评论