【效果设计】模拟公交车站站台显示
<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">127div>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 = ""
;var num = Math.floor(Math.random()*10);for(var i = 0; i < siteNameArr.length; i++) {if(i===num){str = str + "" + ""+ siteNameArr[i] + ""}else{str = str + "" +"" + siteNameArr[i] + "视频展示
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！