张成的日常问题整理（新）

更多博客转移到github+hexo博客：https://zc95.github.io

//从数组里随机取一个数

arr[Math.floor(Math.random()*arr.length)]

屏蔽网页右击

//阻止浏览器默认的右键点击事件
        window.document.oncontextmenu = function () {
            return false;
        }

左击右击事件

function clickMe() {
            var event = event ? event : window.event;
            if (1 == event.which) {
                //左击
                }
            if (3 == event.which) {
                //右击
                }
            }

循环时候去掉最后一个逗号

var json = eval(msg), arr = [];
for (var k in json[0]) {
arr.push(k + "：" + json[0][k] + "条");
}
$('#dataNum').html(arr.join('，'));
通常都用拼接字符串的方法，在尾部容易产生多余的逗号，不易去除。这里改为数组，再插入逗号比较方便；

判断是否存在id为item元素

1. if($('#item').length!=0){//因为jquery获取的元素是一个集合，看长度是否为0就可以知道是不是存在  
2. //有元素  
3. }else{  
4. //没有元素  
5. }  

生成区间随机数

1. function getRandom(m,n){  
2.    return Math.floor(Math.random()*(n-m+1)+m)  
3. }  

小数转为百分数

Number(point*100).toFixed(2)+"%";

trim() 去掉前后空白

1. //去左空格;  
2. function ltrim(s){  
3.     return s.replace(/(^\s*)/g, "");  
4. }  
5. //去右空格;  
6. function rtrim(s){  
7.     return s.replace(/(\s*$)/g, "");  
8. }  
9. //去左右空格;  
10. function trim(s){  
11.     return s.replace(/(^\s*)|(\s*$)/g, "");  
12. }  

数组去重

1. function QuChong(arr){  
2.   var newArr =[];  
3.   for(i in arr){  
4.     if(!newArr.includes(arr[i])){  
5.       newArr.push(arr[i]);  
6.     }  
7.   }  
8.   return newArr;  
9. }  

reverse();用于翻转数组，该方法会改变原来的数组，而不会创建新的数组。

sort()

1. function sortNumber(a,b)  
2. {  
3.     return a - b;//升序  
4.     //return b - a;//倒序 或者升序之后用<span style="color: rgb(90, 103, 111); font-family: arial, STHeiti, "Microsoft YaHei", 宋体; font-size: 14px;">reverse()翻转数组</span>  
5. }  
6. arr.sort(sortNumber);  

找出元素 item 在给定数组 arr 中的位置 

1. function indexOf(arr, item) {  
2.     return arr.indexOf(item)  
3. }  

计算给定数组 arr 中所有元素的总和 

1. function sum(arr) {  
2.     var hehe=0;  
3.     for(e in arr){  
4.         hehe += arr[e];  
5.     }  
6.     return hehe;  
7. }  

1. function sum(arr) {  
2. return eval(arr.join('+'));  
3. }  

移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组

1. function remove(arr, item) {  
2.     var arr2 =[];  
3.     for(e in arr){  
4.         if(arr[e] != item){  
5.             arr2.push(arr[e]);  
6.         }  
7.     }  
8.     return arr2;  
9. }  

1. function remove(arr, item) {  
2.     var newArr = arr.slice(0);  
3.     while(newArr.indexOf(item)!=-1){  
4.       newArr.splice(newArr.indexOf(item),1);  
5.         
6.   }  
7.     return newArr;  
8. }  

移除数组 arr 中的所有值与 item 相等的元素，直接在给定的 arr 数组上进行操作，并将结果返回 

1. function removeWithoutCopy(arr, item) {    
2.   while(arr.indexOf(item) != -1){       
3.    arr.splice(arr.indexOf(item),1);     
4.  }      
5. return arr;  
6. }  

在数组 arr 末尾添加元素 item。不要直接修改数组 arr，结果返回新的数组

