如何用HTML技術製作乙個簡單的數字表盤

2021-08-22 00:21:58 字數 2513 閱讀 6756

這就是表盤的真面目,如果要直接在要新增的位置加入數字表盤的話,要先在新增的位置寫:

class="style__panel"

id="demo-panel">

class="style__digit">

0li>

1li>

2li>

3li>

4li>

5li>

6li>

7li>

8li>

9li>

0li>

ul>

div>

class="style__digit">

0li>

1li>

2li>

3li>

4li>

5li>

6li>

7li>

8li>

9li>

0li>

ul>

div>

class="style__digit">

0li>

1li>

2li>

3li>

4li>

5li>

6li>

7li>

8li>

9li>

0li>

ul>

div>

div>加入css

.style__digit

ul.style__panel

.style__panel,.style__panel

.style__digit

.style__panel

.style__digit

.style__panel

.style__digit

ul.style__panel

.style__digit+.style__digit

.style__panel

.style__digit

li

最後用js初始化,數字表盤就ok了:

var panel =  does not exist!`);

this.element=e;

this.selector=selector;

return

true;

},update:function

(number) is not a number!`));

var digits = document.queryselectorall(`$ ul`).length;

var n = number(number).tostring();

n = n.length"0".repeat(digits-n.length) + n:n;

for(let i = digits; i>0; i--) document.queryselector(`$ .style__digit:nth-child($) ul`).style.margintop=`-$px`;

return

this.digit = n;

}};panel.launch("#demo-panel");

panel.update(math.random()*6666);

如果認為很麻煩的話,我還寫了個自動初始化指令碼,只要引入了jquery就可以使用:

~(function

(), updateinterval:50,/*更新頻率(毫秒)*/

selector:"body",/*容器的css選擇器,務必修改*/

loadstylesheet:true

/*自動載入樣式表*/

};/*開始工作!*/

/*載入樣式表*/

/*生成隨機元素id*/

var _id = '******xx-***x-4***-y***-************'.replace(/[xy]/g, function

(c) );

/*放置元素*/

var html = "

"; html="+_id+"\" class=\"panel\">"+(html.repeat(options.digits))+"

"; window[options.globals]=,

intervalid:setinterval("window[\""+options.globals+"\"]"+"._updater()",options.updateinterval),

_lastdigit:null,

/*開始控制器部分*/

readlastdigit:function

(), restart:function

(updater=null,interval=null)

};})();

最後,祝你使用愉快,再見。

如何用c 製作乙個程式

程式設計思想 1.製作合適的窗體.2.將窗體變成圓形.3.設定好圓形窗體的初始位置 大小等資料 4.製作第一輪小球滾動 5.考慮多種情況.製作流程 1.this formborderstyle formborderstyle.none 視窗無邊框 this size newsize 50 50 窗體...

如何製作乙個HTML網頁

標籤對中的第乙個標籤是開始標籤,第二個標籤是結束標籤 開始和結束標籤也被稱為開放標籤和閉合標籤 3.html 文件 網頁 html 文件描述網頁 html 文件包含 html 標籤和純文字 html 文件也被稱為網頁 web 瀏覽器的作用是讀取 html 文件,並以網頁的形式顯示出它們。瀏覽器不會顯...

如何用vue製作乙個探探滑動元件

嗨,說起探探想必各位程式汪都不陌生 畢竟妹子很多 能在上面絲滑的翻牌子,探探的的堆疊滑動元件起到了關鍵的作用,下面就來看看如何用vue寫乙個探探的堆疊元件 簡單使用下探探會發現,堆疊滑動的功能很簡單,用一張圖概括就是 簡單歸納下裡面包含的基本功能點 體驗優化 有了歸納好的功能點,我們實現元件的思路會...