一、運算
function add(m){
return function b(n){
return n+m++
}
}
var add1 = add(070);
var add2 = add(050);
console.log(add1(010)); //64
console.log(add2(010)); //48
解析：1、js在數值傳遞過程中會對0打頭或0X打頭做自動轉換處理，以0打頭會被轉換成8進制(即156)，以0X打頭會被出理成16進制。
例：
2、符號++的優先級高與符號+，但是這裏，還是用m原始值與n進行運算，以下是幾個例子，說明n+m++的結果與優先級無關，只與++和--符號的特點有關:
二、html5設計
1、使某個頁面元素可編輯：
a、把任何元素的contenteditable屬性設置成true，點擊即可編輯該元素的內容：
<div id="editableDiv" style="width:240px;height:100px;background-color:#FEFFCE" contenteditable="true">
你可以編輯這段文本
</div>
效果：
b、使用js來動態的開啓和關閉編輯功能：
<script>
//讓元素可以編輯
function startEdit(){
var element = document.getElementById("editableDiv");
element.contentEditable = true;
}
//讓元素恢復正常狀態，不可編輯
function stopEdit(){
var element = document.getElementById("editableDiv");
element.contentEditable = false;
alert("當前內容是：" + element.innerHTML);
}
</script>
<div id="editableDiv" style="width:240px;height:100px;background-color:#FEFFCE">
你可以編輯這段文本
</div>
<button onclick="startEdit()">開始編輯</button>
<button onclick="stopEdit()">停止編輯</button>
以上代碼不能直接在chrome上面運行，由於安全策略，直接html頁面動態綁定JS時間會提示錯誤，解決辦法：在html頁面引用外部的js文件動態綁定js事件,例如：
<script type="text/javascript" charset="utf-8" src='test.js'></script>
test.js代碼如下：
//讓元素可以編輯
function startEdit(){
var element = document.getElementById("editableDiv");
element.contentEditable = true;
}
//讓元素恢復正常狀態，不可編輯
function stopEdit(){
var element = document.getElementById("editableDiv");
element.contentEditable = false;
alert("當前內容是：" + element.innerHTML);
}
效果：
2、使用designMode編輯真個頁面
如果讓整個頁面都可編輯，那麼頁面上的按鈕也會失效，所以通常會把要編輯的文檔放在一個<iframe>元素中，而這個元素就充當了一個超級的編輯框。
樣例：點擊“開始”則可以編輯iframe里加載的網頁。點擊停止之後，iframe裏的頁面退出設計模式變爲不可編輯，同時下方div顯示頁面編輯後的html代碼。
html文件代碼：
<iframe id="pageEditor" style="width:500px;height:150px"></iframe>
<button onclick="startEdit()">開始編輯</button>
<button onclick="stopEdit()">停止編輯</button>
<div id="editedHTML" style="width:500px;height:150px;background-color:#FEFFCE"></div>
js文件：
//讓iframe轉爲設計模式
function startEdit(){
var editor = document.getElementById("pageEditor");
editor.contentWindow.document.designMode = "on";
}
//讓iframe設計模式關閉
function stopEdit(){
var editor = document.getElementById("pageEditor");
editor.contentWindow.document.designMode = "off";
//顯示編碼後的html代碼
var editedHTML = document.getElementById("editedHTML");
editedHTML.textContent = editor.contentWindow.document.body.innerHTML;
}
效果：
三、n個節點的二叉樹有多少種形態(Catalan數)
結果：
分析過程詳見：公式推導。
四：js分頁代碼
實現如下情況：
html頁面代碼：
<html>
<head>
<style>
.hide{
display: none!important;
}
.pagination{
margin: 0 auto;
padding: 0;
list-style: none;
text-align: center;
}
.pagination li{
display: inline-block;
width: 30px;
height: 30px;
overflow: hidden;
line-height: 30px;
margin: 0 5px 0 0;
font-size: 14px;
text-align: center;
border: 1px solid #00bc9b;
color: #00bc9b;
cursor: pointer;
}
.pagination li.current,
.pagination li:hover{
background: #00bc9b;
color: #ffffff;
}
.demo {
margin: 10px 0;
padding: 10px;
background: #eeeeee;
text-align: center;
</style>
</head>
<body>
<ul class="pagination" id="jsPagination">
<li>首頁</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>末頁</li>
</ul>
<div class="demo">
<div>(Demo1) total: 10，current: 4</div>
<ul class="pagination">
<li>首頁</li>
<li>2</li>
<li>3</li>
<li class="current">4</li>
<li>5</li>
<li>6</li>
<li>末頁</li>
</ul>
</div>
<div class="demo">
<div>(Demo2) total: 0，current: 0</div>
<ul class="pagination hide">
<li>首頁</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li>末頁</li>
</ul>
</div>
<div class="demo">
<div>(Demo3) total: 3，current: 2</div>
<ul class="pagination">
<li class="hide">首頁</li>
<li>1</li>
<li class="current">2</li>
<li>3</li>
<li class="hide"></li>
<li class="hide"></li>
<li class="hide">末頁</li>
</ul>
</div>
<div class="demo">
<div>(Demo4) total: 10，current: 2</div>
<ul class="pagination">
<li class="hide">首頁</li>
<li>1</li>
<li class="current">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>末頁</li>
</ul>
</div>
<div class="demo">
<div>(Demo5) total: 10，current: 9</div>
<ul class="pagination">
<li>首頁</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li class="current">9</li>
<li>10</li>
<li class="hide">末頁</li>
</ul>
</div>
</body>
</html>
js函數代碼：
function pagination(total, current) {
var ele=document.getElementById('jsPagination');
//for demo1
if(current-2>=1&¤t+2<=total)
{
var page=ele.firstChild.nextSibling;
//此處是爲了得到ul的第一個li節點，但是因爲firstChild、nextSibling等屬性
//會將空格當做文本節點處理，所以是第一個節點的下一個節點纔是“首頁”節點。
if(current-2==1)
page.className='hide';
for(var i=current-2,p=current-2;i<=current+2;p++,i++)
{
page=page.nextSibling;
page=page.nextSibling;
page.innerHTML=i;
if(i==current)
page.className='current';
}
if(current+2==total)
{
var last=page.nextSibling.nextSibling;
last.className='hide';
}
}
//for demo2
else if(total==0)
{
ele.className='pagination hide';
}
//for demo3
else if(total<=5)
{
var fir=ele.firstChild.nextSibling;
fir.className='hide';
var page=fir;
for(var i=1;i<=5;i++) {
page = page.nextSibling.nextSibling;
if (i <= total) {
page.innerHTML=i;
if(i==current)
page.className='current';
}
else
{
page.className='hide';
}
}
var last=page.nextSibling.nextSibling;
last.className='hide';
}
//for demo4
else if(current-2<=0)
{
var page=ele.firstChild.nextSibling;
page.className='hide';
for(var i=1;i<=5;i++) {
page = page.nextSibling.nextSibling;
page.innerHTML=i;
if(i==current)
page.className='current';
}
}
//for demo5
else if(current+2>total)
{
var page=ele.firstChild.nextSibling;
for(var i=total-4;i<=total;i++) {
page = page.nextSibling.nextSibling;
page.innerHTML=i;
if(i==current)
page.className='current';
}
var last=page.nextSibling.nextSibling;
last.className='hide';
}
}
五、移動端輪播圖實現
js實現：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<style>
html{height:100%;}
body{width: 100%;height:100%;margin:0;overflow: hidden;}
.wrap{position: relative;overflow: hidden;}
.box{position: absolute;list-style: none;left:0;top:0;padding:0;margin:0;}
.box li{float:left;}
.box{
position: relative;
height: 2000px;
width: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: red;
}
.box1{
height: 2000px;
}
.box2{
background: yellow;
}
.box3{
background: yellowgreen;
}
.box4{
background: orange;
}
.box5{
background: cyan;
}
</style>
<body>
<div class="wrap">
<ul class="box">
<li><div class="box1 box2">11111</div></li>
<li><div class="box1 box3">2222</div></li>
<li><div class="box1 box4">3333</div></li>
<li><div class="box1 box5">4444</div></li>
</ul>
</div>
<script>
var aLi = document.querySelectorAll(".box li");//所有li節點
var box = document.querySelector('.box');//整個ul節點
var wrap = document.querySelector('.wrap');//整個div節點
var aLiWidth = box.offsetWidth;
console.log('aLiWidth: ' + aLiWidth)
wrap.style.height = aLi[0].offsetHeight + 'px';
// 設置盒子的寬度
box.style.width = aLi.length*100 + '%';
for(var i=0;i<aLi.length;i++){
aLi[i].style.width = 1/aLi.length * 100 + '%';
};
// 初始化手指座標點
var startPoint = 0;
var startEle = 0;
//手指按下
wrap.addEventListener("touchstart",function(e){
startPoint = e.changedTouches[0].pageX;
startEle = box.offsetLeft;
});
//手指滑動
wrap.addEventListener("touchmove",function(e){
var currPoint = e.changedTouches[0].pageX;
var disX = currPoint - startPoint;
var left = startEle + disX;
box.style.left = left + 'px';
});
//當手指擡起的時候，判斷圖片滾動離左右的距離，當
wrap.addEventListener("touchend",function(e){
var left = box.offsetLeft;
// 判斷正在滾動的圖片距離左右圖片的遠近，以及是否爲最後一張或者第一張
var currNum = Math.round(-left/aLiWidth);
currNum = currNum>=(aLi.length-1) ? aLi.length-1 : currNum;
currNum = currNum<=0 ? 0 : currNum;
box.style.left = -currNum*wrap.offsetWidth + 'px';
})
</script>
</body>
</html>
來源：上述來源
六、web端輪播圖js實現：
原理：將一些圖片在一行中平鋪，然後計算偏移量，再利用定時器實現定時輪播。
步驟一：建立HTML基本佈局
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<head>
<body>
<div class="container">
<!--只有五張圖片，卻使用7張來輪播，是爲了實現無縫輪播-->
<!--我們需要對wrap使用絕對定位，所以用left:-600px;將第一張圖片顯示出來-->
<div class="wrap" style="left:-600px;">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<!--5個span，用於實時看到輪播圖目前所處的位置-->
<div class="buttons">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<!--兩個箭頭按鈕，用於控制前進和後退-->
<a href="javascript:;" class="arrow arrow_left"><</a>
<a href="javascript:;" class="arrow arrow_right">></a>
</div>
</body>
</html>
頁面結果如下：
步驟二：css佈局，在head中添加<style></style>用於添加css樣式
首先，resetcss，如下所示：
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
接着，我們爲了讓圖片只在container中，所以需要限定其寬度和高度並且使用overflow:hidden;將其餘圖片隱藏起來，並且我們希望wrap相對於container左右移動，所以設置爲relative，如下：
.container{
position:relative;
width:600px;
height:400px;
margin:100px auto 0 auto;
box-shadow:0 0 5px green;
overflow:hidden;
}
我們設置wrap是絕對定位的，所以，我們就可以通過控制left和right來控制圖片的移動。設置z-index:1;以對後面要放置的buttons作爲參考。因爲共有7張圖片，所以width爲4200px（每張圖片我們設置爲600X400），我們只需讓圖片左浮動即可實現佔滿一排。
.wrap{
position:absolute;
width:4200px;
height:400px;
z-index:1;
}
然後我們把圖片設置爲左浮動，並限定其大小，如下所示：
.container .wrap img{
float:left;
width:600px;
height:400px;
}
現在的效果如下:
即這時已經顯示出了第一張圖片，並且充滿了整個container。
然後我們把顯示次序的buttons放在圖片的右下角，並且設置z-index:2;以保證buttons是在圖片上方。
.container .buttons{
position:absolute;
right:5px;
bottom:40px;
width:150px;
height:10px;
z-index:2;
}
然後將buttons下面的span做一個簡單的修飾，並且給和圖片對應的span設置一個on類，如下：
.container .buttons span{
margin-left:5px;
display:inline-block;
width:20px;
height:20px;
border-radius:50%;
background-color:green;
text-align:center;
color:white;
cursor:pointer;
}
.container .buttons span.on{
background-color:red;
}
接下來，我們把左右切換的箭頭加上，然後做簡單的修飾。注意：因爲這裏使用實體來表示箭頭，所以設置font-size才能改變其大小：
.container .arrow{
position:absolute;
top:35%;
color:green;
padding:0px 14px;
border-radius:50%;
font-size:50px;
z-index:2;
display:none;
}
.container .arrow_left{
left:10px;
}
.container .arrow_right{
right:10px;
}
.container:hover .arrow{
display:block;
}
.container .arrow:hover{
background-color:rgba(0,0,0,0.2);
}
步驟三：添加js邏輯（因爲谷歌瀏覽器的安全限制，所有js代碼都是引入外部文件js文件，外部js文件中的程序需要在html加載完畢後才能運行，所以js代碼需要包含在window.οnlοad=function(){......}中）
我們首先要獲取到wrap（因爲要設置其left才能控制輪播），然後獲取到左右兩個箭頭，並實現手動輪播，如下：
var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next.onclick = function(){
next_pic();
}
prev.onclick = function(){
prev_pic();
}
function next_pic(){
//由於圖片只有7張，所以當點擊到最後一張圖片的時候，要設置界限
var newLeft;
//wrap.style.left是一個字符串,需要轉化爲數字才能繼續計算
if(wrap.style.left==="-3600px"){
newLeft = -1200;
}else{
newLeft = parseInt(wrap.style.left)-600;
}
wrap.style.left = newLeft+"px";
}
function prev_pic(){
var newLeft;
if(wrap.style.left==="0px"){
newLeft = -2400;
}else{
newLeft = parseInt(wrap.style.left)+600;
}
wrap.style.left = newLeft+"px";
}
這時，我們就發現圖片可以手動循環播放了，如果希望自動播放，使用setInterval()即可：
//自動播放,先設定一個定時器，然後創建自動播放函數，最後調用這個函數即可。
var timer = null;
function autoPlay(){
timer = setInterval(function(){
next_pic();
},1000);
}
autoPlay();
但是，如果我們想要仔細看其中一個圖片的時候，希望輪播圖停止播放，只要clearInterval()即可，如下：
//仔細看某個圖片時，輪播圖停止，只要clearInterval()即可
var container = document.querySelector(".container");
container.onmouseenter = function(){
clearInterval(timer);
}
container.onmouseleave = function(){
autoPlay();
}
實現輪播圖下方小圓點的功能，原理：設置buttons的index初始值爲0，即第一個span的class爲on，然後觸發next_pic函數時，index加1，當觸發prev_pic函數時，index減1，並設置當前index的小圓點的class爲on，這就要求index必須設置爲全局變量，才能保證它在每一個函數的作用域中。
//實現原點功能
var index=0;
var dots = document.getElementsByTagName("span");
function showCurrentDot(){
for(var i=0,len=dots.length;i<len;i++){
dots[i].className="";
}
dots[index].className = "on";
}
在next_pic中添加代碼：
index++;
if(index>4){
index=0;
}
showCurrentDot();
在prev_pic中添加：
index--;
if(index<0){
index=4;
}
showCurrentDot();
這樣，輪播圖就可以自動切換，並且小圓點也隨着圖片的變化而變化。如何實現點擊小圓點，跳轉到相應的圖片呢？原理：點擊小圓點，就使wrap的left值變成相應的值。代碼如下：
for(var i=0,len=dots.length;i<len;i++){
(function(i){
//點擊小圓點，得到相應的i值。
dots[i].onclick = function(){
var dis = index-i;
//修正dis的值
if(index==4&&parseInt(wrap.style.left)!==-3000){
dis = dis-5;
}
if(index==0&&parseInt(wrap.style.left)!==-600){
dis = dis+5;
}
wrap.style.left = (parseInt(wrap.style.left)+dis*600)+"px";
index = i;
showCurrentDot();
}
})(i);
}
這裏涉及了閉包的概念，如果直接使用for循環，則不能得到正確的結果。
最終代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播圖</title>
<script charset="UTF-8" type="text/javascript" src="test.js"></script>
<style>
*{
margin:0;
padding:0;
}
a{
text-decoration:none;
}
.container{
position:relative;
width:600px;
height:400px;
margin:100px auto 0 auto;
box-shadow:0 0 5px green;
overflow:hidden;
}
.wrap{
position:absolute;
width:4200px;
height:400px;
z-index:1;
}
.container .wrap img{
float:left;
width:600px;
height:400px;
}
.container .buttons{
position:absolute;
right:5px;
bottom:40px;
width:150px;
height:10px;
z-index:2;
}
.container .buttons span{
margin-left:5px;
display:inline-block;
width:20px;
height:20px;
border-radius:50%;
background-color:green;
text-align:center;
color:white;
cursor:pointer;
}
.container .buttons span.on{
background-color:red;
}
.container .arrow{
position:absolute;
top:35%;
color:green;
padding:0px 14px;
border-radius:50%;
font-size:50px;
z-index:2;
display:none;
}
.container .arrow_left{
left:10px;
}
.container .arrow_right{
right:10px;
}
.container:hover .arrow{
display:block;
}
.container .arrow:hover{
background-color:rgba(0,0,0,0.2);
}
</style>
<head>
<body>
<div class="container">
<!--只有五張圖片，卻使用7張來輪播，是爲了實現無縫輪播-->
<div class="wrap" style="left:-600px;">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt="">
</div>
<!--5個span，用於實時看到輪播圖目前所處的位置-->
<div class="buttons">
<span class="on">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<!--兩個箭頭按鈕，用於控制前進和後退-->
<a href="javascript:;" class="arrow arrow_left"><</a>
<a href="javascript:;" class="arrow arrow_right">></a>
</div>
</body>
</html>
引入的test.js文件代碼：
window.onload=function() {
var wrap = document.querySelector(".wrap");
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
next.onclick = function(){
next_pic();
}
prev.onclick = function(){
prev_pic();
}
function next_pic(){
//由於圖片只有7張，所以當點擊到最後一張圖片的時候，要設置界限
var newLeft;
//wrap.style.left是一個字符串,需要轉化爲數字才能繼續計算
if(wrap.style.left==="-3600px"){
newLeft = -1200;
}else{
newLeft = parseInt(wrap.style.left)-600;
}
wrap.style.left = newLeft+"px";
index++;
if(index>4){
index=0;
}
showCurrentDot();
}
function prev_pic(){
var newLeft;
if(wrap.style.left==="0px"){
newLeft = -2400;
}else{
newLeft = parseInt(wrap.style.left)+600;
}
wrap.style.left = newLeft+"px";
index--;
if(index<0){
index=4;
}
showCurrentDot();
}
//自動播放,先設定一個定時器，然後創建自動播放函數，最後調用這個函數即可。
var timer = null;
function autoPlay(){
timer = setInterval(function(){
next_pic();
},1000);
}
autoPlay();
//仔細看某個圖片時，輪播圖停止，只要clearInterval()即可
var container = document.querySelector(".container");
container.onmouseenter = function(){
clearInterval(timer);
}
container.onmouseleave = function(){
autoPlay();
}
//實現原點功能
var index=0;
var dots = document.getElementsByTagName("span");
function showCurrentDot(){
for(var i=0,len=dots.length;i<len;i++){
dots[i].className="";
}
dots[index].className = "on";
}
for(var i=0,len=dots.length;i<len;i++){
(function(i){
//點擊小圓點，得到相應的i值。
dots[i].onclick = function(){
var dis = index-i;
//修正dis的值
if(index==4&&parseInt(wrap.style.left)!==-3000){
dis = dis-5;
}
if(index==0&&parseInt(wrap.style.left)!==-600){
dis = dis+5;
}
wrap.style.left = (parseInt(wrap.style.left)+dis*600)+"px";
index = i;
showCurrentDot();
}
})(i);
}
}
總結：
js實現一個輪播圖的大體思路：先創建一個div，限定其寬度和高度，overflow:hidden，且設置其position爲relative。然後創建一個裝圖片的div，寬度爲所有圖片的總寬度，且設置爲position爲absolute，並且使其中的內容浮動，這樣所有的圖片就處於一行中。然後爲了實現無縫滾動，所以需要在首尾分別添加一張過渡圖片。先添加兩個按鈕，使其可以手動輪播，然後添加定時器使其朝一個方向自動輪播即可，因爲用戶有時需要查看詳情，所以當鼠標進入時就clear定時器，滑出再定時播放。爲了更好的用戶體驗，我們再添加一排小圓點，用戶可以清楚的知道現在所處的位置，最後，利用閉包使得用戶可以直接通過點擊小圓點切換圖片。
上述輪播圖來源：原理分析講解