天天看點

難度排行!(附撩妹神器)

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

上回說到學習狀态,這回就來說說學習中遇到的難點哇!

難度排行:

1.輪播圖

當屬第一的莫過于輪播圖啦!在還沒學他之前,我就聽說這厮是個讓所有進階程式員掉頭發的利器,我本着明知山有虎,偏向虎山行。喝最烈的酒,日最野的狗的原則,向輪播圖發起了猛烈的進攻,不過不錯所料,我敗啦!當我就打算放棄他的時候,突然,靈感就像一道閃電,從腦海中劃過,機靈的我順手拍照,正好保留下了這一寶貴曆史時刻。一點一點的思路來了,不熟的訓示點也慢慢浮出水面。最後也勉強算是功課了這個難關吧。

難度:******。

2.幸運大輪盤抽獎

如果輪播圖是大哥的話哪幸運大輪盤就是二哥了,可以說是在老師下達了這個作業後,我就感覺毫無思路,自信心離我而去了,腦袋就想漿糊,無所适從,不知道該從哪裡入手,甚至連布局都不知道該從哪路入手。就在我迷茫之際,老師開始講思路了,他就好想漫漫黑夜中的一盞明燈

照亮了我回家的路。順手附上我的撩妹大轉盤代碼

//css部分
<!DOCTYPE html>
<html >
<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:;" target="_blank" rel="external nofollow" >開始</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>
           

望各位單身程式員早日脫單

現總結到這下回再說我遇到的其他大哥代碼,我還有罰抄十遍沒寫呢!