1. function append(arr, item) {  
2. <span style="white-space:pre">  </span>return arr.concat([item]);  
3. }  
4.   
5.   
6. /**function append(arr, item) { 
7.     var newArr = arr.slice(0); 
8.     return newArr.push(item); 
9. }**/  

删除数组 arr 最后一个元素。不要直接修改数组 arr，结果返回新的数组

1. function truncate(arr) {  
2. <span style="white-space:pre">  </span>var newArr = arr.slice(0);  
3. <span style="white-space:pre">  </span>//newArr.pop();  
4.     //newArr.splice(newArr.length-1,1);  
5.     //newArr.splice(newArr.length-1);  
6.     return newArr;  
7. }  

在数组 arr 开头添加元素 item。不要直接修改数组 arr，结果返回新的数组

1. function prepend(arr, item) {  
2. <span style="white-space:pre">  </span>return [item].concat(arr);  
3. }  

1. function prepend(arr, item) {  
2. <span style="white-space:pre">  </span>var newArr = arr.slice(0);  
3.     newArr.unshift(item);  
4.     return newArr;  
5. }  

删除数组 arr 第一个元素。不要直接修改数组 arr，结果返回新的数组 

1. function curtail(arr) {  
2.     return arr.slice(1);  
3. }  

合并数组 arr1 和数组 arr2。不要直接修改数组 arr，结果返回新的数组 

1. function concat(arr1, arr2) {  
2.     return arr1.concat(arr2);  
3. }  

在数组 arr 的 index 处添加元素 item。不要直接修改数组 arr，结果返回新的数组 

1. function insert(arr, item, index) {  
2.     var newArr = arr.slice(0);  
3.     newArr.splice(index,0,item);  
4.     return newArr;  
5. }  

统计数组 arr 中值等于 item 的元素出现的次数 

1. function count(arr, item) {  
2.     var c=0;  
3.     for(e in arr){  
4.         if(arr[e]==item){  
5.             c++;  
6.         }  
7.     }  
8.     return c;  
9. }  

找出数组 arr 中重复出现过的元素 

1. function duplicates(arr) {      
2.     var a=arr.sort(),b=[];      
3.     for(var i in a){          
4.         if(a[i]==a[i-1] && b.indexOf(a[i])==-1)  
5.             b.push(a[i]);        
6.     }      
7.     return b;  
8. }  

生成m到n的区间随机数

1. function getRand(m, n) {  
2.   var random = Math.floor(Math.random() * (n - m + 1) + m);  
3.   return random;  
4. }  

检查数组里是否包含了某值

1. arr.includes(item);//结果返回true和false  

 

编写一个javscript函数 fn，该函数有一个参数 n(数字类型)，其返回值是一个数组，该数组内是 n 个随机且不重复的整数，且整数取值范围是 [2, 32]。

1. //fn函数  
2. function fn(n) {  
3.   var arr = [];  
4.   for (var i = 0; i < n; i++) {  
5.     var rnd = getRand(2, 32);  
6.     if (arr.includes(rnd)) {  
7.       i--;//减一是因为如果第i次循环的时候如果数组有了改值，就重新走一遍  
8.     } else {  
9.       arr.push(rnd);  
10.     }  
11.   }  
12.   return arr;  
13. }  
14. //生成区间随机数  
15. function getRand(m, n) {  
16.   var random = Math.floor(Math.random() * (n - m + 1) + m);  
17.   return random;  
18. }  
19. //检查是否重复,这里直接用了 arr.includes(e)  
20. function checkInArr(e,arr){  
21.   if(arr.indexOf(e)==-1){  
22.     return false;  
23.   }  
24.     return true;  
25. }  
26. //console.log(fn(5));  

打乱一个数组

1. randomArr.sort(function () { return Math.random() > 0.5 ? -1 : 1; });   

动态添加行  

