前端起起落落落落落落落落落落落落落落落落
上回說到學習狀态,這回就來說說學習中遇到的難點哇!
難度排行:
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>
望各位單身程式員早日脫單
現總結到這下回再說我遇到的其他大哥代碼,我還有罰抄十遍沒寫呢!