标签 javascript 下的文章

使用javascript实现的无缝滚动（跑马灯），小编在这里简单描述一下：内容一直滚动，鼠标经过的时候滚动就会暂停。
效果示例图：

1.png

实现代码如下：

<!DOCTYPE html>
<html lang="en">
 <head> 
  <meta charset="UTF-8" /> 
  <title>无缝滚动</title> 
  <style>
    img{
      width: 100px;
      height: 50px;
    }
    #demo{
      overflow: hidden; 
      width: 735px; 
      height: 165px
    }
    table{

    }
  </style>
 </head> 
 <body> 
  <div id="demo" class="hdo gd_img"> 
   <table cellpadding="0" align="left" border="0" cellspace="0"> 
    <tbody> 
     <tr> 
      <td id="demo1" valign="top"> 
       <table cellspacing="0" cellpadding="4" width="2150" border="0" id="tupian"> 
        <tbody> 
         <tr> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/1.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/2.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/3.jpg" /><br />小宁博客</a></td> 
          <td align="middle"><a class="a1" href="http://www.sunxiaoning.com"><img src="img/4.jpg" /><br />小宁博客</a></td> 
         </tr>
        </tbody>
       </table></td> 
      <td id="demo2" valign="top"></td>
     </tr>
    </tbody>
   </table>
  </div> 
  <script>
      var speed1=25//速度数值越大速度越慢
      document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
      function Marquee1(){
          if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
            document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
          else{
            document.getElementById("demo").scrollLeft++
             }
          }
          var MyMar1=setInterval(Marquee1,speed1)
          document.getElementById("demo").onmouseover=function () {clearInterval(MyMar1)}
          document.getElementById("demo").onmouseout=function () {MyMar1=setInterval(Marquee1,speed1)}
  </script>  
 </body>
</html>

现在有很多的网站在顶部或其他的地方都设置了设为首页和加入收藏，小编试了试有的时候还真可以，不过对浏览器的要求不低，很多浏览器都不支持，在这里小编分享一下自己用到的办法。首先是在需要使用的地方放入这两个标签：

<a href=# rel="sidebar"onclick="SetHome(this,window.location)" >设为首页</a>
<a href=# rel="sidebar" onclick="javascript:addFavorite2()">加入收藏</a>

然后载写响应的js的事件就可以了。

function addFavorite2() {
    var url = window.location;
    var title = document.title;
    var ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("360se") > -1) {
        alert("您的浏览器不支持，请按 Ctrl+D 手动收藏！");
    }
    else if (ua.indexOf("msie 8") > -1) {
        window.external.AddToFavoritesBar(url, title); //IE8
    }
    else if (document.all) {
  try{
   window.external.addFavorite(url, title);
  }catch(e){
   alert('您的浏览器不支持,请按 Ctrl+D 手动收藏!');
  }
    }
    else if (window.sidebar) {
        window.sidebar.addPanel(title, url, "");
    }
    else {
  alert('您的浏览器不支持,请按 Ctrl+D 手动收藏!');
    }
}
function SetHome(obj,vrl)
    {
        try
        {
                obj.style.behavior='url(#default#homepage)';obj.setHomePage(vrl);
        }
        catch(e){
                if(window.netscape) {
                        try {
                                netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
                        } 
                        catch (e) { 
                                alert("此操作被浏览器拒绝！\n请在浏览器地址栏输入“about:config”并回车\n然后将[signed.applets.codebase_principal_support]设置为'true'"); 
                        }
                        var prefs = Components.classes['@mozilla.org/preferences-service;1'].getService(Components.interfaces.nsIPrefBranch);
                        prefs.setCharPref('browser.startup.homepage',vrl);
                 }
        }
    }

如果需要样式，自己写CSS就可以了。

Asynchronous Javascript And XML（异步JavaScript和XML）,他并不是凭空出现的新技术,而是对于现有技术的结合:核心是js对象XMLHttpRequest。
Ajax的使用一共分为5步
1.建立XMLHTTPRequest对象
2.注册回调函数

  • 当服务器回应我们了,我们想要执行什么逻辑