1. function AddRow(json) {    
2.             //json: [{"OperatorNum":"8000011","TollT":1,"TollY":2,"TollS":3,"TollC":4,"ArrearageNum":5,"ArrearageToll":6,"AddNum":7,"AddToll":8},{"OperatorNum":"总计","TollT":1,"TollY":2,"TollS":3,"TollC":4,"ArrearageNum":5,"ArrearageToll":6,"AddNum":7,"AddToll":8}]    
3.             $('#tbody').html('');    
4.             for (key in json) {    
5.                     var _tr = $("<tr></tr>");    
6.                     for (var k in json[key]) {    
7.                         var _td = $("<td>" + json[key][k] + "</td>");    
8.                         _tr.append(_td);    
9.                     }    
10.                 $('#tbody').append(_tr);    
11.             }    
12.         }  

a标签的一些用法

1. <a href="javascript:void(alert('Warning!!!'))">点我弹窗</a>    
2. <a href="javascript:void(0)">点我没效果</a>    
3. <a href="#pos">点我定位到指定位置</a>    
4. <a href="#">点我定位到顶部</a>    

计算给定数组 arr 中所有元素的总和

1. //一般的方法    
2. function sum(arr) {    
3.     var sum = 0;    
4.     for(var i =0;i<arr.length;i++){    
5.         sum = sum +arr[i];    
6.     }    
7.     return sum;    
8. }    
9. //或者可以这样    
10. function sum(arr) {    
11.     return eval(arr.join("+"))    
12. }    

checkbox的一些用法  

1. $("input[name='WeiZhi']");  //选取name为xx的元素    
2. $("input[type='checkbox']").prop('checked',true);  //设置checkbox选中    
3. $("input[type='checkbox']").attr('checked');  //两种结果 "checked"和undefined，注意引号！    
4. $("input[name='WeiZhi']:checked").length;  // 选中的个数   

小数转百分数 

1. function toPercent(point) {    
2.           return Number(point * 100).toFixed(2) + "%";//保留2位小数    
3.       }   

清除浮动

1. .clearfix:after, {    
2.     content: ".";    
3.     display: block;    
4.     height: 0;    
5.     clear: both;    
6.     visibility: hidden;    
7. }    

获取事件源

1. function test(){      
2.     var event = event? event: window.event;      
3.     var srcObj = ((event.srcElement)?event.srcElement:event.target);       
4.     alert($(srcObj));      
5. }    

阻止页面的表单元素自动联想填满

1. <form id="Content" autocomplete="off">    
2. autocomplete="off"用来阻止浏览器自动填充（联想）   

动态创建table

1. var json = eval(msg);    
2. var tab = "";    
3.                                 if (json.length > 0) {    
4.                                     $.each(json, function (i, n) {    
5.                                         var num = i + 1;    
6.                                         tab += "<tr><td style='text-align:center;'>" + num + "</td><td>" + n.NianFen + "</td><td>" + n.YueFen + "</td><td>" + n.SFZName + "</td><td>" + n.DFNum + "</td><td>" + n.PJF + "</td><td>" + n.ZongFenShu + "</td><td>" + n.RenShu + "</td></tr>";    
7.                                     })    
8.                                     $("#tbody").html(tab);    
9.                                 }   

查看的绑定

1. var json = eval(msg);    
2.                         if (json.length > 0) {    
3.                             for (var key in json[0]) {    
4.                                 $("#" + key).text(json[0][key]);    
5.                             }    
6.                         }   

让input只能输入正整数  

1. <input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />    
2. 注意：一般在JS中拼接的时候 符号 \  会被视为转义字符，最后页面显示的是.replace(/D/g,'')" 。 所以在JS拼接时可以这样：.replace(/\\D/g,'')"   

div自适应屏幕大小 

1. document.getElementById('InforList').style.width = document.body.clientWidth * 0.90 + "px";    
2. document.getElementById('InforList').style.height = window.innerHeight * 0.75 + "px";    

