Web页面随机选取效果

来源：互联网发布：网络入侵停电事件编辑：程序博客网时间：2024/04/29 00:09
1.注意引入jquery
2.贴代码
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Random</title><style type="text/css">.left-content{float:left;width:45%;margin-left:2%;margin-top:10px;height:390px;overflow-y:auto;border:1px solid #bbb;}.left-content ul li{margin:5px;padding:5px 5px;color:black;border-radius:4px;height:18px;line-height: 18px;cursor:pointer;display: inline;float:left;font-size:16px;width:40%;}.left-content ul li span{height:20px;}.right-content{position:relative;float:right;width:45%;margin-right:2%;margin-top:10px;height:390px;border:1px solid #bbb;overflow-y:auto;}.right-content .select-result li{margin:5px;padding:5px;background-color:#a57c2b;color:white;border-radius:4px;display: inline;float:left;font-size:16px;width:40%;}.right-content .select-result li span{position: absolute;right:5px;cursor:pointer;padding:0px 5px;}.group-title{padding:5px;font-size:14px;color:#FB783E;border-bottom:2px solid #FB783E;}.clear{ clear:both} .check{color:#fff;background-color: #4a8dfc ;} </style></head><body ><!-- 左边列表 -->       <div class="left-content" style="display: block"><div ><div class="group-title">待抽选列表</div><ul><li id="1"><span>小米</span></li><li id="2"><span>华为</span></li><li id="3"><span>vivo</span></li><li id="4"><span>oppo</span></li><li id="5"><span>苹果</span></li><li id="6"><span>魅族</span></li><li id="7"><span>一加</span></li><li id="8"><span>乐视</span></li><li id="9"><span>酷派</span></li><li id="10"><span>金立</span></li></ul></div></div><div class="right-content"><div ><div class="group-title">已选中列表</div><ul class="select-result"></ul></div></div><div class="clear"></div><script type="text/javascript" src="jquery-1.9.1.min.js"></script><script type="text/javascript">var time = null;//定时器var selIds = [];  //已选中的ID集合$(function(){var index = 0;var lis = $(".left-content ul li");time = setInterval(function(){index++;var random =  Math.ceil(Math.random()*(lis.length+1)) ;lis.removeClass("check");var li = $(lis).eq(random-1);$(li).addClass("check");if(li.attr('id') != null){if(index % 10==0){if(selIds.length==0){selIds.push(li.attr("id"));appendToRight(li.find("span").text());} else {for(var i=0; i<selIds.length; i++){if($.inArray(li.attr('id'),selIds)==-1){selIds.push(li.attr("id"));appendToRight(li.find("span").text());}}}}}//选中5个就停止if(selIds.length == 5){clearInterval(time);$(".left-content ul li").removeClass("check");}},100);})//选中的项目添加到右侧列表function appendToRight(name){var html = "<li>"+name+"</li>";$(".right-content .select-result").append(html);}</script></body></html>
3.效果
阅读全文
0 0