前端起起落落落落落落落落落落落落落落落落
上回说到学习状态,这回就来说说学习中遇到的难点哇!
难度排行:
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>
望各位单身程序员早日脱单
现总结到这下回再说我遇到的其他大哥代码,我还有罚抄十遍没写呢!