JavaScript 入门案例

时间：2022-11-07 12:01:20

四、  JavaScript 入门案例

在看本节之前，笔者建议您先看 JavaScript 基础篇  https://www.cnblogs.com/IT-LFP/p/10945884.html

1.  瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局-瀑布流</title>

    <link rel="stylesheet" href="css/layout.css" />
    <script src="js/layout.js"></script>
</head>
<body>
<div id="container">
    <div class="box">
        <div class="box_img">
            <a href="img/1.jpg"><img src="img/1.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/2.jpg"><img src="img/2.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/3.jpg"><img src="img/3.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/4.jpg"><img src="img/4.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/5.jpg"><img src="img/5.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/6.jpg"><img src="img/6.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/7.jpg"><img src="img/7.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/8.jpg"><img src="img/8.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/9.jpg"><img src="img/9.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/10.jpg"><img src="img/10.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/11.jpg"><img src="img/11.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/12.jpg"><img src="img/12.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/13.jpg"><img src="img/13.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/14.jpg"><img src="img/14.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/15.jpg"><img src="img/15.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/6.jpg"><img src="img/16.jpg" alt="" ></a>
        </div>
    </div>
</div>
</body>
<script>
window.onload = function () {
    imgLocation("container", "box");
    var imgData = {
        "data": [
            {"src": "2.jpg"}, {"src": "4.jpg"}, {"src": "6.jpg"}, {"src": "8.jpg"}, {"src": "10.jpg"}, {"src": "12.jpg"}, {"src": "14.jpg"}, {"src": "16.jpg"},
            {"src": "1.jpg"}, {"src": "3.jpg"}, {"src": "5.jpg"}, {"src": "7.jpg"}, {"src": "9.jpg"}, {"src": "11.jpg"}, {"src": "13.jpg"}, {"src": "15.jpg"}
        ]
    };
    window.onscroll = function () {
        if (checkFlag()) {
            var cparent = document.getElementById("container");
            for (var i in imgData.data) {//添加图片节点
                //console.log(i);
                var ccontent = document.createElement("div");
                ccontent.className = "box";
                cparent.appendChild(ccontent);
                var boximg = document.createElement("div");
                boximg.className = "box_img";
                ccontent.appendChild(boximg);
                var aimg = document.createElement("a");
                aimg.href = "img/" + imgData.data[i].src;
                boximg.appendChild(aimg);
                var img = document.createElement("img");
                img.src = "img/" + imgData.data[i].src;
                aimg.appendChild(img);
            }
            imgLocation("container", "box");
        }
    }
};

function checkFlag() {
    var cparent = document.getElementById("container");
    var ccontent = getChildrenElement(cparent, "box");
    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //console.log(lastContentHeight + ":" + scrolltop + ":" + pageHeight);
    if (lastContentHeight < scrolltop + pageHeight)
        return true;
}

//将content储存在数组中
function getChildrenElement(parent, content) {
    var contentArr = [];
    var contentAll = parent.getElementsByClassName(content);
    //console.log(contentAll.length);
    for (var i = 0; i < contentAll.length; i++) {//为什么这里不能用var i in contentAll
        contentArr.push(contentAll[i]);
    }
    return contentArr;
}

//将parent下所有的content取出
function imgLocation(parent, content) {
    var cparent = document.getElementById(parent);
    var ccontent = getChildrenElement(cparent, content);
    var imgWidth = ccontent[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth / imgWidth);
    //console.log(cols);
    cparent.style.cssText = "width:" + imgWidth * cols + "px;margin:0 auto";

    //获取衔接点
    var boxHeightArr = [];
    for (var i in ccontent) {
        if (i < cols) {
            boxHeightArr[i] = ccontent[i].offsetHeight;
            //console.log(boxHeightArr[i]);
        } else {
            var minHeight = Math.min.apply(null, boxHeightArr);
            //console.log(minHeight);
            var minIndex = getMinIndex(boxHeightArr, minHeight);
            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minHeight + "px";
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
            boxHeightArr[minIndex] += ccontent[i].offsetHeight;

        }
    }
}

