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

来源：互联网发布：怎么引入js文件编辑：程序博客网时间：2024/04/27 14:30
这里写图片描述
<!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>
视频展示
阅读全文
0 0