3.使用open方法设置和服务器端交互的基本信息,即：设置提交的网址,数据,post提交的一些额外内容
设置发送的数据，开始和服务器端交互
4.发送数据
5.处理响应，在注册的回调函数中,获取返回的数据,处理返回回来的数据。

示例代码:GET

get的数据,直接在请求的url中添加即可

<script type="text/javascript">
    // 创建XMLHttpRequest 对象
    var xml = new XMLHttpRequest();
    // 设置跟服务端交互的信息
    xml.open('get','01.ajax.php?name=fox');
    xml.send(null);    // get请求这里写null即可
    // 接收服务器反馈
    xhr.onreadystatechange = function () {
        // 这步为判断服务器是否正确响应
        if (xhr.readyState == 4 && xhr.status == 200) {
            // 打印响应内容
            alert(xml.responseText);
        } 
    };
</script>

示例代码:POST

<script type="text/javascript">
    // 异步对象
    var xhr = new XMLHttpRequest();
    // 设置属性
    xhr.open('post', '02.post.php' );
    // 如果想要使用post提交数据,必须添加
    xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    // 将数据通过send方法传递
    xhr.send('name=fox&age=18');
    // 发送并接受返回值
    xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
    if (xhr.readyState == 4 && xhr.status == 200) {
           alert(xhr.responseText);
        } 
    };
</script>

注意：
1.创建XMLHttpRequest对象(兼容性写法)
新版本浏览器:var xml=new XMLHttpRequest();
（IE5 和 IE6）:var xml=new ActiveXObject("Microsoft.XMLHTTP");
考虑兼容性创建Ajax对象

 var request ;
 if(XMLHttpRequest){
    // 新式浏览器写法
    request = new XMLHttpRequest();
 }else{
    //IE5,IE6写法
    new ActiveXObject("Microsoft.XMLHTTP");
 }

2.发送请求:

方法描述
open(method,url,async)规定请求的类型、URL 以及是否异步处理请求。 method：请求的类型；GET 或 POST。 url：文件在服务器上的位置async：true（异步）或 false（同步）
send(string)将请求发送到服务器。string：仅用于 POST 请求

3.onreadystatechange事件

当服务器给予我们反馈时,我们需要实现一些逻辑

属性描述
onreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。（0: 请求未初始化1: 服务器连接已建立2: 请求已接收3: 请求处理中4: 请求已完成，且响应已就绪。）
status200: "OK"。404: 未找到页面

附录：封装的方法：

function ajax(option) {
  // 创建对象
  var xmlRequest ;
  if (XMLHttpRequest) {
      xmlRequest = new XMLHttpRequest();
  }else{
      xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

  }

  // 格式化传入的数据为name=fox&age=18这样的格式
  var formatStr = "";
  for(var item in option.data){
      // 获取属性名,属性值,进行拼接
      formatStr+=item;// 属性名
      formatStr+="=";//等号
      formatStr+=option.data[item];//属性值
      formatStr+="&";//分隔符
  }

  // 去除最后一个&
  formatStr = formatStr.slice(0,-1);

  // open方法 如果是get方法,那么url之后需要添加数据
  if(option.method == "get"){
      option.url = option.url+"?"+formatStr;
      option.data = null;
  }
  // 调用open方法
  xmlRequest.open(option.method,option.url)

  // 如果是post设置HTTP协议头
  if (option.method=="post") {
      xmlRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  }

  // send方法 这里的data已经是修改过的,如果使用的是get方法,那么data为null
      xmlRequest.send(option.data);

  // 判断状态改变,调用方法
  xmlRequest.onreadystatechange = function () {
  // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
             option.success(这里的数据是ajax获取的);  
     } 
  };
}

