Javascript考试复习

最新推荐文章于 2024-04-07 03:20:45 发布

MrFlySand_飞沙

最新推荐文章于 2024-04-07 03:20:45 发布

阅读量161

点赞数

MrFlySand

本文链接：https://blog.csdn.net/MrFlySand/article/details/131180470

版权

登录页面

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录页面</title>
    <style>
        html {
            background: #bde0ff;
        }
        
        form {
            text-align: center;
            position: absolute;
            /*表单于页面居中*/
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 0 40px;
            background: #fff;
            border-radius: 10px;
        }
        
        input[type=text],
        input[type=password] {
            background-color: white;
            /*正常状态样式*/
            color: black;
            border: none;
            outline: none;
            text-align: center;
            height: 50px;
            width: 250px;
            margin: 5px;
            border-bottom: 1px solid #626262;
        }
        
        input[type=button] {
            background-color: #45A0F2;
            /*正常状态样式*/
            color: white;
            border: none;
            border-radius: 20px;
            outline: none;
            text-align: center;
            height: 50px;
            width: 250px;
            margin: 50px 5px 20px 5px;
        }
        
        input[type=button]:hover {
            outline: none;
            /*悬停时样式*/
            background-color: #348dde;
            color: white;
            /* box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.45), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
            /*阴影*/
        }
        
        #divp>span {
            color: #348dde;
        }
        
        #divp span:active {
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div>
        <form name="f" onsubmit="check(this)">
            <h1>登录页面</h1>
            <input type="text" id="name" placeholder="账号：admin"><br>
            <input type="password" id="pass" placeholder="密码:123456"><br>
            <input type="button" onclick="check(this)" value="登录">
            <div id="divp">
                <span>注册</span>
                <span>忘记密码</span>
            </div>
            <p>© 2023 MrFlySand</p>
        </form>
    </div>
</body>
<script>
    function check(thisform) {
        var name = document.getElementById("name").value; //读取表单数据，创建变量
        var pass = document.getElementById("pass").value;
        if (pass.length < 6 || pass.length > 18) {
            alert("密码由6~18位的大小字母、数字、符号组成！")
        } else if (name == "admin" && pass == "123456" || name == "admin2" && pass == "456789") {
            //验证变量。此处设置账号、密码(可设置多组，用||隔开)
            // alert("登录成功！");
            window.document.f.action = "page.html"; //此处设置登录后跳转页面
            window.document.f.submit();
        } else {
            alert("用户名或密码错误！");
        }
    }
</script>

</html>

<!-- page.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <div style="font-size: 100px;color: red;">首页：登录成功</div>
</body>

</html>

轮播图1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>无缝轮播图</title>
    <style>
        .carousel-container {
            width: 500px;
            height: 300px;
            overflow: hidden;
            /* outline: 2px solid lightblue; */
            margin: 0 auto;
            position: relative;
        }
        
        .carousel-list {
            width: 500%;
            height: 100%;
        }
        
        .carousel-item {
            width: 500px;
            height: 100%;
            object-fit: cover;
            float: left;
        }
        
        .indicator {
            position: absolute;
            width: 100%;
            left: 0;
            bottom: 0;
            height: 30px;
            text-align: center;
        }
        
        .indicator-item {
            display: inline-block;
            width: 20px;
            height: 2px;
            background: #fff;
            cursor: pointer;
            margin: 0 5px;
        }
        
        .indicator-item.active {
            background: #ffa44f;
        }
        
        .arrow-left,
        .arrow-right {
            position: absolute;
            width: 50px;
            height: 100%;
            top: 0;
            background: rgba(0, 0, 0, 0.5);
            cursor: pointer;
            opacity: 0;
            color: #fff;
        }
        
        .arrow-left:hover,
        .arrow-right:hover {
            opacity: 1;
        }
        
        .arrow-left {
            left: 0;
        }
        
        .arrow-left::before {
            content: '<';
        }
        
        .arrow-right {
            right: 0;
        }
        
        .arrow-right::before {
            content: '>';
        }
        
        .arrow-left::before,
        .arrow-right::before {
            position: absolute;
            left: 0;
            width: 100%;
            text-align: center;
            top: 50%;
            height: 30px;
            line-height: 30px;
            margin-top: -15px;
        }
    </style>
