酷炫的progressbar 上限可大於100

2021-08-17 11:09:21 字數 1785 閱讀 9932

name    

type

comment

elstring

初始節點

type

enum['exceed', 'success', 'warning', 'danger']

進度條型別(影響顏色)

percentage

integer

當前進度

maxinteger

最大進度

height

integer

進度條高度

name

comment

setpercentage(percentage)

設定進度

settype(type)

設定進度條型別(顏色)

建立進度條各部分元素節點,並賦值

/**

* created by lonelydawn on 2017-11-20.

* colorprogress - pretty easy progressar

* @params

* el: string

* type: enum['exceed', 'success', 'warning', 'danger']

* percentage: integer

* max: integer

* height: integer

* * @methods

* setpercentage(percentage: integer)

* settype(type: enum['exceed', 'success', 'warning', 'danger'])

*/var colorprogress = function (el, type, percentage, max, height)

var settype = function (type) [type]

} // 清空容器

for(var i = childs.length - 1; i >= 0; i--)

// 新增節點並設定樣式

var track = document.createelement('div')

track.classname = 'progress-track'

track.style.height = height + 'px'

var inner = document.createelement('div')

var label = document.createelement('div')

var bg = document.createelement('div')

bg.classname = 'progress-bg'

bg.style.width = 10000 / max + '%'

setpercentage(percentage)

settype(type)

} return

}

進度條動效通過css過渡效果實現

.progress-track 

.progress-bg

.progress-inner

.progress-label

.status-exceed

.status-success

.status-warning

.status-danger

.is-danger

github

在ubuntu上實現炫酷的終端介面

以前看過一些科幻電影,畫面中總是會有乙個厲害的黑客,敲著一些完全看不懂的 開著幾個不知所以然的炫酷視窗,以前很羨慕,但現在就可以通過hollywood程式實現。ubuntu18可以直接安裝,其他版本的ubuntu需要安裝ppa apt add repository ppa hollywood ppa...

炫酷的水滴ViewPagerIndicator

開始本文之前先檢視一下目標效果是如何的。weibo 這個動畫的 是優秀網頁設計的乙個微博,看到這個效果感覺下面的圓的動畫十分的贊,於是就打算模仿這個效果。然後接下來看我所做的簡單效果吧。專案 因為時間緣故就簡單的模仿了自己感興趣的主要效果,並沒有做到全部模仿,等以後有時間了再完善 挖坑 將這個圓的動...

pytest allure 酷炫的報告

首先如果你沒有安裝 pytest 庫的話,先使用 pip 安裝一下 pip install pytest 另外還需要安裝 pytest 支援 allure 報告的外掛程式庫 2 在執行測試時,使用 pytest 命令執行 pytest 測試目錄 alluredir 測試結果存放目錄 注意 這裡的 a...