九宫格

最新推荐文章于 2022-06-14 09:03:26 发布

qq_38200231

最新推荐文章于 2022-06-14 09:03:26 发布

阅读量155

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_38200231/article/details/81559470

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="jquery-2.1.3.min.js"></script>
<style>
    *{
        margin: 0 auto;
        padding: 0;
    }
    .main{
        width: 300px;
        height: 300px;
        margin-top: 30px;
        position: relative;
        z-index: 10000;
    }
    .uL {
        margin-top: 3px;
        width: 300px;
        height: 219px;
        display: none;
        border:1px solid #0A0A0A ;
        border-radius: 3px;
    }
    .uL ul:first-child{
        margin-top: 2px;
    }
    .uL li{
        display: inline;
    }
    .uL li span{
        width: 24%;
        float: left;
        margin-right: 0.5%;
        margin-left: 0.5%;
        background: #0a628f;
        text-align: center;
        margin-bottom: 5px;
        line-height: 50px;
    }
    .uL li .close{
        width: 49%;
    }
    #num{
        width: 70%;
        height: 30px;
        margin-top: 5px;
        border-radius: 3px;
        line-height: 30px;
        border: 1px solid #455ede;"
    }
</style>
<body>
<div class="main">
    <div style="text-align: center;">
        <input type="text"   id="num">
    </div>
    <div style="width:100%;" class="uL">
        <ul>
            <li>
                <span class="sp">7</span>
                <span class="sp">8</span>
                <span class="sp">9</span>
                <span class="clear">清除</span>
            </li>
            <li>
                <span class="sp">4</span>
                <span class="sp">5</span>
                <span class="sp">6</span>
                <span class="sp">-</span>
            </li>
            <li>
                <span class="sp">1</span>
                <span class="sp">2</span>
                <span class="sp">3</span>
                <span class="back">退格</span>
            </li>
            <li>
                <span class="sp">0</span>
                <span class="sp">.</span>
                <span class="close" mcode="0">关闭</span>
            </li>
        </ul>
    </div>
</div>
<script>
    $(document).on("click","#num",function () {
        var docHeight = $(document).height(); //获取窗口高度
        $('body').append('<div id="overlay"></div>');
        $('#overlay')
            .height(docHeight)
            .css({
                'opacity': 0.9, //透明度
                'position': 'absolute',
                'top': 0,
                "display":"block",
                'left': 0,
                'background-color': '#312e2e',
                'width': '100%',
                'z-index': 5000 //保证这个悬浮层位于其它内容之上
            });
        $(".uL")[0].setAttribute("style","display:block;");
    })
    $(".sp").click(function () {
        var num = $("#num").val();
        $("#num").val(num+$(this).text()).focus();
    });
    $(".clear").click(function () {
        var num = $("#num").val();
        $("#num").val("").focus();
    });
    $(".back").click(function () {
        var num = $("#num").val();
        $("#num").val(num.substring(0,num.length-1)).focus();
    });
    $(".close").click(function () {
        $(".uL")[0].setAttribute("style","display:none");
        $("#overlay")[0].setAttribute("style","display:none");
    });
</script>
</body>
</html>