Javascript Exam Review

News 2023-06-25 10:29:38 views: null

log in page

<!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>

carousel image 1

image

<!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>

carousel image 2

Introduction : CSS realizes the carousel image effect, and you cannot click to switch images

<!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>

shopping cart

<!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>

Guess you like

Origin blog.csdn.net/MrFlySand/article/details/131180470
Recommended
Ranking
#2019110700005
What materials and procedures are required for patent transfer
What is the blockchain Ethereum triplet state root transaction root receipt root
Front-end study notes 04 --- About the insertion of html pictures and videos
Documents required for the filing of WeChat Mini Programs in special industries, the filing process of WeChat Mini Programs in special industries, how to file WeChat Mini Programs in special industries
2017 Qingdao-site tournament I The Squared Mosquito Coil
[BZOJ3165][HEOI2013]Segment (line segment tree without marking)
Kettle series: KettleEasyExpand, an open source Kettle universal plugin by Ma Jinju
The latest tutorial on making framework for iOS
DAX Section 6: Statistical Functions
Daily
More
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)
2024-05-09(32)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)

Code World

© 2018 codetd.com