近期的js筆記，就是爲了能夠多看看之前不懂的地方

一、
//js實現保留兩位小數
function returnFloat(value) {
var value = Math.round(parseFloat(value) * 100) / 100;
var xsb = value.toString().split(".");
if (xsb.length == 1) {
value = value.toString() + ".00";
return value;
}
if (value.length > 1) {
if (xsb[1].length < 2) {
value = value.toString() + "0";
}
return value;
}
}
二、
//獲取工程的所有工做的進度
function AllProjectList() {
var xhr = new XMLHttpRequest();;
var url = 'http://10.122.84.35:8080/imp4sep/project/schedule/all?projectId=' + projectId + '&&stage=' + stageNumber;
xhr.open("GET", url, false);//同步方式請求
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var AllProject = xhr.responseText;
//alert(AllProject);
AllProjectInfo(AllProject);
}
};
//xmlHttp.open("GET", url, true);第三個參數爲true爲異步方式

三、
//js正則獲取url參數值
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}

四、
//封裝函數記得須要return 該值；
//可設置爲全局應用一個變量var tt = "";放到全局那裏

五、
//js設置cookie

//設置cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}

//獲取cookie
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//js設置cookie end

六、
//js設置導航欄切換高亮
function MySelct(id) {
if (ID != id) { //點擊當前id的li無變化，點擊其餘id的li時啓動if語句
var PreSect = document.getElementById('Sect' + ID); //不是id的的爲非高亮，定義非高亮的上一個id
PreSect.className = "factive"; //賦予非高亮的class
var NowSect = document.getElementById('Sect' + id); //當前id的爲高亮，定義當前id
NowSect.className = "active"; //賦予高亮的class
ID = id; //把當前id賦值給ID
}
}
html代碼
<ul>
<li id='Sect0' class='active' onclick='MySelct(0)'>核島</li>
<li id='Sect1' onclick='MySelct(1)' >常規島</li>
<li id='Sect2' onclick='MySelct(2)' >冷卻塔</li>
<li id='Sect3' onclick='MySelct(3)' >泵房</li>
<li id='Sect4' onclick='MySelct(4)' >BOP</li>
<li id='Sect5' onclick='MySelct(5)' >管線</li>
</ul>

七、
//去除數組裏重複的元素
function unique(arr) {
var result = [];
for (var i = 0; i < arr.length; i++) { //循環數組
if (result.indexOf(arr[i]) == -1) { //搜索是否有相同的匹配項
result.push(arr[i]); //把不相同的匹配項輸進另外一個數組裏
}
}
return result;
}

八、toggle做用的點擊效果
出錯：
function SelectToggle(num) {
document.getElementById('SelectDirectorOption' + num).onclick = function () {
if (document.getElementById('DirectorManage' + num).style.display == 'none') {
document.getElementById('DirectorManage' + num).style.display = 'block';
} else {
document.getElementById('DirectorManage' + num).style.display = 'none';
}
}
}
（出現第一次點擊沒效果，以後的點擊能夠起做用）緣由：文本首先對句子作判斷，樣式的（display：none）不必定起做用（行內樣式纔是js的樣式）因此第一次的判斷爲錯的，而後返回（dispaly:none）
修改：
function SelectToggle(num) {
document.getElementById('SelectDirectorOption' + num).onclick = function () {
if (document.getElementById('DirectorManage' + num).style.display == 'block') {
document.getElementById('DirectorManage' + num).style.display = 'none';
} else {
document.getElementById('DirectorManage' + num).style.display = 'block';
}
}
}

九、數組裏多個對象
//正確
function SelectTestMultiple(count) {
var SelectMultiple = [];
for (var i = 0; i < 3; i++) {
var SelectObj = {};（正確方式）
SelectObj.userid = MultipleVal1[i];
SelectObj.name = MultipleArr1[i];
SelectObj.flag = count;
SelectMultiple.push(SelectObj);
}
return SelectMultiple;
}
//錯誤
function SelectTestMultiple(count) {
var SelectMultiple = [];
var SelectObj = {};（錯誤方式）
for (var i = 0; i < 3; i++) {
SelectObj.userid = MultipleVal1[i];
SelectObj.name = MultipleArr1[i];
SelectObj.flag = count;
SelectMultiple.push(SelectObj);
}
return SelectMultiple;
}

10.下面的代碼將輸出什麼到控制檯，爲何：
var hero = {
_name: 'John Doe',
getSecretIdentity: function (){
return this._name;
}
};

var stoleSecretIdentity = hero.getSecretIdentity;