</head>

<body>
    <div class="carousel-container">
        <div class="carousel-list"></div>
        <div class="indicator"></div>
        <div class="arrow">
            <div class="arrow-left"></div>
            <div class="arrow-right"></div>
        </div>
    </div>

</body>
<script>
    function createAnimation(options) {
        var from = options.from; // 起始值
        var to = options.to; // 结束值
        var totalMS = options.totalMS || 1000; // 变化总时间
        var duration = options.duration || 15; // 动画间隔时间
        var times = Math.floor(totalMS / duration); // 变化的次数
        var dis = (to - from) / times; // 每一次变化改变的值
        var curTimes = 0; // 当前变化的次数
        var timerId = setInterval(function() {
            from += dis;
            curTimes++; // 当前变化增加一次
            if (curTimes >= times) {
                // 变化的次数达到了
                from = to; // 变化完成了
                clearInterval(timerId); // 不再变化了
                options.onmove && options.onmove(from);
                options.onend && options.onend();
                return;
            }
            // 无数的可能性
            options.onmove && options.onmove(from);
        }, duration);
    }

    (function() {
        function $(selector) {
            return document.querySelector(selector);
        }

        // 初始化
        var curIndex = 0; // 当前显示的是第几张图片
        var doms = {
            container: $(".carousel-container"),
            carouselList: $(".carousel-list"),
            indicator: $(".indicator"),
            arrowLeft: $(".arrow-left"),
            arrowRight: $(".arrow-right"),
        };
        var containerWidth = doms.container.clientWidth; // 容器可见区域的宽度
        var urls = [
            "img/Wallpaper1.jpg",
            "img/Wallpaper2.jpg",
            "img/Wallpaper3.jpg",
            "img/Wallpaper4.jpg",
            "img/Wallpaper5.jpg",
        ]; //记录了要显示的所有轮播图的图片路径
        function init() {
            //创建图片函数
            function creatImg(url) {
                var imgs = document.createElement("img");
                imgs.src = url;
                imgs.className = "carousel-item";
                doms.carouselList.appendChild(imgs);
            }
            for (var i = 0; i < urls.length; i++) {
                creatImg(urls[i]);
                //创建指示器
                var div = document.createElement("div");
                div.className = "indicator-item";
                doms.indicator.appendChild(div);
            }
            //多加一张额外的图片
            creatImg(urls[0]);
            //设置容器宽度
            doms.carouselList.style.width = doms.carouselList.children.length + "00%";
            //设置指示器的激活状态
            setIndicatorStatus();
        }
        /**
         * 根据curIndex来设置指示器的状态
         */
        function setIndicatorStatus() {
            // 1. 将目前激活的指示器取消激活
            var active = doms.indicator.querySelector(".indicator-item.active");
            if (active) {
                active.className = "indicator-item";
            }
            // 2. 激活当前的指示器

            var index = curIndex % urls.length;
            doms.indicator.children[index].className = "indicator-item active";
        }
        var totalMs = 300;
        var isPlaying = false;
        //交互
        /**
         * 将轮播图从当前的位置，切换到newIndex位置
         * @param {*} newIndex 新的位置的图片索引
         */
        function moveTo(newIndex, onend) {
            if (isPlaying || newIndex === curIndex) {
                return;
            }
            isPlaying = true;
            var from = parseFloat(doms.carouselList.style.marginLeft) || 0;
            var to = -newIndex * containerWidth;
            createAnimation({
                from: from,
                to: to,
                totalMs: totalMs,
                onmove: function(n) {
                    doms.carouselList.style.marginLeft = n + "px";
                },
                onend: function() {
                    isPlaying = false;
                    onend && onend();
                },
            });
            curIndex = newIndex; // 更改当前显示的图片索引
            setIndicatorStatus();
        }

        function next() {
            var newIndex = curIndex + 1;

            var onend;
            if (newIndex === doms.carouselList.children.length - 1) {
                // 切换到最后一张图片了
                // 等动画(因为要动画完成后，所以必须要在动画结束后的函数上运行)完成后，要回到第一张图片
                onend = function() {
                    doms.carouselList.style.marginLeft = 0;
                    curIndex = 0;
                };
            }
            moveTo(newIndex, onend);
        }

        function prev() {
            var newIndex = curIndex - 1;
            if (newIndex < 0) {
                var maxIndex = doms.carouselList.children.length - 1;
                doms.carouselList.style.marginLeft = -maxIndex * containerWidth + "px";
                newIndex = maxIndex - 1;
            }
            moveTo(newIndex);
        }

        var duration = 2000; // 自动切换的间隔
        var timerId;

        function autoStart() {
            if (timerId) {
                // 已经有自动切换在进行了
                return;
            }
            timerId = setInterval(next, duration);
        }

        function autoStop() {
            clearInterval(timerId);
            timerId = null;
        }

        function main() {
            init();
            initEvent();
            autoStart(); // 最开始自动切换
        }

        function initEvent() {
            // 处理指示器的点击事件
            var arr = Array.prototype.slice.call(doms.indicator.children);
            arr.forEach(function(item, index) {
                item.onclick = function() {
                    moveTo(index);
                };
            });
            doms.arrowLeft.onclick = prev;
            doms.arrowRight.onclick = next;
            doms.container.onmouseenter = autoStop;
            doms.container.onmouseleave = autoStart;
        }
        main();
    })();
