JS简易轮播图

<script>
    var index = 1;

    function pic() {
        var arr = ["bg1.jpg", "bg2.jpg", "bg3.jpg", "bg4.jpg",
                "bg5.jpg", "bg6.jpg"
            ]
            // 如何更换图片
            // 获取到图片img
        var img = document.querySelector(".box img")
            //更改img的src来实现图片的切换
        img.src = "img/" + arr[index];
        //获取所有的li标签
        var list = document.querySelectorAll("ul li");
        // console.log(list);
        //先将所有li上面的active进行清除
        for (var i = 0; i < list.length; i++) {
            list[i].classList.remove("active")
        }
        list[index].classList.add("active")
        index++;
        if (index > 5) {
            index = 0;
        }
        console.log(index);
    }
    //每搁1s切换一张图片,肯定要用定时器
    setInterval(pic, 1000);
</script>

 

 

 location对象

Location 对象包含有关当前 URL 的信息

Location 对象是 Window 对象的一个部分可通过 window.location 属性来访问

 

   //assign() 可以打开新的页面,并且可以返回,可以产生历史记录

    assign.onclick = function() {

            location.assign("https://www.jd.com");

        }

        // reload() 实现的是页面刷新

    reload.onclick = function() {

        location.reload("https://www.jd.com");

    }

    replace.onclick = function() {

        // replace() 用新文档替换当前的文档,可以实现打开信的页面的功能

        // 回,故没有产生历史记录

        location.replace("https://www.jd.com");

    }

    href.onclick = function() {

        location.href("https://www.jd.com");

    }

 history对象

History 对象包含用户（在浏览器窗口中）访问过的 URL

History 对象是 window 对象的一部分可通过 window.history 属性对其进行访问

        btn.onclick = function() {

            history.back() //后退到历史记录列表的上一个url

        }

        btn2.onclick = function() {

            location.href = "3.html"

        }

        btn3.onclick = function() {

            history.forward() //前进到历史记录列表的下一个url

        }

        btn4.onclick = function() {

            history.go(-1)

        }

 confirm方法 
confirm() 方法用于显示一个带有指定消息和确定及取消按钮的对话框。 
说明：如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false 

   var add = document.getElementById("add");

    add.onclick = function() {

            if (confirm("你确定要添加吗") == true) {

                // 创建节点

                var li = document.createElement("li");

                // 获取文本框输入的值

                var content = document.getElementById("content");

                li.innerHTML = content.value;

                // 获取ul标签

                var ul = document.getElementById("list");

                ul.appendChild(li)

                alert("添加成功")

            } else {

                alert("不添加")

            }

        }

        //用来验证文本框输入的值的格式是不是只包含数字的字母

    function test() {

        // 正则表达式:只能是数字和字母,并且不能为空

        var reg = /\b[a-zA-Z0-9]{1,}\b/;

        var content = document.querySelector("#content");

        //test()返回一个布尔值,当满足正则表达式时  返回true  否则返回false

        if (reg.test(content.value)) {

            return true;

        } else {

            return false;

        }

    }