1. 程式人生 > >一個程式設計師的修煉祕籍

一個程式設計師的修煉祕籍

// 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(); }) });