《用JavaScript实现转盘抽奖程序》二

    接着上篇文章，我将HTML代码和CSS代码也总结一下。

    HTML代码

<div style="background-color:#efefef;width:100%;padding:0px 0;position:relative;" id="wrap">
        <div id="alert-div">
            <div style="width:50%;height:60%;margin:10% auto;">
                <img src="">
            </div>
        </div>
        <div id="lottery" style="position:relative;">
            <span class="btn" style="">
                <a href="javascript:void(0);" style="color:white;text-decoration:none;display:block;">开始</a>
            </span>
            <table cellspacing="0">
                <tr>
                    <td class=""></td>
                    <td class="lottery-unit lottery-unit-0" imgSrc="@Url.Content("~/images/img/1d.png")"><img src="@Url.Content("~/images/img/1.png")"></td>
                    <td class="lottery-unit lottery-unit-1" imgSrc="@Url.Content("~/images/img/15d.png")"><img src="@Url.Content("~/images/img/15.png")"></td>
                    <td class="lottery-unit lottery-unit-2" imgSrc="@Url.Content("~/images/img/4d.png")"><img src="@Url.Content("~/images/img/4.png")"></td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-3" imgSrc="@Url.Content("~/images/img/9d.png")"><img src="@Url.Content("~/images/img/9.png")"></td>
                    <td class="lottery-unit lottery-unit-4" imgSrc="@Url.Content("~/images/img/10d.png")"><img src="@Url.Content("~/images/img/10.png")"></td>
                    <td class="lottery-unit lottery-unit-5" imgSrc="@Url.Content("~/images/img/11d.png")"><img src="@Url.Content("~/images/img/11.png")"></td>
                </tr>
                <tr>
                    <td class="lottery-unit lottery-unit-6" imgSrc="@Url.Content("~/images/img/17d.png")"><img src="@Url.Content("~/images/img/17.png")"></td>
                    <td class="lottery-unit lottery-unit-7" imgSrc="@Url.Content("~/images/img/18d.png")"><img src="@Url.Content("~/images/img/18.png")"></td>
                    <td class="lottery-unit lottery-unit-8" imgSrc="@Url.Content("~/images/img/21d.png")"><img src="@Url.Content("~/images/img/21.png")"></td>
                </tr>
            </table>
        </div>
    </div>

     CSS代码   

<style type=text/css>
        *{padding:0;margin:0;}
        #lottery {
          margin: 0px auto;
            width: 100%;
            background: url(@Url.Content("~/images/img/11aa.jpg")) no-repeat;
            background-size:100% 100%;
            height: 600px;
        }
        #lottery table{
            width: 100%;
            height:100%;
            overflow:hidden;
            cellspacing:0;
        }
        #lottery table tr{
            border:0;
            width: 100%;
            height: 200px;
            overflow:hidden;
		}
		#lottery table td {
            width: 12.5%;
            text-align:center;
            height: 200px;

		}
        #lottery table td img{
			width: 98%;
            height: 180px;
            display:block;
            margin:10px auto;

		}
		#lottery table td.active {
			background: yellow;
		}

        .btn{
            display:block;
            position:absolute;top:600px;width:100px;height:40px;line-height:40px;font-size:20px;background:red;text-align:center;right:10%;margin-left:-50px;margin-top:10px;
        }
        #alert-div{
            position:absolute;top:0px;left:0;width:100%;height:100%;opacity:0.8;background:#000;z-index:1000;
            display:none;-we
        }
        #alert-div img{
            dispaly:block;
            width:100%;
            height:100%;
        }
    </style>

    用css控制效果，用js控制逻辑，这个程序几乎不用后台，很完美。