获取元素

  • document.getElementsByClassName ('class') 通过类名获取元素，以类数组形式存在。
  • document.querySelector(‘div’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。

  • document.querySelectorAll('selector') 通过CSS选择器获取元素，以类数组形式存在。

    类名操作

  • Node.classList.add('class') 添加class
  • Node.classList.remove('class') 移除class
  • Node.classList.toggle('class') 切换class，有则移除，无则添加

  • Node.classList.contains('class') 检测是否存在class
    Node指一个有效的DOM节点，是一个通称。

    自定义属性

    在HTML5中我们可以自定义属性，其格式如下data-*=""，例如
    data-info="我是自定义属性"，通过Node.dataset['info'] 我们便可以获取到自定义的属性值。
    Node.dataset是以类对象形式存在的
    当我们如下格式设置时，则需要以驼峰格式才能正确获取
    data-my-name="itcast"，获取Node.dataset['myName']

描述：页面动态展示旋转木马的轮播图形式，用户鼠标放在轮播图区域内的时候，显示左右按钮，点击可移动切换图片。当一次切换完成后，才能进行下一次的切换，否则无效。鼠标离开区域后，左右按钮隐藏。
注意：小编用的是图片，在这里就不提供给大家了。包括左右的按钮也是图片。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>旋转木马</title>
</head>
<style>
    ul{
        list-style: none;
    }
    .wrap{
        width:1200px;
        margin:10px auto;
    }
    .slide {
        height:500px;
        position: relative;
    }
    .slide li{
        position: absolute;
        left:200px;
        top:0;
    }
    .slide li img{
        width:100%;
    }
    .arrow{
        opacity: 0;
    }
    .prev,.next{
        width:76px;
        height:112px;
        position: absolute;
        top:50%;
        margin-top:-56px;
        background: url(./images/prev.png) no-repeat;
        z-index: 99;
    }
    .next{
        right:0;
        background-image: url(./images/next.png);
    }
</style>
<script>
    window.onload = function () {
        var arr = [
            {
                width:400,
                top:70,
                left:50,
                opacity:20,
                zIndex:2
            },
            {
                width:600,
                top:120,
                left:0,
                opacity:80,
                zIndex:3
            },
            {
                width:800,
                top:100,
                left:200,
                opacity:100,
                zIndex:4
            },
            {
                width:600,
                top:120,
                left:600,
                opacity:80,
                zIndex:3
            },
            {
                width:400,
                top:70,
                left:750,
                opacity:20,
                zIndex:2
            }
        ];

        //获取元素
        var slide = document.getElementById("slide");
        var liArr = slide.getElementsByTagName("li");
        var arrow = slide.children[1];
        var arrowChildren = arrow.children;
        //设置一个开闭原则变量，点击以后修改这个值。
        var flag = true;

        //鼠标放到轮播图上，两侧的按钮显示，移开隐藏。
        slide.onmouseenter = function () {
            //arrow.style.opacity = 1;
            animate(arrow,{"opacity":100});
        }
        slide.onmouseleave = function () {
            //arrow.style.opacity = 1;
            animate(arrow,{"opacity":0});
        }
        //初始化页面，打开页面的时候，直接动画的方式展现
        move();
        //把两侧按钮绑定事件。(调用同一个方法，只有一个参数，true为正向旋转，false为反向旋转)
        arrowChildren[0].onclick = function () {
            if(flag){
                flag = false;
                move(true);
            }
        }
        arrowChildren[1].onclick = function () {
            if(flag){
                flag = false;
                move(false);
            }
        }

        //书写函数。
        function move(bool){
            //判断：如果等于undefined,那么就不执行这两个if语句
            if(bool === true || bool === false){
                if(bool){
                    arr.unshift(arr.pop());
                }else{
                    arr.push(arr.shift());
                }
            }
            //在次为页面上的所有li赋值属性，利用缓动框架
            for(var i=0;i<liArr.length;i++){
                animate(liArr[i],arr[i], function () {
                    flag = true;
                });
            }
        }

    }
    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele,null)[attr];
        }
        return ele.currentStyle[attr];
    }
    function animate(ele,json,fn){
        //先清定时器
        clearInterval(ele.timer);
        ele.timer = setInterval(function () {
            //开闭原则
            var bool = true;


            //遍历属性和值，分别单独处理json
            //attr == k(键)    target == json[k](值)
            for(var k in json){

                var leader;
                //判断如果属性为opacity的时候特殊获取值
                if(k === "opacity"){
                    leader = getStyle(ele,k)*100 || 1;
                }else{
                    leader = parseInt(getStyle(ele,k)) || 0;
                }

                //获取步长
                var step = (json[k] - leader)/10;
                //二次加工步长
                step = step>0?Math.ceil(step):Math.floor(step);
                leader = leader + step;
                //赋值
                //特殊情况特殊赋值
                if(k === "opacity"){
                    ele.style[k] = leader/100;
                    //兼容IE678
                    ele.style.filter = "alpha(opacity="+leader+")";
                    //如果是层级，一次行赋值成功，不需要缓动赋值
                }else if(k === "zIndex"){
                    ele.style.zIndex = json[k];
                }else{
                    ele.style[k] = leader + "px";
                }
                //清除定时器
                //判断: 目标值和当前值的差大于步长，就不能跳出循环
                //目标位置和当前位置不相等，就不能清除清除定时器。
                if(json[k] !== leader){
                    bool = false;
                }
            }

            console.log(1);
            //只有所有的属性都到了指定位置，bool值才不会变成false；
            if(bool){
                clearInterval(ele.timer);
                //所有程序执行完毕了，现在可以执行回调函数了
                //只有传递了回调函数，才能执行
                if(fn){
                    fn();
                }
            }
        },25);
    }
