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

更多博客转移到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元素

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

//有元素

}else{

//没有元素

}

生成区间随机数

function getRandom(m,n){

return Math.floor(Math.random()*(n-m+1)+m)

}

小数转为百分数

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

trim() 去掉前后空白

//去左空格;

function ltrim(s){

return s.replace(/(^\s*)/g, "");

}

//去右空格;

function rtrim(s){

return s.replace(/(\s*$)/g, "");

}

//去左右空格;

function trim(s){

return s.replace(/(^\s*)|(\s*$)/g, "");

}

数组去重

function QuChong(arr){

var newArr =[];

for(i in arr){

if(!newArr.includes(arr[i])){

newArr.push(arr[i]);

}

}

return newArr;

}

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

sort()

function sortNumber(a,b)

{

return a - b;//升序

//return b - a;//倒序 或者升序之后用<span style="color: rgb(90, 103, 111); font-family: arial, STHeiti, "Microsoft YaHei", 宋体; font-size: 14px;">reverse()翻转数组</span>

}

arr.sort(sortNumber);

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

function indexOf(arr, item) {

return arr.indexOf(item)

}

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

function sum(arr) {

var hehe=0;

for(e in arr){

hehe += arr[e];

}

return hehe;

}

function sum(arr) {

return eval(arr.join('+'));

}

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

function remove(arr, item) {

var arr2 =[];

for(e in arr){

if(arr[e] != item){

arr2.push(arr[e]);

}

}

return arr2;

}

function remove(arr, item) {

var newArr = arr.slice(0);

while(newArr.indexOf(item)!=-1){

newArr.splice(newArr.indexOf(item),1);

}

return newArr;

}

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

function removeWithoutCopy(arr, item) {

while(arr.indexOf(item) != -1){

arr.splice(arr.indexOf(item),1);

}

return arr;

}

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

function append(arr, item) {

<span style="white-space:pre"> </span>return arr.concat([item]);

}

/**function append(arr, item) {

var newArr = arr.slice(0);

return newArr.push(item);

}**/

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

function truncate(arr) {

<span style="white-space:pre"> </span>var newArr = arr.slice(0);

<span style="white-space:pre"> </span>//newArr.pop();

//newArr.splice(newArr.length-1,1);

//newArr.splice(newArr.length-1);

return newArr;

}

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

function prepend(arr, item) {

<span style="white-space:pre"> </span>return [item].concat(arr);

}

function prepend(arr, item) {

<span style="white-space:pre"> </span>var newArr = arr.slice(0);

newArr.unshift(item);

return newArr;

}

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

function curtail(arr) {

return arr.slice(1);

}

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

function concat(arr1, arr2) {

return arr1.concat(arr2);

}

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

function insert(arr, item, index) {

var newArr = arr.slice(0);

newArr.splice(index,0,item);

return newArr;

}

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

function count(arr, item) {

var c=0;

for(e in arr){

if(arr[e]==item){

c++;

}

}

return c;

}

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

function duplicates(arr) {

var a=arr.sort(),b=[];

for(var i in a){

if(a[i]==a[i-1] && b.indexOf(a[i])==-1)

b.push(a[i]);

}

return b;

}

生成m到n的区间随机数

function getRand(m, n) {

var random = Math.floor(Math.random() * (n - m + 1) + m);

return random;

}

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

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

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

//fn函数

function fn(n) {

var arr = [];

for (var i = 0; i < n; i++) {

var rnd = getRand(2, 32);

if (arr.includes(rnd)) {

i--;//减一是因为如果第i次循环的时候如果数组有了改值，就重新走一遍

} else {

arr.push(rnd);

}

}

return arr;

}

//生成区间随机数

function getRand(m, n) {

var random = Math.floor(Math.random() * (n - m + 1) + m);

return random;

}

//检查是否重复,这里直接用了 arr.includes(e)

function checkInArr(e,arr){

if(arr.indexOf(e)==-1){

return false;

}

return true;

}

//console.log(fn(5));

打乱一个数组

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

动态添加行

function AddRow(json) {

//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}]

$('#tbody').html('');

for (key in json) {

var _tr = $("<tr></tr>");

for (var k in json[key]) {

var _td = $("<td>" + json[key][k] + "</td>");

_tr.append(_td);

}

$('#tbody').append(_tr);

}

}

a标签的一些用法

<a href="javascript:void(alert('Warning!!!'))">点我弹窗</a>

<a href="javascript:void(0)">点我没效果</a>

<a href="#pos">点我定位到指定位置</a>

<a href="#">点我定位到顶部</a>

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

//一般的方法

function sum(arr) {

var sum = 0;

for(var i =0;i<arr.length;i++){

sum = sum +arr[i];

}

return sum;

}

//或者可以这样

function sum(arr) {

return eval(arr.join("+"))

}

checkbox的一些用法

$("input[name='WeiZhi']"); //选取name为xx的元素

$("input[type='checkbox']").prop('checked',true); //设置checkbox选中

$("input[type='checkbox']").attr('checked'); //两种结果 "checked"和undefined，注意引号！

$("input[name='WeiZhi']:checked").length; // 选中的个数

小数转百分数

function toPercent(point) {

return Number(point * 100).toFixed(2) + "%";//保留2位小数

}

清除浮动