console.log(stoleSecretIdentity());
console.log(hero.getSecretIdentity());
代碼有什麼問題，以及應該如何修復。

代碼將輸出：
undefined John Doe
第一個 console.log之因此輸出 undefined，是由於咱們正在從 hero對象提取方法，
因此調用了全局上下文中（即窗口對象）的 stoleSecretIdentity()，而在此全局上下文中， _name屬性不存在。

11.時間格式轉換成yyyy-MM-dd
//yyyy-MM-dd的時間格式轉換
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小時
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}

var date = new Date().Format("yyyy-MM-dd");\\

12.JS按回車鍵實現登陸的方法
<body onkeydown = "on_return();"></body>
function on_return (){
if(window.event.keyCode == 13){
document.all('login_btn').click();
}
}

13.內嵌和並列的bug
//初可研廠址內容塊
function ScgeduleAdress(address, InfoArrSchedule) {
var Html = "";
Html += "<div class='project_group schedule_echart clearfix'>"
Html += "<div class='form_group fl'><span class='item_info_name'>廠址：</span><span class='item_info MaxLen_limit'>" + address + "</span></div>";
Html += "<div class='form_group fl'>";
Html += "<span class='item_info fl'>工做進度</span><span class='item_info progress_value fl'>" + InfoArrSchedule + "%</span><div class='fl loader loader4 duration-2s-after leader_schedule_left'><a href='javascript:;'>" + InfoArrSchedule + "%</a></div> ";
Html += "</div>(這裏就是少了個</div>因此內容沒包住，生成新的內容塊不斷的內嵌，而不是並列的關係，加個</div>便可解決問題)";
return Html;
}

14.閉包函數
　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;

　　　　　};
　　　　}
};
alert(object.getNameFunc()()); //The Window
注意：1.子對象會一級一級地向上尋找全部父對象的變量。因此，父對象的全部變量，對子對象都是可見的，反之則不成立
2.在nAdd前面沒有使用var關鍵字，所以 nAdd是一個全局變量，而不是局部變量。其次，nAdd的值是一個匿名函數（anonymous function），而這個

匿名函數自己也是一個閉包，因此nAdd至關因而一個setter，能夠在函數外部對函數內部的局部變量進行操做。

15.設置checked="checked"無效，radio未選中！
<div class="form_group radio_leader_h fl">
<label for="" class="label_name"><input type="radio" value="" class="number_radio" name="visible1" id="twoProgramsEditChecked1" checked="">正在編制</label>
<label for="" class="label_name"><input type="radio" value="" class="number_radio" name="visible1" id="twoProgramsEditChecked2" checked="">完成編制</label>
</div>

js代碼： document.getElementById('twoProgramsEditChecked1').checked = true;（bug：有時候不起做用）
錯誤的緣由：是name設置的問題,與頁面中部分radio出現重複，修改換成name=""不出現重複便可。

16.id的引號引發的bug
surveyHtml += "<input type='text' class='choose_company " + Name + "' value='" + workType + "' placeholder='' readonly name= '" + typeNumber + "';' onclick='SelectOtherToggle(AllDir" + IDCName + ");'>"; （X）兩種方式都會出錯
surveyHtml += "<input type='text' class='choose_company " + Name + "' value='" + workType + "' placeholder='' readonly name= '" + typeNumber + "';' onclick='SelectOtherToggle('AllDir" + IDCName + "' );'>"; (X)

function SelectOtherToggle(NameList) {
//alert(document.getElementById(NameList));
if (document.getElementById(NameList).style.display == 'block') {
document.getElementById(NameList).style.display = 'none';
} else {
document.getElementById(NameList).style.display = 'block';
}
}
顯示出錯，alert(document.getElementById(NameList));彈出爲null；獲取不到id
bug解答：document.getElementById(NameList)裏面的NameList的值是須要加引號的，否則獲取不到該id值（相似於document.getElementById(‘name’)）因此文檔裏的應該加轉義字符雙引號（\"），單單加雙引號是會出錯的，因此修改爲
surveyHtml += "<input type='text' class='choose_company " + Name + "' value='" + workType + "' placeholder='' readonly name= '" + typeNumber + "';' onclick='SelectOtherToggle(\"AllDir" + IDCName + "\" );'>";