function getMinIndex(boxHeightArr, minHeight) {
    for (var i in boxHeightArr)
        if (boxHeightArr[i] == minHeight)
            return i;
    return -1;
}
</script>
</html>

2.  3D翻页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D翻页轮播</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: url("img/0.jpg") no-repeat center/100%;
            /*overflow: hidden;*/
        }

        .wrap {
            position: relative;
            width: 1000px;
            height: 612px;
            margin: 100px auto;
            background: url("img/0.jpg") no-repeat 100%;
            perspective: 6000px; /*3d景深*/
            box-shadow: 0 0 18px pink;
        }

        .left, .right {
            position: absolute;
            right: 0;
            top: 0;
            width: 50%;
            height: 100%;

        }

        .left {
            transform: rotateY(0deg);
            transform-origin: left;
            transform-style: preserve-3d; /*3d属性*/
            z-index: 1;
        }

        .on {
            transform: rotateY(-180deg);
            transition: transform 1.5s ease-in-out;
        }

        .right {
            background: url("img/1.jpg") no-repeat right top 50%;
        }

        .prev, .next {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .prev {
            background: url("img/0.jpg") no-repeat right top 50%;
        }

        .next {
            background: url("img/1.jpg") no-repeat left top 50%;
            transform: translateZ(-1px) scale(-1, 1); /*scale(x,y)负值可以达到镜像,translateZ(-1px)改变层次*/
        }

    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        <div class="prev"></div>
        <div class="next"></div>
    </div>
    <div class="right"></div>
</div>
</body>
<script>
    /**
     * 防止全局变量污染
     */
    (function () {
            var oLeft = document.querySelector(".left");//获取元素querySelector(".left");
            var oPrevImg = document.querySelector(".prev"),
                oNextImg = document.querySelector(".next"),
                oWrapImg = document.querySelector(".wrap"),
                oRightImg = document.querySelector(".right"),
                oBodyImg = document.querySelector("body");

            var index = 0,//当前第几张图
                isClick = false;//多次点击的开关

            function change() {
                if (isClick) return;
                isClick = true;
                index++;
                index %= 4;
                oLeft.classList.add("on");//添加类名,可维护性
                document.addEventListener("transitionend", function () {//transitionend
                    oLeft.classList.remove("on");
                    oBodyImg.style.backgroundImage =
                        oPrevImg.style.backgroundImage =
                            oWrapImg.style.backgroundImage = "url('img/" + index + ".jpg')";

                    oNextImg.style.backgroundImage =
                        oRightImg.style.backgroundImage = "url('img/" + (index + 1) % 4 + ".jpg')";
                    isClick = false;
                });
            }

            document.onclick = function () {
                change();
            }

        }
    )();
</script>
</html>

3.  网易轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 1200px;
            height: 367px;
            margin: 80px auto;
        }

        .wrap .imgBox ul {
            position: relative;
            width: 1200px;
            height: 336px;
            overflow: hidden;
        }

        .wrap .imgBox ul li {
            position: absolute;
            list-style: none;
            width: 730px;
            height: 336px;
            transition: transform .2s ease;
        }

        .wrap .imgBox ul .list1 {
            z-index: 1;
            transform: scale(0.81);
            transform-origin: 0 100%;
        }

        .wrap .imgBox ul .list2 {
            z-index: 2;
            transform: translateX(235px);
        }

        .wrap .imgBox ul .list3 {
            z-index: 1;
            transform: translateX(730px) scale(0.81);
            transform-origin: 100% 100%;
        }

        .wrap .imgBox ul .list4 {
            transform: translateX(965px) scale(0.81);
            transform-origin: 100% 100%;
        }

        .wrap .imgBox ul .list5 {
            transform: translateX(1200px) scale(0.81);
            transform-origin: 100% 100%;
        }

        .wrap .imgBox ul .list6 {
            transform: translateX(1435px) scale(0.81);
            transform-origin: 100% 100%;
        }

        .wrap .imgBox ul li img {
            width: 730px;
            height: 336px;

        }

        .wrap .lineBar {
            width: 1200px;
            height: 31px;
            text-align: center;
        }

        .wrap .lineBar span {
            display: inline-block;
            width: 35px;
            height: 3px;
            margin-left: 4px;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<!--
     div.wrap>(div.imgBox>ul>li.list$*6>img[src="img/0$.jpg"])+div.lineBar>span*6
     -->
<div class="wrap">
    <div class="imgBox">
        <ul>
            <li class="list1"><img src="img/01.jpg" alt=""></li>
            <li class="list2"><img src="img/02.jpg" alt=""></li>
            <li class="list3"><img src="img/03.jpg" alt=""></li>
            <li class="list4"><img src="img/04.jpg" alt=""></li>
            <li class="list5"><img src="img/05.jpg" alt=""></li>
            <li class="list6"><img src="img/06.jpg" alt=""></li>
        </ul>
    </div>
    <div class="lineBar"><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
</body>
<script>
    (function () {
        var listArray = document.querySelectorAll(".wrap .imgBox ul li"),
            lineBar = document.querySelectorAll(" .wrap .lineBar span"),
            oImgBox = document.querySelector(".wrap .imgBox"),
            oName = [],
            index = 0,
            listLength = listArray.length;
        for (var item of listArray) {
            oName.push(item.className);
        }

        function nextPic() {//把最后一个放到第一个位置
            oName.unshift(oName[5]);
            oName.pop();
            for (var i = 0; i < listLength; i++)
                listArray[i].className = oName[i];
            index++;
            index %=6;
            changeColor();
        }

        function prePic() {//把第一个放到最后一个位置
            oName.push(oName[0]);
            oName.shift();
            for (var i = 0; i < listLength; i++)
                listArray[i].className = oName[i];
            index--;
            if (index<0) index=5;
            changeColor();
        }

        function changeColor() {
            for (var i = 0; i < listLength; i++) {
                if (i == index)
                    lineBar[index].style.backgroundColor = "green";
                else
                    lineBar[i].style.backgroundColor = "#cccccc";
            }
        }
        changeColor();

        var eleSel = ["list1", "list3"];
        var eleAct = ["prePic", "nextPic"];
        oImgBox.addEventListener("click", function (e) {
            var e = e || window.event;
            var ele = e.target.parentNode.getAttribute("class");
            if (ele == "list3") nextPic();
            if (ele == "list1") prePic();
            //window[eleAct[eleSel.indexOf(ele)]]();
        });
    })();
</script>
</html>

4.  京东轮播图

//京东轮播图
(function () {
    var oLefter = document.querySelector(".j-content .content-wrap01 .content02 .lefter");
    var oRighter = document.querySelector(".j-content .content-wrap01 .content02 .righter");
    var oImages = document.querySelectorAll(".j-content .content-wrap01 .content02 .banner-img a");
    var oCircle = document.querySelectorAll(".j-content .content-wrap01 .content02 .circle span");
    var oBanner = document.querySelector(".j-content .content-wrap01 .content02");
    var index = 0;
    var lastIndex = 0;
    var timer = 0;//定时器的返回值是number类型

    //方向点击切换
    oLefter.onclick = function () {
        change(function () {
            index--;
            if (index < 0) index = oImages.length - 1;
        });
    };
    oRighter.onclick = function () {
        rightChange();
    };

    function rightChange() {
        change(function () {
            index++;
            index %= oImages.length;
        });
    }

    //鼠标移动到圆的切换
    for (var i = 0; i < oCircle.length; i++) {
        oCircle[i].index = i;//在每个圆中自定义一个index属性,核心点
        oCircle[i].onmouseover = function (e) {
            change(function () {
                index = e.currentTarget.index;//核心点,想想为什么不能用this.index
            });
        }
    }

    //自动轮播
    function auto() {
        timer = setInterval(function () {
            rightChange();
           // console.log(index);
        }, 3000);
    }
    auto();

    //鼠标进入轮播图清除定时时间
    oBanner.onmouseenter = function () {
        clearInterval(timer);
    };
    //鼠标移出自动轮播
    oBanner.onmouseout = function () {
        clearInterval(timer);//清除重复的定时器,修复bug
        auto();
    };

    //change函数
    function change(callback) {
        //prev
        oImages[lastIndex].classList.remove("banner-on");//className = '';
        oCircle[lastIndex].classList.remove("circle-on");
        //index变化
        callback && callback();//防止报错
        //next
        oImages[index].classList.add("banner-on");//className="banner-on";
        oCircle[index].classList.add("circle-on");
        //lastIndex变化
        lastIndex = index;
    }
})();

5.  京东公告栏和线条跟随

(function () {
    var oLine = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .line"),
        oPromotion = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .a2-1"),
        oNotice = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .a2-2");
    var promote = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .promotion"),
        note = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .notice");

    //促销栏和下划线的显示
    oPromotion.onmouseenter = function () {
        oLine.classList.remove("line-on");
        oLine.addEventListener("transitionend", function () {
            note.classList.add("text-none");
            promote.classList.remove("text-none");
        });
    };

    //公告栏和下划线的显示
    oNotice.onmouseenter = function () {
        oLine.classList.add("line-on");
        oLine.addEventListener("transitionend", function () {
            promote.classList.add("text-none");
            note.classList.remove("text-none");
        });
    }

})();

6.  京东秒杀

/*京东秒杀*/

(function () {
    var timeData = {//获取时间数据
        oHours: document.querySelector(".j-content .content-wrap02 .flashDeals a ul .flashTimer .hours"),
        oMinimums: document.querySelector(".j-content .content-wrap02 .flashDeals a ul .flashTimer .minimums"),
        oSeconds: document.querySelector(".j-content .content-wrap02 .flashDeals a ul .flashTimer .seconds"),
    };

    //计时器
    function timer(time) {
        if (Number(time.oSeconds.innerHTML) > 0) {
            change(time.oSeconds);
        } else {
            if (Number(time.oMinimums.innerHTML) > 0) {
                change(time.oMinimums);
                time.oSeconds.innerHTML = 59;
            } else {
                if (Number(time.oHours.innerHTML) > 0) {
                    change(time.oHours);
                    time.oMinimums.innerHTML = 59;
                    time.oSeconds.innerHTML = 59
                } else {
                    clearInterval();
                }
            }
        }
    }

    //计时变化
    function change(data) {
        var count = Number(data.innerHTML);
        // console.log(typeof  data.innerHTML);
        count--;
        if (count < 10)
            data.innerHTML = "0" + count;
        else
            data.innerHTML = count;
    }

    //定时
    setInterval(function () {
        timer(timeData);
    }, 1000);

})();

7.  京东搜索框热词推荐

/*热词变化*/
(function () {
    var data01 = ["海尔空调", "烧烤炉", "奶瓶消毒器", "挂烫机", "云南白药牙膏", "U盘16G", "魅族手机", "油烟机"];
    var data02 = ["1元享800M", "家电清凉节", "建材3件8折", "巴味渝珍李"];
    var length01 = data01.length,
        index01 = 0,
        length02 = data02.length,
        index02 = 0,
        timer02 = 0;

    var oPlaceholder = document.querySelector(".search-wrap .search-box .searcher .searchText"),
        oHotWords = document.querySelector(".search-wrap .search-hotWords .a-1");

    var flag = false;

    //placeholder的热词切换
    setInterval(function () {
        if (!flag) {
            index01++;
            index01 %= length01;
            oPlaceholder.setAttribute("placeholder", data01[index01]);
        }
    }, 5000);

    //搜索框获取和失去焦点时,placeholder的热词消失和出现
    oPlaceholder.onfocus = function () {
        flag = true;
        oPlaceholder.setAttribute("placeholder", "");
    };
    oPlaceholder.onblur = function () {
        flag = false;
        oPlaceholder.setAttribute("placeholder", data01[index01]);
    };

    //推荐热词的切换函数
    function auto() {
        timer02 = setInterval(function () {
            index02++;
            index02 %= length02;
            oHotWords.innerHTML = data02[index02];
        }, 3000);
    }

    auto();
    //鼠标移入后,推荐热词停止切换
    oHotWords.onmouseenter = function () {
        clearInterval(timer02);
    };
    //鼠标移出后,推荐热词继续切换
    oHotWords.onmouseout = function () {
        clearInterval(timer02);
        auto();
    };

})();

相关文章