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

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

上回说到学习状态,这回就来说说学习中遇到的难点哇!
难度排行:
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>

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值