难度排行！（附撩妹神器）

最新推荐文章于 2022-01-03 22:55:56 发布

原创最新推荐文章于 2022-01-03 22:55:56 发布 · 606 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#难度排行

瞎写着玩专栏收录该内容

1 篇文章

订阅专栏

前端起起落落落落落落落落落落落落落落落落

上回说到学习状态，这回就来说说学习中遇到的难点哇！
难度排行：
1.轮播图
当属第一的莫过于轮播图啦！在还没学他之前，我就听说这厮是个让所有进阶程序员掉头发的利器，我本着明知山有虎，偏向虎山行。喝最烈的酒，日最野的狗的原则，向轮播图发起了猛烈的进攻，不过不错所料，我败啦！当我就打算放弃他的时候，突然，灵感就像一道闪电，从脑海中划过，机灵的我顺手拍照，正好保留下了这一宝贵历史时刻。一点一点的思路来了，不熟的指示点也慢慢浮出水面。最后也勉强算是功课了这个难关吧。
难度：******。
2.幸运大轮盘抽奖
如果轮播图是大哥的话哪幸运大轮盘就是二哥了，可以说是在老师下达了这个作业后，我就感觉毫无思路，自信心离我而去了，脑袋就想浆糊，无所适从，不知道该从哪里入手，甚至连布局都不知道该从哪路入手。就在我迷茫之际，老师开始讲思路了，他就好想漫漫黑夜中的一盏明灯
照亮了我回家的路。顺手附上我的撩妹大转盘代码

//css部分
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>抽奖</title>
	<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	#big{
		width: 480px;
		height: 480px;
		margin: 0 auto;
		margin-top: 100px;
	}
	.d1,.d2{
		float: left;
		width: 150px;
		height: 150px;
		background: skyblue;
		line-height: 150px;
		text-align: center;
		color: white;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	#start,#stop{
		width: 60px;
	    height: 25px;
	    background: hotpink;
	    color: white;
	    border: none;
	}
	.girl{
		width: 95%;
		height: 330px;
		margin: 0 auto;
		display: none;
		position: fixed;
		top: 80px;
		left: 80px;
	}
	.pp{
		font-size: 240px;
	}
	</style>
</head>
<body>
<div id="big">
     <div class="d1">谢谢惠顾</div>
     <div class="d1">100元</div>
     <div class="d1">迪奥口红一支</div>
     <div class="d1">1000现金</div>
     <div class="d2">
          <button id="start" href="javascript:;">开始</button>
          <button id="stop" "stop()">停止</button>
     </div>
     <div class="d1">99朵玫瑰花</div>
     <div class="d1">衣服一件1k以下</div>
     <div class="d1">谢谢惠顾</div>
     <div class="d1">华为p30pro</div>
</div>
<div class="girl">
     <span class="pp">女</span>
     <span class="pp">朋</span>
     <span class="pp">友</span>
     <span class="pp">你</span>
     <span class="pp">好</span>
</div>
</body>
<script type="text/javascript">
var d1 = document.getElementsByClassName("d1");
var arr = [0,1,2,4,7,6,5,3];
var jp = ["谢谢惠顾","100元","迪奥口红一支","1000现金","99朵玫瑰花","衣服一件1k以下","谢谢惠顾","谢谢惠顾"];
var num = 0;
var num2 = 0;
var timer = null;
start.onclick = function(){
	clearInterval(timer);
	for(var j=0;j<d1.length;j++){
		var b = jp[num2];
        d1[j].innerHTML = b;
        num2++;
 	}
 	if(num2==d1.length){
       num2=0;
 	}
	timer = setInterval(function(){
		var a = arr[num];
		for(var i=0;i<d1.length;i++){
            d1[i].style.background = "skyblue";
 		}
        d1[a].style.background = "hotpink";
        num++;
        if(num==d1.length){
           num = 0;
        }
	},1);
}
var pp = document.getElementsByClassName("pp");
function stop(){
	if(timer!=null){
       clearInterval(timer);
	   num = 0;
	   for(var i=0;i<d1.length;i++){
           d1[i].innerHTML = "做我女朋友！！！";
	   }
	   setInterval(function(){
           big.style.display = "none";
           colorer();
	   },1000);
	}
}
var timee;
var pp = document.getElementsByClassName("pp");
function colorer(){
	document.getElementsByClassName("girl")[0].style.display = "block";
	setInterval(function(){
		for(var l=0;l<pp.length;l++){
        pp[l].style.color = clr();
	    }
	},100);
}
function clr(){
	var cl = ["red","green","yellow","pink","blue","skyblue","hotpink"];
	//var cl = ["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
	var color = "";
	for(var i=0;i<1;i++){
        var sui=Math.random()*7;
        sui = parseInt(sui);
        color=color+cl[sui];
	}
	return color;
}
</script>
</html>

望各位单身程序员早日脱单
现总结到这下回再说我遇到的其他大哥代码，我还有罚抄十遍没写呢！