找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发js 原生 模仿微博发布

2018-11-27 23:01:55 分类：JavaScript 阅读(129) 评论(0)
前端移动app的开发工具
前端 linux下开发工具
最新前端集成开发工具

html 代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
    </head>
    <style type=”text/css”>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-family: ‘微软雅黑’;
            outline: none;
        }
        #box {
            width: 1000px;
            height: 650px;
            border: 4px solid #cccccc;
            margin: 0 auto;
        }
        #p1 {
            font-size: 24px;
            margin-left: 40px;
            margin-top: 30px;
        }
        #a1 {
            width: 500px;
            height: 50px;
            margin-left: 40px;
            margin-top: 30px;
        }
        #fabu {
            width: 500px;
            height: 300px;
            left: 31%;
            top: 180px;
            border: 4px solid #cccccc;
            position: fixed;
            z-index: 100;
            opacity: 1;
            background: white;
        }
        #wenben {
            width: 400px;
            height: 140px;
            font-size: 18px;
            margin-left: 50px;
            margin-top: 20px;
            resize: none;
        }
        #tijiao {
            width: 400px;
            height: 50px;
            margin-left: 50px;
            font-size: 26px;
            background: orange;
            border: 1px solid orange;
            border-radius: 10px;
            color: white;
        }
        #xianshi {
            width: 920px;
            height: 400px;
            margin: 0 auto;
            border: 1px solid blue;
            margin-top: 20px;
        }
    </style>
    <body>
        <div id=”box”>
            <p id=”p1″>来说说吧 你想做什么</p>
            <input type=”button” id=”a1″ value=”我要写点什么” />
            <div id=”xianshi”></div>
        </div>
        <div
            id=”ww”
            style=”position: absolute;top: 0px; width: 100%;height: 680px;background: #CCCCCC;opacity: 0.8;display: none;”
        >
            <div id=”fabu”>
                <span id=”guanbi” style=”margin-left:480px;font-size: 20px;”
                    >×</span
                >
                <p style=”margin-left: 50px;”>快把你遇到的趣事和大家分享下吧</p>
                <textarea id=”wenben” rows=”” cols=””></textarea>
                <p style=”margin-left: 300px;”>字数不得超过150字</p>
                <input type=”button” id=”tijiao” value=”发布” />
            </div>
        </div>
        <script type=”text/javascript”>
            var a1 = document.getElementById(‘a1’)
            var fabu = document.getElementById(‘fabu’)
            var guanbi = document.getElementById(‘guanbi’)
            var box = document.getElementById(‘box’)
            var tijiao = document.getElementById(‘tijiao’)
            var wenben = document.getElementsByTagName(‘textarea’)[0]
            var xianshi = document.getElementById(‘xianshi’)
            var ww = document.getElementById(‘ww’)
            a1.onclick = function() {
                ww.style.display = ‘block’
                wenben.value = ”
            }
            guanbi.onclick = function() {
                ww.style.display = ‘none’
            }
            var arr = [
                ‘用户:lanttoy’,
                ‘用户:阿迪斯’,
                ‘用户:APPLE’,
                ‘用户:王云’,
                ‘用户:李征’,
                ‘用户:万宗昊’,
                ‘用户:榴莲’,
                ‘用户:梁冬妮’,
                ‘用户:李氏川’,
                ‘用户:赵淳’,
                ‘用户:彬彬’,
                ‘用户:二蛋’,
                ‘用户:淘气’,
            ]
            // arr[Math.random()]
            var rad
            tijiao.onclick = function() {
                rad = Math.round(Math.random() * arr.length – 1)
                if (wenben.value.length > 150) {
                    alert(‘请输入150字内’)
                    p.innerHTML = ”
                }
                ww.style.display = ‘none’
                var p = document.createElement(‘p’)
                xianshi.appendChild(p)
                for (var i = 0; i < arr.length; i++) {
                    p.innerHTML = arr[rad] + ‘&nbsp;’ + ‘<br/>’ + wenben.value
                }
                wenben.value = ”
            }
        </script>
    </body>
</html>
linux 前端开发工具
web前端开发工具 bp
前端h5的开发工具
» 本文来自：前端开发者 » 《前端开发js 原生 模仿微博发布》
» 本文链接地址：https://www.rokub.com/6820.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论