17.js中function的參數是數組，要怎麼傳參
bug解答：直接傳參會出錯，顯示SelectDirectorId(1, "SetNameEngSurvey", 收資,地形測量（面）,地形測量（線）,鑽孔放樣,斷面測量, "-", this);就變成了一個個變量參數；
正確傳參應該是SelectDirectorId(1, "SetNameEngSurvey", ["收資","地形測量（面）","地形測量（線）","鑽孔放樣","斷面測量"], "-", this);
因此：
1.第一張方法不能直接傳呀，須要傳fun([[1,2,3]]),若是直接傳[1,2,3]的話，對於js來講就至關於直接將arguments數組賦值成了[1,2,3]，那麼傳遞的就不是一個數組了，就是單獨的三個參數
2.把menu= ["收資","地形測量（面）","地形測量（線）","鑽孔放樣","斷面測量"];變成json數據再傳進去
var engineerMenuJson = JSON.stringfy(menu);
surveyHtml += "<li value='" + (k + 1) + "' onclick = 'SelectDirectorId(" + count + ", \"" + Name + "\", " + engineerMenuJson + ", \"" + units + "\", this);'>" + engineerMenu[k] + "</li>";

18.判斷input的type=「radio」
js判斷checked是否選中時，用id.checked = true/false;來判斷
HTML內的checked是否選中用去掉「checked」和加上「checked」來判斷；

19.進行ajax數據交互時，提交的json格式的數據沒有錯時還返回415時能夠考慮一下是否是 xhr.setRequestHeader("Content-type", " application/x-www-form-urlencoded");是否爲json格式的xhr.setRequestHeader("Content-type", "application/json");

連接（https://www.cnblogs.com/SamWeb/p/6211134.html）

json格式的數據爲
var EditStageAllDate = {}; //建立一個對象
EditStageAllDate.nuclearPlantsId = NuclearPlantsCount; //核電站id
EditStageAllDate.stageNumber = CreatestageCount; //所處階段
EditStageAllDate.projectName = CreateProjectName; //工程名字
EditStageAllDate.projectNumber = CreateprojectNumber; //工程編號
EditStageAllDate.commencementDate = commencementDate; //開工時間
EditStageAllDate.actualizationDept = actualizationDept; //實施單位
var EditStageAllDateJson = JSON.stringify(EditStageAllDate);
alert(EditStageAllDateJson);
xhr.send(EditStageAllDateJson);

20.ajax提交數據被截斷的問題
最近作一個博客發佈程序，使用ajax向後臺提交數據，發現數據老是被截斷，網上搜了些資料，罪魁禍首是特殊字符轉義後的&惹的禍，現將解決辦法記錄下，以備後查

獲取數據:

var data=ckeditor.getData();

方式1、用encodeURIComponent編碼

data=encodeURIComponent(data);
方式2、ajax form驗證

data=$("#from").serialize();
ajax提交以下

複製代碼
data="param="+data;
$.ajax({
type:"POST",
url:"test",
data:data,////若是包含&字符的字符串會出現錯誤
success:function(str){
......
}
});
複製代碼
方式三，使用{"":""}組合數據

複製代碼
$.ajax({
type:"POST",
url:"test",
data:{"param":data},//使用此方式提交可避免字符串中特殊字符帶來的數據截斷的問題
success:function(str){
......
}
});
複製代碼

21.關於javascript中的call方法，網上查了一些資料老是不得詳解。總結網上的觀點，call有兩個妙用：

1: 繼承。(不太喜歡這種繼承方式。)

2: 修改函數運行時的this指針。

var func1 = function(arg1, arg2) {};
經過 func1.call(this, arg1, arg2);
或者 func1.apply(this, [arg1, arg2]); 來調用

call 須要把參數按順序傳遞進去，而 apply 則是把參數放在數組裏。
JavaScript 中，某個函數的參數數量是不固定的，所以要說適用條件的話，
當你的參數是明確知道數量時，用 call，而不肯定的時候，用 apply，而後把參數 push 進數組傳遞進去.

22.<iframe>標籤能夠在一個頁面的div中嵌入另外一個頁面，如：

<iframe src="http://baidu.com" width="500px" height="500px"></iframe>；

<object>標籤主要用來包含對象，好比圖像、音頻、視頻、Java applets、ActiveX、PDF 以及 Flash，

同時在標籤內有個屬性data，能夠鏈接到URL，能夠替代<iframe>標籤在頁面中嵌入一個子頁面，如：

<object data="http://www.baidu.com" width="500px" height="500px"></object>

23.箭頭函數簡寫

傳統函數編寫方法很容易讓人理解和編寫，可是當嵌套在另外一個函數中，則這些優點就蕩然無存。

function sayHello(name) {  console.log('Hello', name); } setTimeout(function() {  console.log('Loaded') }, 2000); list.forEach(function(item) {  console.log(item); });簡寫： sayHello = name => console.log('Hello', name); setTimeout(() => console.log('Loaded'), 2000); list.forEach(item => console.log(item));