有趣的 HTML5 滑塊

2021-09-11 07:11:16 字數 1170 閱讀 1259

今天做了乙個案例:

以上就是效果圖!

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 ...