有用的前端demo

js定时器循环切换字体和背景颜色
<script type="text/javascript">
        var flashId = 0;
        setInterval(function(){
        if(flashId++ == 1) {
        flashId = 0;
        $('#title').css({color: 'white'});
        $('#add').removeClass('add-red').addClass('add-green');
        }else{
        $('#title').css({color: 'red'});
        $('#add').removeClass('add-green').addClass('add-red');
        }
        }, 500);
</script>

<ul class="header">
    <li class="left white" id="title"><h1>2016微信最火账号曝光</h1></li>
    <li class="right"><span id="add" class="add-green" style="width:80px;margin-right:-45px;" >+免费加入</span></li>
</ul>

 

固定在页面底部的button

<div class="msg" style="margin-top:10px;">
	<div class="weui_msg">
        <div class="btn-wrap">
            <div class="btn-return">查看排行</div>
        </div>
	</div>
</div>
<style>
.btn-wrap {
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-color: rgba(0,0,0,.7);
    max-width: 640px;
}
.btn-return {
    height: 30px;
    line-height: 30px;
    width: 100px;
    background: #fff;
    color: #528C10;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 10px;
}

css 如何控制ul li 每行显示几个并换行

<style>
ul{overflow:hidden;width:100%;}
ul li{width:33.333%;float:left;}
</style>
<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
  <li>555</li>
  <li>666</li>
</ul>