【效果设计】模拟公交车站站台显示

这里写图片描述
<!DOCTYPE >
<html>
    <head>
        <script type="text/javascript" src="jquery-1.8.0.js"></script>
        <style>
            ul {
                width: 508px;
                margin: 0px;
                padding: 15px;
                height: 192px;
                /*定义flex伸缩盒*/
                display: -webkit-flex;
                /*设置伸缩盒的子元素向两端对齐*/
                justify-content: space-between;
            }

            ul li {
                font-size: 20px;
                /*固定宽度使文字强制换行竖直排列*/
                width: 20px;
                text-align: center;
                display: -webkit-flex;
                /*设置伸缩盒的子元素向两端对齐*/
                justify-content: space-between;
                /*设置子元素的排列方向是竖直方向*/
                flex-direction: column;
            }
        </style>
    </head>

    <body>
        <div style="width: 718px;height: 252px;background-color: #CCCCCC;border: 1px solid red;">
            <div style="float: left;width: 170px;height:252px;background-color: #ffffff;">
                <div style="width: 170px;height: 170px;text-align: center;line-height: 180px;">
                    <div style="font: '微软雅黑' ; color: black;font-size:90px">127</div>
                </div>
                <div style="width: 170px;height: 82px;text-align: center;line-height: 20px;">
                    下一站：</br>
                    春江新城
                </div>
            </div>
            <div style="float: right;width: 548px;height:252px;">
                <div style="height: 60px;width: 548px;background-color: #ffffff;text-align: center;line-height: 60px;">
                    开往春江新城
                </div>
                <div id="siteArea" style="height: 192px;width: 548px;background-color: #CCCCCC;">
                </div>
            </div>
        </div>
        <script>
            var siteNameArr = new Array("春江新城", "江泉路", "春江路西站", "春江路东站", "铁心桥", 
                "宁双路", "天隆寺地铁站", "石子岗", "菊花台公园", "安德门地铁站", "安德门");

            $().ready(function() {
                updateSite();
            })

            function updateSite(){
                $("#siteArea").html("");
                var str = "<ul>";
                var num = Math.floor(Math.random()*10);
                for(var i = 0; i < siteNameArr.length; i++) {
                    if(i===num){
                        str = str + "<li style='height: 182px;'><div style='border-radius:50%;width:100%;height:20px;background-color: red;'>"
                                + "</div><div style='width:100%;height:160px;'>"+ siteNameArr[i] + "</div></li>"
                    }else{
                        str = str + "<li style='height: 182px;'><div style='border-radius:50%;width:100%;height:20px;background-color: #ffffff;'>"
                                    +"</div><div style='width:100%;height:160px;'>" + siteNameArr[i] + "</div   ></li>"
                    }
                }
                str = str + "</ul>"
                $("#siteArea").append(str);
            }

            setInterval("updateSite()",1000);
        </script>
    </body>
</html>
视频展示
【效果设计】模拟公交车站站台显示

猜你喜欢