</script>

</html>

轮播图2

介绍：CSS实现轮播图效果，不能点击切换图片

<!doctype html>
<html>

<head lang='en'>
    <meta charset='utf-8'>
    <title>轮播图</title>
    <style>
        #rotograph {
            width: 300px;
            overflow: hidden;
            margin: auto !important;
        }
        
        #ArticleRecommendation {
            background: #CCC;
            width: auto;
            border-radius: 0 0 5px 0%;
            display: initial;
            padding: 0px 5px;
            margin-top: -100px !important;
            font-size: 1em;
            position: relative;
            z-index: 9;
        }
        
        #rotographImg {
            width: 900px;
            animation: switch 8s infinite;
            margin-top: -20.8px !important;
        }
        
        #rotographImg img {
            width: 300px;
            float: left;
        }
        
        @keyframes switch {
            0% {
                transform: translateX(0px);
            }
            33% {
                transform: translateX(0px);
            }
            35% {
                transform: translateX(-300px);
            }
            60% {
                transform: translateX(-300px);
            }
            66% {
                transform: translateX(-600px);
            }
            95% {
                transform: translateX(-600px);
            }
            100% {
                transform: translateX(0px);
            }
        }
    </style>
</head>

<body>
    <div id='rotograph'>
        <div id='rotographImg'>
            <a href='https://mp.weixin.qq.com/s?__biz=MzkzMjE5OTMwOA==&mid=2247487093&idx=1&sn=0c864d036473b83ccb9981a2950a089d&chksm=c25e2096f529a980bcd9f7ebdd415f3dd69194dfcfd8a9987265a2548d5593690226528665d8&scene=21#wechat_redirect'><img src='图片 (1).jpg' /></a>
            <a href='https://mp.weixin.qq.com/s?__biz=MzkzMjE5OTMwOA==&mid=2247488973&idx=1&sn=623acc425f344a1e96b628b90839aa4e&chksm=c25e3b2ef529b238380917341f6242384299206f35d7e362b453f58c47e79df38a2e0152c440&token=1332821877&lang=zh_CN#rd'><img src='图片 (2).jpg' /></a>
            <a href='https://mp.weixin.qq.com/s?__biz=MzkzMjE5OTMwOA==&mid=2247487649&idx=1&sn=ce21895b86c23c78f101c938386c9b59&chksm=c25e3e42f529b754b91d5e2c951f8f88266edef69a096a9bd9e8650dca560b5c5146407a08d7&token=1332821877&lang=zh_CN#rd'><img src='图片 (3).jpg' /></a>
        </div>
    </div>