1. var index = $('#HuoJia')[0].selectedIndex; // 选中索引  
2. var HuoJia = $('#HuoJia')[0].options[index].text; // 选中文本  

1. $("#HuoJia").find("option:selected").text() //简洁  

1. join(',')是将数组用逗号隔开，转化为字符串  
2. split('-')是以字符串中的-符号转化为数组  
3. splice(3,1)是返回 从下标索引为3的位置切割出长度为1的字符  
4. str.substring(3,5)是截取两个指定下标位置的字符串，这个是下标为3和5的位置  

1. 在写侧边栏点击变色的时候可以选择为li的点击事件加上addClass('active')和removeClass('active'),但是在样式表里你不能直接写.active的样式  
2. 注意看看之前有没有写过li的样式，比如你点击的这个li上级的class为.side，假如之前写过.side>li{ background-color:red; }的样式，点击虽然可以为li加上class，但是  
3. .active{ background-color:black; }的样式不能体现，这时候这样写就行了.side>.active{ background-color:black; }，因为子元素选择器的权重比较高，会覆盖其他单独class的样式  

1. /*背景图片充满屏幕的时候可以这样避免图片大小的因素*/  
2. <div style="position: absolute; width: 100%; height: 100%; z-index: -1">  
3.         <img id="bgcolor" style="position: fixed;" src="~/Images/icon_login02.jpg" width="100%" />  
4. </div>  

1. background: linear-gradient(#24a8e6, #44a9dc, #6bc5ec);/*渐变色。注意是background,不是background-color*/  

1. ::-webkit-scrollbar{width:0px;} /*隐藏侧边导航的滚动条，只支持webkit内核的浏览器*/  

1. .before() 是在某个元素前创建元素，而.append()是在元素内创建，.remove()是移除元素  

1. 限制高度并显示滚动条  
2. $("#ChaKanFrm")[0].style.height = document.documentElement.clientHeight - $("#Content")[0].clientHeight - 105 + "px";})  
3. <div class="portlet-body form" id="ChaKanFrm"  style="overflow:auto">  

1. 字符拼接 ，id是变量   
2. $("input[name='select'][value='" + id + "'").prop("checked", false);  

1. //正则表达式 将 \" 转化为 \'  
2. var g = b.replace(/\\"/g, '\'');  

1. if (json[0]["SBDID"].constructor.name == "Array") {                   // 这句话是判断是否为数组  
2.                     json[0]["SBDID"] = json[0]["SBDID"].join(',');  // join(',')：是把数组转化为以逗号为分割的字符串。而split(',')是反过来：字符串--数组  
3.                 }  
4.   
5. "[{"UPDID":"xxxx","SBDID":["xxxx","xxxx","xxxx"]}]"   
6. 转化为：  
7. "[{"UPDID":"xxxx","SBDID":"xxxx,xxxx,xxxx"}]"  

1. JSON.stringify( )是将对象转化为字符串  
2. JSON.parse( )是将字符串转化为数组，也可以用eval( )，eval( )能转化一些奇怪的字符串，兼容性更好，但是也有弊端。  

这里有详细说明：http://blog.csdn.net/qq_35607510/article/details/55188824

百分比 和 px 之间怎么换算？

1. height: calc(100% - 10px);   

setTimeout 实现循环执行的效果，主要目的是为了提前执行函数（正常情况下setInterval函数会延迟执行）

1. function GoGeo(){  
2.         alert(111);  
3.     }     
4. function timer(){  
5.         GoGeo();  
6.         setTimeout("timer()",15000);  
7.     }  

两个按钮，只有一个有效另一个禁用：

1. <input type="button" onclick="start()" id="start" name="start" value="开始记录" />  
2. <input disabled="true" type="button" id="end" onclick="end()" name="end" value="结束记录" />  

1. $("#start").click(function () {  
2.             $("#end").removeAttr("disabled");  
3.             $("#start").attr("disabled", true);  
4.         });  
5.         $("#end").click(function () {  
6.             $("#start").removeAttr("disabled");  
7.             $("#end").attr("disabled", true);  
8.         });  

table的某个td里的文字溢出显示省略号：

1. table {  
2.             width: 100%;  
3.             table-layout: fixed; /* 必须要有不然无效 */  
4.         }  
5. td:nth-child(3) {  
6.             width: 100%;  
7.             word-break: keep-all; /* 不换行 */  
8.             white-space: nowrap; /* 不换行 */  
9.             overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */  
10.             text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...)，和overflow: hidden;一起使用*/  
11.          }  

