今天做了乙個案例:
以上就是效果圖!
html**:
請輸入玩家人數
玩家數量為4-18
css**
/* sec-bottom */
.bottom
.bottom-top input
.bottom-top span:first-child
.bottom-top span:last-child
.bottom-bottom
/*滑動條的***/
/*橫條樣式*/
#slide
/*拖動塊的樣式*/
#slide::-webkit-slider-thumb
.minux
.add
/*滑動條的***/
/* sec-bottom */
js **:
let mynumber = document.getelementbyid('number');
mynumber.oninput = function ()
}// 殺手與平民的配比
var slide = document.getelementbyid("slide");
slide.oninput = function ()
}//減號按鈕與滾動條同步
let minux = document.getelementsbyclassname('minux')[0];
minux.onclick = function ()
}//加號按鈕與滾動條同步
let add = document.getelementsbyclassname('add')[0];
add.onclick = function ()
}//滑動條的**
以上運用的 html5 實現滑塊------type="range"屬性
寫作事件2023年2月24日15:23:25
有趣得html5儲存
html5的幾種儲存方式 html5在引入webstorage之前,主要用cookies.web storage html5的webstorage 分兩種 localstorage 和sessionstorage,兩者的差別主要在生命週期不同。localstorage localstorage用於持...
有趣的HTML5 離線儲存
首先來講解下離線儲存的使用方法,說起來也很簡單。只要在你的頁面頭部像下面一樣加入乙個manifest的屬性就可以了。manifest cache.manifest html 然後cache.manifest檔案的書寫方式,就像下面這樣 cache manifest v0.11 cache css s...
有趣的HTML5 離線儲存
最近由於找工作一直沒時間也沒有精力更新部落格,找工作真是一件苦逼的事情啊。不抱怨了,我們來看看html5的新特性 離線儲存吧。首先來講解下離線儲存的使用方法,說起來也很簡單。只要在你的頁面頭部像下面一樣加入乙個manifest的屬性就可以了。manifest cache.manifest html ...