输入密码访问页面

最新推荐文章于 2024-06-18 15:31:56 发布

花火が瞬く夜に-

最新推荐文章于 2024-06-18 15:31:56 发布

阅读量536

点赞数 7

分类专栏：前端交互效果实现文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_47560580/article/details/134968813

版权

前端交互效果实现专栏收录该内容

4 篇文章 0 订阅

订阅专栏

该文章用于记录输入密码访问页面的实现，效果图如下：

在这里插入图片描述
这里用的是layui的弹出层组件 layer 中的 prompt 事件，layui可以去官网下载，然后放到自己的项目里面。

下面是代码：

demo.html ( 当前页面 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入密码访问页面</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="layui/layui.js"></script>
    <style>
        h2{
            width: 300px;
            height: 200px;
            background-color: lightblue;
            text-align: center;
            line-height: 200px;
            margin: 0 auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="curpage">
        <h2 lay-on="prompt">我是当前页面</h2>
    </div>
</body>
<script>
     layui.use(function () {
            var layer = layui.layer;
            var util = layui.util;
            // 批量事件
            util.on('lay-on', {
                prompt: function () {
                    layer.prompt({ title: '请输入查看密码', formType: 1 }, function (pass, index) {
                        layer.close(index, function () {
                            console.log(pass, '======');
                            if (pass != '2023') {
                                alert('密码不正确！')
                            } else {
                                location.href = './index.html'
                            }
                        });
                    });
                },

            });
        });

</script>
</html>

index.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>
        h2{
            width: 300px;
            height: 200px;
            background-color: lightblue;
            text-align: center;
            line-height: 200px;
            margin: 0 auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="cswitchpage">
        <h2>我是跳转后的页面</h2>
    </div>
</body>
</html>