</script>
<body>
    <div class="wrap" id="wrap">
        <div class="slide" id="slide">
            <ul>
                <!--五张图片-->
                <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li>
                <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li>
            </ul>
            <!--左右切换按钮-->
            <div class="arrow" id="arrow">
                <a href="javascript:;" class="prev"></a>
                <a href="javascript:;" class="next"></a>
            </div>
        </div>
    </div>
</body>
</html>

描述：当用户打开页面的右下角显示一个广告，当用户点击关闭按钮的时候，广告底部先消失，然后整个广告全部消失。如果用户不点击关闭，在页面打开5秒之后，广告也会按照上述关闭方式进行关闭。
示例代码：
<!DOCTYPE html>

<meta charset="UTF-8">
<title>模拟屏幕右下角广告</title>
<style>
    .box{
        width: 322px;
        position: fixed;
        bottom:0;
        right:0;
    }
    span{
        position: absolute;
        top:0;
        right:0;
        width:30px;
        height: 20px;
        cursor: pointer;
    }
</style>
<script>
    window.onload = function () {
        var guanbi = document.getElementById("guanbi");
        var box = guanbi.parentNode;
        var b = document.getElementById("b");
        guanbi.onclick =close;
        setTimeout(close,5000);
        function close() {
            console.log(1);
            animate(b,{"height":0},function () {
                animate(box,{"width":0});
            })
        }
        function animate(ele,json,fn) {
            clearInterval(ele.timer);
            ele.timer = setInterval(function () {
                var bool = true;
                for(var k in json){
                    var leader = parseInt(getStyle(ele,k)) || 0;
                    var step = (json[k] - leader)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    leader = leader + step;
                    ele.style[k] = leader + "px";
                }
                if(json[k] !== leader){
                    bool = false;
                }
                if(bool){
                    clearInterval(ele.timer);
                    if(fn){
                        fn();
                    }
                }
            },1);
        }
        function getStyle(ele,attr) {
            if(window.getComputedStyle){
                return window.getComputedStyle(ele,null)[attr];
            }
            return ele.currentStyle[attr];
        }
    }
</script>


<div class="box">
    <span id="guanbi"></span>
    <div class="hd" id="t">
        <img src="images/t.jpg" alt=""/>
    </div>
    <div class="bd" id="b">
        <img src="images/b.jpg" alt=""/>
    </div>
</div>


