一個程式設計師的修煉祕籍
阿新 • • 發佈:2018-12-14
// 0. 用一個數組儲存一組顏色值
var colors = ['red', 'green', 'yellow', '#fff', 'pink', 'blue'];
//定義一個變數,定義其他樣式的
b = 0
$('#ban').click(function () {
b = 1;
});
$('#vip').click(function () {
b = 2;
});
// 1. 給發射按鈕註冊點選事件
$('#emit').click(function () {
// 2. 獲取文字框的內容
var v = $('#txt').val ();
// 3. 建立span標籤,並設定內容,設定樣式,最後追加到類名為box的div中
var $span = $('<span></span>');
//定義CSS樣式,讓它是一個數組形式表現
css = [{
"left": $('.box').width(),
"top": parseInt(Math.random() * $('.box').height()),
"color": colors[parseInt(Math.random() * colors.length)]
},
{
"left" : $('.box').width(),
"top": parseInt(Math.random() * ($('.box').height() / 2)),
"color": colors[parseInt(Math.random() * colors.length)]
},
{
"left": $('.box').width(),
"top": parseInt(Math.random() * $('.box').height()),
"color": "yellow",
"fontSize": 50,
"fontFamily" : "楷體"
}
]
//看看能不能打印出陣列中的東西
// console.log(abc[1])
$span.text(v)
.css(css[b])
.appendTo('.box');
// 4. 讓當前的span產生動畫 left 為-span的寬度
//打印出文字長度
// console.log(v.length)
$span.animate({
left: -1 * $span.width()
}, (30 - v.length) * 333, 'linear',
function () {
// 當動畫結束後,刪除該元素
$span.remove();
})
});