一、运算
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定时器，滑出再定时播放。为了更好的用户体验，我们再添加一排小圆点，用户可以清楚的知道现在所处的位置，最后，利用闭包使得用户可以直接通过点击小圆点切换图片。
上述轮播图来源：原理分析讲解
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