</body>

</html>

购物车

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .column {
            float: left;
        }
        
        .cart-head {
            width: auto;
            height: 32px;
            line-height: 32px;
            background: #f3f3f3;
            padding: 5px 0;
            border: 1px solid #e9e9e9;
            border-top: 0;
            font-size: 12px;
            margin-bottom: 1px;
            display: inline-block;
        }
        
        .checkbox {
            width: 122px;
            height: 18px;
            line-height: 18px;
            padding-left: 11px;
            padding-top: 7px;
        }
        
        .checkAll {
            margin-right: 5px;
            vertical-align: text-bottom;
        }
        
        .goods {
            width: 208px;
        }
        
        .props {
            width: 140px;
            height: 32px;
            padding: 0 10px 0 20px;
        }
        
        .price {
            width: 120px;
            padding-right: 50px;
            text-align: right;
        }
        
        .quantity {
            width: 80px;
            text-align: center;
        }
        
        .sum {
            width: 100px;
            padding-right: 40px;
            text-align: right;
        }
        
        .action {
            width: 75px;
        }
        
        .cart-body,
        .cart-foot {
            display: inline-block;
        }
        
        .cart-foot {
            position: relative;
            width: 988px;
            height: 50px;
            border: 1px solid #f0f0f0;
            font-size: 12px;
        }
        
        .cart-foot .left {
            float: left;
            width: 363px;
            height: 50px;
        }
        
        .select-all {
            float: left;
            width: 49px;
            height: 50px;
            line-height: 50px;
            padding-left: 9px;
        }
        
        .select-all .checkAll {
            margin: 5px 3px 0 0;
            vertical-align: text-bottom;
        }
        
        .operation {
            float: left;
            width: 305px;
            height: 50px;
            line-height: 50px;
        }
        
        .operation a {
            float: left;
            margin-left: 10px;
            color: #666;
            text-decoration: none;
        }
        
        .cart-foot .right {
            /*  position: absolute;
            top: 0;
            right: 0; */
            float: left;
            width: 625px;
            height: 50px;
        }
        
        .price-sum {
            float: right;
            width: 220px;
            height: 50px;
            line-height: 50px;
            color: #999;
        }
        
        .totalAmount {
            padding: 0 3px;
        }
        
        .total {
            color: #e22312;
            font-size: 16px;
            font-weight: 700;
        }
        
        .btn-area {
            float: right;
            width: 95px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #e22312;
            font-size: 18px;
            font-weight: 700;
        }
        
        .btn-area a {
            color: #fff;
            text-decoration: none;
        }
        
        .item {
            width: 988px;
            height: 119px;
            line-height: 119px;
            border-top: 1px solid #f0f0f0;
            font-size: 12px;
        }
        
        .checkUnit {
            width: 115px;
            height: 119px;
            padding-left: 13px;
        }
        
        .white {
            width: 95px;
            height: 119px;
        }
        
        .shop {
            width: 380px;
            height: 119px;
        }
        
        .shop img {
            margin-top: 15px;
            border: 1px solid rgba(204, 204, 204, 0.548);
            float: left;
        }
        
        .shop .desc {
            float: left;
            width: 190px;
            height: 119px;
            line-height: 30px;
            padding-top: 15px;
            padding-left: 20px;
        }
        
        .count button {
            width: 23px;
            height: 20px;
            border: 1px solid #cbcbcb;
            background-color: #fff;
        }
        
        .count input {
            width: 30px;
            height: 20px;
            outline: none;
            text-align: center;
            border: 1px solid #cbcbcb;
            box-sizing: border-box;
        }
        
        .unitPrice {
            width: 90px;
            height: 119px;
        }
        
        .count {
            width: 140px;
            height: 119px;
        }
        
        .subtotal {
            width: 72px;
            height: 119px;
        }
        
        .handle {
            width: 83px;
            height: 119px;
        }
        
        .handle a {
            display: block;
            line-height: 55px;
            color: #808080;
            text-decoration: none;
        }
        
        .bg {
            background-color: rgba(233, 158, 19, 0.226);
        }
    </style>
