html 跑马灯

约定不等于承诺〃 2023-06-11 12:26 9阅读 0赞

废话不多说，直接代码copy进去运行就知道了

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    	</head>
    	<style type="text/css">
            .page_1366_768{
                width: 1366px;
                height: 768px;
    			margin: 0 auto;
                background-color: #009;
            }
    		body{
                margin: 0;
    			padding: 0;
                background-color: #900;
    			font-family:'Microsoft YaHei','SF Pro Display',Roboto,Noto,Arial,'PingFang SC',sans-serif;
    			font-size:24px;
    		}
    		.head{
    			background-color: #14b9d6;
    			color: #fff;
    		}
    		.h1{
    			display: inline-block;
    			font-size: 36px;
    			margin:0px;
    			padding:20px 35px;
    		}
    		.h_right{
    			float: right;
    			display: inline-block;
    		}
    		.h_right .date{
    			display: inline-block;
    			font-size: 20px;
    			font-weight: bold;
    			line-height: 25px;
    			padding:18px 0;
    			text-align: right;
    		}
    		.h_right .time{
    			font-size:42px;
    			font-weight: bold;
    			float: right;
    			padding:16px 35px;
    		}
    		
    		.content{
    			width:100%;
                background-color: #fff;
    		}
    		.content table{
    			width: 100%;
    			border-collapse: collapse;
    		}
    		.content table th{
    			color: #fff;
    			border-top: 1px solid #7be2f4;
    			background-color: #038fa7;
    		}
    		.content table td,
    		.content table th{
    			text-align: center;
    			line-height:72px;
    		}
    		.content table tr{
    			border-bottom: 1px solid #bfe4ea;
    		}
    		.content table tr:nth-of-type(odd){
    			background-color: #def8fc;
    		}
    		.c_f00{
    			color: #f00;
    		}
    		.c_00f{
    			color: #14b9d6;
    		}
    		ul,ul li{
    			list-style: none;
    			margin: 0;
    		}
    		.info{
    			font-size:24px;
    			overflow:hidden;
    			height:144px;
    		}
    		.info ul li{
    			line-height:2;
    			text-align: center;
    		}
    	</style>
    	<body>
            <div class="page_1366_768">
                <div class="head">
                    <h1 class="h1">南京卷烟厂月台排队信息</h1>
                    <div class="h_right">
                        <span class="date">2019/03/26<br />星期三</span>
                        <div class="time">18 : 48 : 36</div>
                    </div>
                </div>
                <div class="content">
                    <table>
                        <tr>
                            <th>序号</th>
                            <th>车牌号</th>
                            <th>驾驶号</th>
                            <th>联系电话</th>
                            <th>月台</th>
                            <th>作业</th>
                            <th>状态</th>
                            <th>入园时间</th>
                        </tr>
                        <tr>
                            <td>1</td>
                            <td>苏A16828</td>
                            <td>张南风</td>
                            <td>18649604646</td>
                            <td>C-1号</td>
                            <td>发货</td>
                            <td>准备作业</td>
                            <td>09:06</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>苏A56515</td>
                            <td>苏清枫</td>
                            <td>18646658899</td>
                            <td>C-2号</td>
                            <td>发货</td>
                            <td>开始作业</td>
                            <td>09:22</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>苏A52648</td>
                            <td>张志强</td>
                            <td>18655895858</td>
                            <td>C-3号</td>
                            <td>发货</td>
                            <td><span class="c_f00">等待作业</span></td>
                            <td>09:06</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>苏A16828</td>
                            <td>张华扬</td>
                            <td>18649604896</td>
                            <td>C-4号</td>
                            <td>发货</td>
                            <td>开始作业</td>
                            <td>08:34</td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>苏A56355</td>
                            <td>李天华</td>
                            <td>18955685594</td>
                            <td>XH-1号</td>
                            <td><span class="style_c c_00f">卸货</span></td>
                            <td>准备作业</td>
                            <td>08:44</td>
                        </tr>
                        <tr>
                            <td>6</td>
                            <td>苏A56795</td>
                            <td>李华阳</td>
                            <td>18955686364</td>
                            <td>XH-2号</td>
                            <td><span class="style_c c_00f">卸货</span></td>
                            <td>准备作业</td>
                            <td>08:59</td>
                        </tr>
                    </table>
                    <div class="info" id="info">
                        <ul id="list1" onMouseOut="Up()" onMouseOver="Stop()">
                            <li>请<span class="c_00f"> 苏AE6554 </span>到<span class="c_f00"> C-1号 </span>月台进行 发货 作业！</li>
                            <li>请<span class="c_00f"> 苏AE6889 </span>到<span class="c_f00"> XH-2号 </span>月台进行<span class="c_00f"> 卸货 </span>作业！</li>
                            <li>请<span class="c_00f"> 苏A55939 </span>到<span class="c_f00"> XH-2号 </span>月台进行<span class="c_00f"> 卸货 </span>作业！</li>
                        </ul>
                        <ul id="list2"></ul>
                    </div>
                </div>
                <script type="text/javascript">
                    var info=document.getElementById("info");
                    var list1=document.getElementById("list1");
                    var list2=document.getElementById("list2");
                    var speed=50;
                    list2.innerHTML=list1.innerHTML;
                    function  ScrollUp(){
                        if( info.scrollTop>=list1.scrollHeight){
                            info.scrollTop=0;
                        }else
                           info.scrollTop++;
                    }
                    var i=setInterval(ScrollUp,speed);
                    function Stop(){
                        clearInterval(i);
                    }
                    function Up(){
                        i=setInterval("ScrollUp()",speed);
                    }
    
                </script>
            </div>	
        </body>
    </html>