.clearfix:after, {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

获取事件源

function test(){

var event = event? event: window.event;

var srcObj = ((event.srcElement)?event.srcElement:event.target);

alert($(srcObj));

}

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

<form id="Content" autocomplete="off">

autocomplete="off"用来阻止浏览器自动填充（联想）

动态创建table

var json = eval(msg);

var tab = "";

if (json.length > 0) {

$.each(json, function (i, n) {

var num = i + 1;

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>";

})

$("#tbody").html(tab);

}

查看的绑定

var json = eval(msg);

if (json.length > 0) {

for (var key in json[0]) {

$("#" + key).text(json[0][key]);

}

}

让input只能输入正整数

<input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />

注意：一般在JS中拼接的时候 符号 \ 会被视为转义字符，最后页面显示的是.replace(/D/g,'')" 。 所以在JS拼接时可以这样：.replace(/\\D/g,'')"

div自适应屏幕大小

document.getElementById('InforList').style.width = document.body.clientWidth * 0.90 + "px";

document.getElementById('InforList').style.height = window.innerHeight * 0.75 + "px";

var index = $('#HuoJia')[0].selectedIndex; // 选中索引

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

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

join(',')是将数组用逗号隔开，转化为字符串

split('-')是以字符串中的-符号转化为数组

splice(3,1)是返回 从下标索引为3的位置切割出长度为1的字符

str.substring(3,5)是截取两个指定下标位置的字符串，这个是下标为3和5的位置

在写侧边栏点击变色的时候可以选择为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的样式

/*背景图片充满屏幕的时候可以这样避免图片大小的因素*/

<div style="position: absolute; width: 100%; height: 100%; z-index: -1">

<img id="bgcolor" style="position: fixed;" src="~/Images/icon_login02.jpg" width="100%" />

</div>

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

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

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

限制高度并显示滚动条

$("#ChaKanFrm")[0].style.height = document.documentElement.clientHeight - $("#Content")[0].clientHeight - 105 + "px";})

<div class="portlet-body form" id="ChaKanFrm" style="overflow:auto">

字符拼接 ，id是变量

$("input[name='select'][value='" + id + "'").prop("checked", false);

//正则表达式 将 \" 转化为 \'

var g = b.replace(/\\"/g, '\'');

if (json[0]["SBDID"].constructor.name == "Array") { // 这句话是判断是否为数组

json[0]["SBDID"] = json[0]["SBDID"].join(','); // join(',')：是把数组转化为以逗号为分割的字符串。而split(',')是反过来：字符串--数组

}

"[{"UPDID":"xxxx","SBDID":["xxxx","xxxx","xxxx"]}]"

转化为：

"[{"UPDID":"xxxx","SBDID":"xxxx,xxxx,xxxx"}]"

JSON.stringify( )是将对象转化为字符串

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

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

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

height: calc(100% - 10px);

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

function GoGeo(){

alert(111);

}

function timer(){

GoGeo();

setTimeout("timer()",15000);

}

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

<input type="button" onclick="start()" id="start" name="start" value="开始记录" />

<input disabled="true" type="button" id="end" onclick="end()" name="end" value="结束记录" />

$("#start").click(function () {

$("#end").removeAttr("disabled");

$("#start").attr("disabled", true);

});

$("#end").click(function () {

$("#start").removeAttr("disabled");

$("#end").attr("disabled", true);

});

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

table {

width: 100%;

table-layout: fixed; /* 必须要有不然无效 */

}

td:nth-child(3) {

width: 100%;

word-break: keep-all; /* 不换行 */

white-space: nowrap; /* 不换行 */

overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */

text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...)，和overflow: hidden;一起使用*/

}

常用的返回上一页方法：

window.location.href = "/XXX/XXX";

window.location.href = document.referrer;

history.back(-1);

window.history.back();

history.go(-1);

侧边栏点击滑出：

$(".btn1").click(function(){

$("#box").animate({width:"300px"});

});

回到顶部：

$(window).scroll(function () {

var scrollt = document.documentElement.scrollTop + document.body.scrollTop;

if ( scrollt > 700 ){

$(".to-top").fadeIn(500);

} else {

$(".to-top").fadeOut(500);

}

});

$(".to-top").click(function(){

$("html,body").animate({scrollTop: 0}, 1000);

});

防止用户选中文字：

onselectstart：return false;

-webkit-user-select:none;

阴影：
div{box-shadow: 10px 10px 5px #888888;}
背景渐变色：

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

悬浮放大：

.newSongBody div img,.singerBody div img{

transition: transform 0.7s ;

}

.newSongBody div:hover img,.singerBody div:hover img {

transform: scale(1.08,1.08);

}

超出div的部分省略号：

.resourceDiv{

width:80px;

height:80px;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

display:block;

}

table的td长度：

<colgroup>

<col width="356px"/>

<col width="300px"/>

<col width="100px"/>

<col width="200px"/>

</colgroup>

刷新页面的a标签：

<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的样式

/*背景图片充满屏幕的时候可以这样避免图片大小的因素*/

<div style="position: absolute; width: 100%; height: 100%; z-index: -1">

<img id="bgcolor" style="position: fixed;" src="~/Images/icon_login02.jpg" width="100%" />

</div>

//enter键代替按钮点击

document.onkeydown = function (event) {

var e = event || window.event || arguments.callee.caller.arguments[0];

if (e && e.keyCode == 13) { // enter 键

Login();

}

}

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

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

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