[知了堂学习笔记]_JavaScript之DOM事件（许愿墙）

最新推荐文章于 2020-04-29 09:29:11 发布

「已注销」

最新推荐文章于 2020-04-29 09:29:11 发布

阅读量314

点赞数

分类专栏：基础学习文章标签： javascript dom

本文链接：https://blog.csdn.net/J_YTL/article/details/78754491

版权

基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }
        html{
            width: 100%;
            height: 100%;
        }
        body{
            width: 100%;
            height: 100%;
            background: -webkit-linear-gradient(top,rgb(203,235,219),rgb(55,148,192));
        }
        #container{
            width: 100%;
            height: 80vh;
            position: relative;
            outline: 1px solid black;
            z-index: 0;
        }
        #input{
            width: 400px;
            height: 40px;
            display: block;
            margin: 30px auto;
            font-size: 18px;
            padding: 0 10px;
        }
        .items{
            width: 200px;
            position: absolute;
            padding: 30px 10px 10px;
            -webkit-border-bottom-left-radius: 20px 500px;
            -webkit-border-bottom-right-radius: 500px 30px;
            -webkit-border-top-right-radius: 5px 100px;
            box-shadow: 0 2px 10px 1px rgba(0,0,0,0.2);
        }
        .items p{
            width:100%;
            min-height: 80px;
            word-break: break-all;
        }
        .items span{
            float: right;
            margin: 10px 10px 0 0;
            color: white;
            font-size: 14px;
        }
        .items span:hover{
            cursor: pointer;
        }


    </style>

</head>
<body>

    <div id="container"></div>
    <input id="input" type="text" placeholder="编辑你的愿望，按回车键发送。">

    <script>

        window.onload = function(){
            var input = document.getElementById("input");
            var container = document.getElementById("container");

            input.onkeydown = function(e){
                if(e.keyCode == "13"){
                    var v = input.value;
                    if(v){
                        createItems(v);
                        input.value="";
                        input.setAttribute("placeholder","编辑你的愿望，按回车键发送。");
                    }
                }
            }

        }

        function createItems(text){

            var color = getRandomColor();
            var positionX = getRandomPosition("x");
            var positionY = getRandomPosition("y");
            var newDiv = '<div class="items" style = "background-color: '+color+';top:'+positionY+'px;left:'+positionX+'px";><p>'+text+'</p><span class="closeTabs">关闭</span></div>';
            container.innerHTML += newDiv;
        }

        function getRandomColor(){
            var c = "0123456789abcdef";
            var color = "";
            while(color.length<6){
                color += c[Math.floor(Math.random()*16)];
            }
            return "#"+color;
        }

        function getRandomPosition(p){
            var position;
            switch (p){
                case 'x':
                    position = Math.ceil(Math.random()*1700);
                    if(position>0 && position<container.clientWidth-220){
                        return position;
                    }else{
                       return getRandomPosition(p);
                    }
                    break;
                case 'y':
                    position = Math.ceil(Math.random()*600);
                    if(position>0 && position<container.clientWidth-260){
                        return position;
                    }else{
                        return getRandomPosition(p);
                    }
                    break;
                default :
                    break;
            }
        }

    </script>

</body>
</html>