</head>

<body>
    <div id="shoppingCart">
        <div class="cart-head">
            <div class="column checkbox">
                <input type="checkbox" class="checkAll"> 全选
            </div>
            <div class="column goods">商品</div>
            <div class="column props"></div>
            <div class="column price">单价</div>
            <div class="column quantity">数量</div>
            <div class="column sum">小计</div>
            <div class="column action">操作</div>
        </div>
        <div class="cart-body"></div>
        <div class="cart-foot">
            <div class="left">
                <div class="select-all">
                    <input type="checkbox" class="checkAll"> 全选
                </div>
                <div class="operation">
                    <a href="javascript:;">删除选中的商品</a>
                    <a href="javascript:;">移入关注</a>
                    <a href="javascript:;">
                        <strong>清理购物车</strong>
                    </a>
                </div>
            </div>
            <div class="right">
                <div class="btn-area">
                    <a href="javascript:;">去结算</a>
                </div>
                <div class="price-sum">
                    <span>已选择</span><em class="totalAmount">0</em><span>件商品</span>
                    <span>总价：￥</span><em class="total"></em>
                </div>
            </div>
        </div>
    </div>
    <script>
        var data = [{
            "name": "你不知道的JavaScript 上卷+中卷+下卷(套装共3册 京东)(图灵出品)",
            "src": "./img/book1.jpg",
            "price": "181.30"
        }, {
            "name": "JavaScript高级程序设计 第4版(图灵出品)",
            "src": "./img/book2.jpg",
            "price": "106.70"
        }, {
            "name": "JavaScript 指南 原书第7版 犀牛书JS高级程序设计",
            "src": "./img/book3.jpg",
            "price": "119.90"
        }];
        var cartBody = document.querySelector(".cart-body");
        var totalQuantity = 0; //商品总数
        renderData();
        //渲染数据
        function renderData() {
            var str = "";
            for (var i = 0; i < data.length; i++) {
                str += "<div class='item'><div class='checkUnit column'><input type='checkbox' class='checkItem'/></div>" +
                    "<div class='shop column'><img src='" + data[i].src + "'/><div class='desc'>" + data[i].name + "</div></div>" +
                    "<div class='white column'></div>" +
                    "<div class='unitPrice column'>￥<span class='perPrice'>" + data[i].price + "</span></div>" +
                    "<div class='count column'><button class='leftbtn'>-</button><input type='text' class='amount' value='1'/><button class='rightbtn'>+</button></div>" +
                    "<div class='subtotal column'>￥<span class='smallPrice'>" + data[i].price + "</span></div>" +
                    "<div class='handle column'><a href='javascript:void(0);' class='delete'>删除</a><a href='javascript:;'>移入关注</a></div></div>";
            }
            cartBody.innerHTML = str;
        }
        var checkAlls = document.getElementsByClassName('checkAll'); //获取所有全选框
        var checkItems = document.getElementsByClassName('checkItem');
        var items = document.getElementsByClassName('item');
        var amounts = document.getElementsByClassName('amount');
        var totalAmount = document.querySelector('.totalAmount');
        var total = document.querySelector('.total');
        var totalPrice = 0;
        total.innerText = totalPrice.toFixed(2);
        //全选功能
        for (var i = 0; i < checkAlls.length; i++) {
            checkAlls[i].index = i;
            checkAlls[i].addEventListener('click', function() {
                totalQuantity = 0;
                changeStatus(this.checked);
                checkAlls[this.index == 0 ? 1 : 0].checked = this.checked;
                getTotal();
            })
        }

        function changeStatus(status) {
            for (var i = 0; i < checkItems.length; i++) {
                checkItems[i].checked = status;
                if (status) {
                    items[i].classList.add('bg');
                    totalQuantity += parseInt(amounts[i].value);
                } else {
                    items[i].classList.remove('bg');
                }
            }
            totalAmount.innerText = totalQuantity;
        }
        //减少商品数量功能
        var leftbtns = document.getElementsByClassName('leftbtn');
        for (var i = 0; i < leftbtns.length; i++) {
            leftbtns[i].index = i;
            leftbtns[i].addEventListener('click', function() {
                var amount = amounts[this.index].value;
                if (amount == 1) {
                    return;
                } else {
                    amount--;
                }
                amounts[this.index].value = amount;
                if (!checkItems[this.index].checked) {
                    checkItems[this.index].checked = true;
                    items[this.index].classList.add('bg');
                }
                getSubtotal(this.index);
                getGoodsNum();
                getTotal();
            })
        }
        //增加商品数量功能
        var rightbtns = document.getElementsByClassName('rightbtn');
        for (var i = 0; i < rightbtns.length; i++) {
            rightbtns[i].index = i;
            rightbtns[i].addEventListener('click', function() {
                var amount = amounts[this.index].value;
                amount++;
                amounts[this.index].value = amount;
                if (!checkItems[this.index].checked) {
                    checkItems[this.index].checked = true;
                    items[this.index].classList.add('bg');
                }
                getSubtotal(this.index);
                getGoodsNum();
                getTotal();
            })
        }
        //计算小计
        var perPrice = document.getElementsByClassName('perPrice');
        var smallPrice = document.getElementsByClassName('smallPrice');

        function getSubtotal(index) {
            var Price = parseInt(amounts[index].value) * perPrice[index].innerText;
            smallPrice[index].innerText = Price.toFixed(2);
        }
        //计算商品总数
        function getGoodsNum() {
            var flag = false;
            totalQuantity = 0;
            for (var i = 0; i < checkItems.length; i++) {
                if (checkItems[i].checked) {
                    totalQuantity += parseInt(amounts[i].value);
                    flag = true;
                }
            }
            if (!flag) {
                for (var i = 0; i < checkAlls.length; i++) {
                    checkAlls[i].checked = false;
                }
            }
            totalAmount.innerText = totalQuantity;
        }
        //选择或取消单个商品
        for (var i = 0; i < checkItems.length; i++) {
            checkItems[i].index = i;
            checkItems[i].addEventListener('click', function() {
                if (this.checked) {
                    items[this.index].classList.add('bg');
                } else {
                    items[this.index].classList.remove('bg');
                }
                getGoodsNum();
                getTotal();
            })
        }
        //计算总价
        function getTotal() {
            totalPrice = 0;
            for (var i = 0; i < checkItems.length; i++) {
                if (checkItems[i].checked) {
                    totalPrice += parseFloat(smallPrice[i].innerText);
                }
            }
            total.innerText = totalPrice.toFixed(2);
        }
        //删除单件商品(模拟)
        var deletebtns = document.getElementsByClassName('delete');
        for (var i = 0; i < deletebtns.length; i++) {
            deletebtns[i].index = i;
            deletebtns[i].addEventListener('click', function() {
                items[this.index].remove();
                //更新元素的索引
                for (var i = 0; i < items.length; i++) {
                    deletebtns[i].index = i;
                    leftbtns[i].index = i;
                    rightbtns[i].index = i;
                    checkItems[i].index = i;
                }
                getGoodsNum();
                getTotal();
            })
        }
    </script>
</body>

</html>