畫一個皮卡丘項目小結(4)
阿新 • • 發佈:2018-02-06
裏的 posit play art 創建 tag bstr dex https
前言
繼續總結過程中學到的新知識,這是第4部分,也是最後一部分。
主要是實現 頁面變速展示的 效果
一、創建button按鈕
1 HTNL結構
<div class="action"> <button data-speed="slow">慢速</button> <!-- 自定義屬性 --> <button data-speed="normal" class="active">中速</button> <button data-speed="fast">快速</button> </div>
2 設置按鈕的一般樣式
.actions{
position: absolute;
top: 0;
right: 0;
/* border: 1px solid red; */
display: flex;
flex-direction: column;
}
.actions>button{
margin: 10px;
padding: 8px 10px;
background: #ddd;
border: none; /*去除默認按鈕的 邊框樣式*/
}
3 設置被選中按鈕的樣式
.actions>button.active{ box-shadow: 1px 1px 1px rgba(0,0,0,0.8); /* box-shadow樣式*/ } /* .actions>button:focus{ outline: none;} 去除默認按鈕的 選中邊框顏色 */
二、引入jquery
1 安裝初始化yarn,用yarn引入jquery依賴
?yarn官網
2 創建.gitignore文件來忽略 node_mldules
?用git status -sb 命令行 查看是否忽略成功
3 強制引入node_mldules裏的 單個jquery文件
?用 git add -f node_modules/jquery/dist/jquery.min.js 命令行 強制添加
4 在index.html裏 引入jquery
三、用jquery監聽綁定按鈕並設置速度
1 設置動態改變active的所屬
$(‘.actions‘).on(‘click‘, ‘button‘, function(e){ let $button = $(e.currentTarget) //當前指向元素button let speed = $button.attr(‘data-speed‘) //獲取其屬性值 console.log(speed) $button.addClass(‘active‘) //增加類 .siblings(‘.active‘).removeClass(‘active‘) //去除兄弟元素類 ...... })
2 實現點擊變速按鈕後,真的也改變展示速度
因為setInterval只會讀取一次 延遲時間的值,所以不能實現改變展示速度;
這時候,我們可以用 SetTimeOut()來實現(通過遞歸)
var duration = 20
function writeCode(prefix,code,fn){
let container = document.querySelector(‘#code‘)
let styleTag = document.querySelector(‘#styleTag‘)
let n = 0
// let id = setInterval(() => {
setTimeout(function run(){
n+=1;
container.innerHTML = code.substring(0,n)
styleTag.innerHTML = code.substring(0,n)
container.scrollTop = container.scrollHeight
if(n < code.length){
setTimeout(run, duration) //再次遞歸調用setTimeout
}else{
fn && fn.call()
}
}, duration)
}
3 通過點擊按鈕,就改變 duration的值,就可以實現展示速度變化
$(‘.actions‘).on(‘click‘, ‘button‘, function(e){
let $button = $(e.currentTarget) // button
let speed = $button.attr(‘data-speed‘)
console.log(speed)
$button.addClass(‘active‘)
.siblings(‘.active‘).removeClass(‘active‘)
switch (speed){
case ‘slow‘:
duration = 100
break
case ‘normal‘:
duration = 50
break
case ‘fast‘:
duration = 10
break
}
})
function writeCode(prefix,code,fn){
let container = document.querySelector(‘#code‘)
let styleTag = document.querySelector(‘#styleTag‘)
let n = 0
// let id = setInterval(() => {
setTimeout(function run(){
n+=1;
container.innerHTML = code.substring(0,n)
styleTag.innerHTML = code.substring(0,n)
container.scrollTop = container.scrollHeight
if(n < code.length){
setTimeout(run, duration)
}else{
fn && fn.call()
}
}, duration)
}
四 Reference
??1 data開頭的屬性;
??2 box-shadow介紹;
??3 yarn官網;
??4 jQuery 中文文檔;
畫一個皮卡丘項目小結(4)