常用的返回上一页方法：

1. window.location.href = "/XXX/XXX";  
2. window.location.href = document.referrer;  
3. history.back(-1);  
4. window.history.back();  
5. history.go(-1);  

侧边栏点击滑出：

1. $(".btn1").click(function(){  
2.   $("#box").animate({width:"300px"});  
3. });  

回到顶部：

1. $(window).scroll(function () {  
2.     var scrollt = document.documentElement.scrollTop + document.body.scrollTop;  
3.     if ( scrollt > 700 ){  
4.         $(".to-top").fadeIn(500);  
5.     } else {  
6.         $(".to-top").fadeOut(500);  
7.     }  
8. });  
9.   
10. $(".to-top").click(function(){  
11.     $("html,body").animate({scrollTop: 0}, 1000);  
12. });  

防止用户选中文字：

1. onselectstart：return false;  
2. -webkit-user-select:none;  

阴影：

div{box-shadow: 10px 10px 5px #888888;}

背景渐变色：

1. background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(white), to(#cdcdcd));  

悬浮放大：

1. .newSongBody div img,.singerBody div img{  
2.     transition: transform 0.7s ;  
3. }  
4. .newSongBody div:hover img,.singerBody div:hover img {  
5.     transform: scale(1.08,1.08);  
6. }  

超出div的部分省略号：

1. .resourceDiv{  
2.     width:80px;  
3.     height:80px;  
4.     overflow:hidden;  
5.     white-space:nowrap;   
6.     text-overflow:ellipsis;  
7.     display:block;  
8. }  

table的td长度：

1. <colgroup>  
2.             <col width="356px"/>  
3.             <col width="300px"/>  
4.             <col width="100px"/>  
5.             <col width="200px"/>  
6. </colgroup>  

刷新页面的a标签：

1. <a href="javascript:location.reload();"></a>  

在写侧边栏点击变色的时候可以选择为li的点击事件加上addClass('active')和removeClass('active'),但是在样式表里你不能直接写.active的样式
注意看看有没有之前有没有写过li的样式，比如你点击的这个li上级的class为.side，假如之前写过.side>li{ background-color:red; }的样式，点击虽然可以为li加上class，但是
.active{ background-color:black; }的样式不能体现，这时候这样写就行了.side>.active{ background-color:black; }，因为子元素选择器的权重比较高，会覆盖其他单独class的样式

1. /*背景图片充满屏幕的时候可以这样避免图片大小的因素*/  
2. <div style="position: absolute; width: 100%; height: 100%; z-index: -1">  
3.         <img id="bgcolor" style="position: fixed;" src="~/Images/icon_login02.jpg" width="100%" />  
4. </div>  

1. //enter键代替按钮点击  
2. document.onkeydown = function (event) {  
3.             var e = event || window.event || arguments.callee.caller.arguments[0];  
4.             if (e && e.keyCode == 13) { // enter 键  
5.                 Login();  
6.             }  
7.         }  

1. background: linear-gradient(#24a8e6, #44a9dc, #6bc5ec);/*渐变色。注意是background,不是background-color*/  

1. ::-webkit-scrollbar{width:0px;} /*隐藏侧边导航的滚动条，只支持webkit内核的浏览器*/  

1. .before() 是在某个元素前创建元素，而.append()是在元素内创建，.remove()是移除元素