js 实现弹幕效果

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            font-size: 62.5%;
        }

        .boxDom {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        .idDom {
            width: 100%;
            height: 100px;
            background: #666;
            position: fixed;
            bottom: 0px;
        }

        .content {
            display: inline-block;
            width: 430px;
            height: 40px;
            position: absolute;
            left: 0px;
            right: 0px;
            top: 0px;
            bottom: 0px;
            margin: auto;
        }

        .title {
            display: inline;
            font-size: 4em;
            vertical-align: bottom;
            color: #fff;
        }

        .text {
            border: none;
            width: 300px;
            height: 30px;
            border-radius: 5px;
            font-size: 2.4em;
        }

        .btn {
            width: 60px;
            height: 30px;
            background: #f90000;
            border: none;
            color: #fff;
            font-size: 2.4em;
        }

        span {
            width: 300px;
            height: 40px;
            position: absolute;
            overflow: hidden;
            color: #000;
            font-size: 4em;
            line-height: 1.5em;
            cursor: pointer;
            white-space: nowrap;
        }
    </style>

    <script>
        var colors = ["#369","#16481f","orange","red","skyblue","gray","#aaa","lightgreen","green","darkblue","#06257b","darkred","#e0a111","black", "#e2128f", "#860dad", "#94ad0d", "#ce3131"]; //用来设置的颜色
        function $(id){
            return document.getElementById(id);
        }
        window.onload = function (){
            $('btn').onclick = function (){
                var timer;//timer不能设置成全局变量,如果设置成全局变量,他的值将始终不会清空
                var input = $('text');
                var span = document.createElement('span'); //创建一个span标签
                span.innerHTML = input.value; //行级元素用value来获取值,块级元素用innerhtml来获取其值
                $('boxDom').appendChild(span);//将span放入页面div中
                span.style.color = colors[parseInt(Math.random()*colors.length)]; //随机产生颜色,用Math.random获得的值是小数所以要取整并且取值大于等于0小于1,有18种颜色
                span.style.top = (Math.random()*400) + 'px'; //随机产生一个值为[0,400);
                var wWidth = document.body.clientWidth;
                span.style.left = document.body.clientWidth+ 'px';//初始值为页面可见区域的值,此时不能再页面中显示
                var num = wWidth;
                timer = setInterval(function (){
                    num--;                   //让内容移动
                    if(num < -400){
                        $('boxDom').removeChild(span); //清除元素
                        clearInterval(timer);
                    }
                    span.style.left = num + 'px';
                },10)
            }
        }
    </script>
</head>
<body>
<div class="boxDom" id="boxDom">
    <div class="idDom" id="idDom">
        <div class="content">
            <p class="title">吐槽:</p>
            <input type="text" class="text" id="text"/>
            <button type="button" class="btn" id="btn">发表</button>
        </div>
    </div>
</div>
</body>

</html>

在这里插入图片描述

  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值