描述：默认状态为几张图片显示最左侧的部分，其余部分处于隐藏的状态。鼠标经过的时候，经过的图片变宽，其余图片全部变窄。由于变窄的速度大于图片变宽的速度。所有最右面的一个图片，在默认状态的时候，显示的要比其他部分少一些。鼠标离开之后，图片回复为原来的样子。
示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手风琴效果</title>
    <style>
        *{
            padding:0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        div{
            width: 1150px;
            height: 400px;
            margin:50px auto;
            border:1px solid red;
            overflow: hidden;
        }
        div li{
            width: 240px;
            height: 400px;
            float: left;
        }
        div ul{
            width: 1300px;
        }
    </style>
    <script>
        window.onload = function () {
            //获取相关元素
            var div = document.getElementsByTagName("div")[0];
            var liArr = div .getElementsByTagName("li");
            //循环为每一个li添加背景图片以及添加鼠标经过事件
            for(var i = 0;i<liArr.length;i++){
                //添加图片
                liArr[i].style.background = "url(images/"+(i+1)+".jpg) no-repeat";
                //添加鼠标经过时候的事件
                liArr[i].onmouseover = function () {
                    for (var j = 0;j<liArr.length;j++){
                        animate(liArr[j],{"width":100});
                    }
                    animate(this,{"width":800})
                }
            }
            //鼠标离开之后，复原
            div.onmouseout = function () {
                for(var j=0;j<liArr.length;j++){
                    //引用框架实现宽度变窄
                    animate(liArr[j],{"width":240});
                }
            }
            function animate(ele,json,fn) {
                clearInterval(ele.timer);
                ele.timer = setInterval(function () {
                    var bool = true;
                    for(var k in json){
                        var leader = parseInt(getStyle(ele,k)) || 0;
                        var step = (json[k] - leader)/10;
                        step = step>0?Math.ceil(step):Math.floor(step);
                        leader = leader + step;
                        ele.style[k] = leader + "px";
                    }
                    if(json[k] !== leader){
                        bool = false;
                    }
                    if(bool){
                        clearInterval(ele.timer);
                        if(fn){
                            fn();
                        }
                    }
                },1);
            }
            function getStyle(ele,attr) {
                if(window.getComputedStyle){
                    return window.getComputedStyle(ele,null)[attr];
                }
                return ele.currentStyle[attr];
            }
        }
    </script>
</head>
<body>
    <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

描述：当用户点击登录的时候，弹出一片区域，中间空白区域与其他区域不同，其他区域为半透明状态。点击透明状态的时候，弹出区域关闭，点击中间区域，无效。
技术难点：取消冒泡
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>隐藏模态框</title>
    <style>
        body,html {
            height: 100%;
            padding: 0;
            margin: 0;
        }
        .mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }
        .login {
            width: 400px;
            height: 300px;
            cursor: pointer;
            background-color: #fff;
            margin: 200px auto;
        }
    </style>
</head>
<body>
    <div class="mask">
        <div class="login" id="login"></div>
    </div>
    <a href="#">注册</a>
    <a href="#">登陆</a>
</body>
</html>
<script>
    //模态框
    var mask = document.getElementsByClassName("mask")[0];
    //点击a链接
    var a = document.getElementsByTagName("a")[1];

    //a的点击事件，点击之后弹出模态框
    a.onclick = function (event) {

        event = event || window.event;

        mask.style.display = "block";
        //取消冒泡
        if(event || event.stopPropagation){
            event.stopPropagation();
        }else {
            event.cancelBubble = true;
        }
    }

    document.onclick = function (event) {
        event = event || window.event;

        //获取点击的区域
        var box = event.target?event.target:event.srcElement;
        if(box.id !== "login"){
            mask.style.display = "none";
        }
    }
</script>

冒泡机制（event）

当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。简言之：子元素事件被触动，父盒子的同样的事件也会被触动。

事件传播阶段

事件传播的三个阶段是：捕获、冒泡和目标阶段
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。
事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。
目标阶段：目标正在被执行的阶段

冒泡顺序

  • IE 6.0:
    div -> body -> html -> document
  • 其他浏览器:
    div -> body -> html -> document -> window
  • 不是所有的事件都能冒泡。以下事件不冒泡：`blur、focus、load、unload、onmouseenter

onmouseleave`

阻止冒泡

  • w3c的方法是：（火狐、谷歌、IE11）event.stopPropagation()
  • IE10以下则是使用：event.cancelBubble = true
  • 兼容代码如下：
 var event = event || window.event;
 if(event && event.stopPropagation){
            event.stopPropagation();
  }else{
            event.cancelBubble = true;
  }

  • addEventListenner(参数1，参数2，参数3)

    • 调用者是：事件源。
    • 参数1：事件去掉on 参数2 ：调用的函数
    • 参数3：可有可无。没有默认false。（false情况下，支持冒泡。True支持捕获）。
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. ...
  7. 9