前端开发和谐字和点名器

前端和开发的区别吗
前端开发和界面开发的区别吗
web开发和前端开发的区别

网上经常能看到被和谐的文字,这是怎么弄出来的?
请看效果:

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>hexiezi</title>
        <style>
            #c1 {
                font-size: 25px;
                color: #c81632;
            }
        </style>
    </head>
    <body>
        <textarea name=”” id=”c1″ cols=”60″ rows=”10″>
我的救赎我的,不是我的也是我单纯的是不是,都是不要紧的对的错的大大的又有什么关系呢;时不时晓得小的的是不是的我的救赎我的,不是我的也是我单纯的是不是,都是不要紧的对的错的又有什么关系呢;时不时的是不是小的的我的救赎我的,不是我的也是我单纯的是不是,都是不要紧的大小是大小对的错的又有什么关系呢;时不时的是不是的我的救赎我的,不是我的也是我单纯的是不是,都是不要紧的对的错的又有什么关系呢;时不时的是不是的大的大的
</textarea
        >
        <input type=”button” value=”发布” id=”c2″ />
        <script>
            var c1 = document.getElementById(‘c1’)
            var c2 = document.getElementById(‘c2’)
            var reg = /大的|小的|大大的|大小/gi
            c2.onclick = function() {
                c1.innerHTML = c1.innerHTML.replace(reg, function(x) {
                    var a = ”
                    for (var i = 0; i < x.length; i++) {
                        a += ‘*’
                    }
                    return a
                })
            }
        </script>
    </body>
</html>

再来个,点名器。

看效果:

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>dianmin</title>
        <meta name=”keyworlds” content=”” />
        <meta name=”description” content=”” />
        <style>
            #c1 {
                width: 100%;
                height: 500px;
                background: #000;
                position: relative;
            }
            #c2 {
                color: green;
                left: 50%;
                top: 50px;
                position: absolute;
                cursor: pointer;
                font-size: 38px;
            }
            #c3 {
                color: red;
                position: fixed;
                left: 50%;
                top: 40%;
                font-size: 52px;
            }
        </style>
    </head>
    <body>
        <div id=”c1″>
            <div id=”c2″>开始</div>
            <div id=”c3″></div>
        </div>
        <script>
            var c2 = document.getElementById(‘c2’)
            var c3 = document.getElementById(‘c3’)
            var x = 0
            var time1 = null
            var arr = [‘我’, ‘是’, ‘谁’, ‘呀’, ‘啊’, ‘不’, ‘知’, ‘道’]
            c2.onclick = function() {
                if (x == 0) {
                    time1 = setInterval(function() {
                        c3.innerHTML =
                            arr[Math.floor(Math.random() * arr.length)]
                    }, 10)
                    c2.innerHTML = ‘停止’
                    x = 1
                } else if (x == 1) {
                    clearInterval(time1)
                    c2.innerHTML = ‘停止’
                    x = 0
                }
            }
        </script>
    </body>
</html>
后台开发和前端开发的区别
web开发与前端的区别
前端融资和开发贷的区别
» 本文来自:前端开发者 » 《前端开发和谐字和点名器》
» 本文链接地址:https://www.rokub.com/7023.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!