人人前端面试试题三

最新推荐文章于 2024-04-22 03:45:28 发布

ifHappyEveryDay@

最新推荐文章于 2024-04-22 03:45:28 发布

阅读量280

点赞数

本文链接：https://blog.csdn.net/luoawai/article/details/99594576

版权

在这里插入图片描述

参考代码(借鉴并改进)

<!DOCTYPE html>
<html>

<head>
    <meta charset="{CHARSET}">
    <title>人人题目</title>
    <style>
        html,
        p {
            margin: 0;
            padding: 0;
            line-height: 30px;
        }

        #tishi {
            position: absolute;
            left: 50%;
            top:50%;
            transform: translate(-50%, -50%);
            min-height: 150px;
            border: 1px solid black;
            padding: 10px 12px;
            display: none;
            background: #fff;

        }

        #title {
            min-width: 200px;
        }

        #close {
            position: absolute;
            right: 15px;
            top: 10px;
            cursor: pointer;
        }

        #content {
            margin-top: 10px;
            min-height: 70px;
            padding: 0 10px;
        }

        a {
            width: 60px;
            line-height: 30px;
            float: right;
            text-align: center;
            cursor: pointer;
            border: 1px solid skyblue;
            margin-right: 5px;
            border-radius: 5px;
        }

        a:hover {
            background: rgba(0, 0, 0, 0.4);
            color: #fff;
        }

        #answer {
            display: none;
            margin-top: 30px;
            margin-bottom: 30px;
        }

        #tishi:active {
            cursor: move;
        }
        #sel{
            position: absolute;
            left: 50%;
            top:10%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <select id='sel'>
        <option>请选择</option>
        <option>alert</option>
        <option>confirm</option>
        <option>prompt</option>
    </select>
    <div id='tishi'>
        <p id='title'>网页来自于</p>
        <p id='close'>X</p>
        <p id='content'>ss</p>
        <input type='text' id='answer' />
        <a id='cancel'>取消</a>
        <a id='sure'>确定</a>
    </div>
    <script>
        var oSel = document.getElementById('sel');
        var oTishi = document.getElementById('tishi');
        var title = document.getElementById('title');
        var oContent = document.getElementById('content');
        var sure = document.getElementById('sure');
        var cancel = document.getElementById('cancel');
        var answer = document.getElementById('answer');
        var type = '';
       var close=document.getElementById("close");
       close.onclick=function(){
        hide(oTishi);

       }

        function hide(obj) {
            obj.style.display = 'none';
        }
      
        function toggle(type) {
            oContent.style.display = (type == 'prompt') ? 'none' : 'block';
            answer.style.display = (type == 'prompt') ? 'block' : 'none';
            cancel.style.display = (type == 'alert') ? 'none' : 'block';
        }
        function show(type) {
           
            if (type == 'alert') {
                cancel.style.display = 'none';
                title.innerHTML = '这是alert信息:';
                oContent.innerHTML = '你已经完成了所有练习！';


            } else if (type == 'confirm') {
                title.innerHTML = '这是confirm信息:';
                oContent.innerHTML = '你确定完成提交试卷了吗？';
            } else {
                title.innerHTML = '请输入您的答案！';

            }
            sure.onclick = function () {
                hide(oTishi);
            }
            cancel.onclick = function () {
                hide(oTishi);
            }
            toggle(type);
            oTishi.style.display = 'block';
         
        }

        oSel.onchange = function () {
            var selType = oSel.options[oSel.selectedIndex].innerText;
            show(selType);

        }

        oTishi.onmousedown = function (target) {
            var oevent = target || event;

            var distanceX = oevent.clientX - this.offsetLeft;
            var distanceY = oevent.clientY - this.offsetTop;


            document.onmousemove = function (target) {
                var oevent = target || event;   //处理兼容
                oTishi.style.left = oevent.clientX - distanceX + 'px';
                oTishi.style.top = oevent.clientY - distanceY + 'px';



            }
        }
        oTishi.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
    </script>
</body>

</html>