有趣的bootstrap走動(dòng)進(jìn)度條

更新時(shí)間：2016年12月01日 14:24:46 作者：愛喝酸奶的吃貨

這篇文章主要為大家詳細(xì)介紹了如何實(shí)現(xiàn)有趣的bootstrap走動(dòng)進(jìn)度條,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本教程教大家制作“走動(dòng)”著的bootstrap進(jìn)度條，供大家參考，具體內(nèi)容如下

1.頁面效果：

起始位置:

單擊"走"按鈕后

2.html代碼:

<div>
<div class="progress progress-striped active">
 <div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" v-bind:style="progressStyle">進(jìn)度條</div>
</div>
<button type='button' v-on:click='queryEnterprise' class='btn btn-primary'>走</button>
</div>

v-bind:style="progressStyle"

綁定內(nèi)聯(lián)樣式:

a.對(duì)象語法:v-bind:style 的對(duì)象語法十分直觀——看著非常像 CSS，其實(shí)它是一個(gè) JavaScript 對(duì)象。CSS 屬性名可以用駝峰式（camelCase）或短橫分隔命名（kebab-case）：

eg:

html:

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

js:

data: {
 activeColor: 'red',
 fontSize: 30
}

直接綁定到一個(gè)樣式對(duì)象通常更好，讓模板更清晰：

html:

<div v-bind:style="styleObject"></div>

js:

data: {
 styleObject: {
 color: 'red',
 fontSize: '13px'
 }
}

b.數(shù)組語法: v-bind:style 的數(shù)組語法可以將多個(gè)樣式對(duì)象應(yīng)用到一個(gè)元素上：

eg:

html:

<div v-bind:style="[styleObjectA, styleObjectB]">

js:

data: {
 styleObjectA: {
 color: 'red' 
 },
 styleObjectB:{
 fontSize: '13px'
 }
}

c.自動(dòng)添加前綴: 當(dāng) v-bind:style 使用需要廠商前綴的 CSS 屬性時(shí)，如 transform，Vue.js 會(huì)自動(dòng)偵測并添加相應(yīng)的前綴。

3.js代碼:

<script>
export default {
 components:{},
 props:{},
  ready:function(){},
  computed:{},
  methods:{
   queryEnterprise:function(){
    if(parseInt(this.progressStyle.width)<100){
     this.progressStyle.width=parseInt(this.progressStyle.width)+30+'%';
    }else{
     alert("進(jìn)度條已經(jīng)走完");
    }
   }
  },
 data () {
  return {
   //進(jìn)度條樣式
    progressStyle:{
     width:'10%',
    },
  }
 },

}
</script>

4.style

.progress {
 height: 40px;
 transition: 3s;
}
.progress-bar {
 font-size: 16px;
 line-height: 40px;
}

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)瀑布流布局的代碼分享
不知道大家在線上購物的時(shí)候有沒有發(fā)現(xiàn)到，自己逛起來根本就停不下來，越往下翻越是覺得就會(huì)出現(xiàn)需要的東西，這就是很多電商公司都在使用的瀑布流布局。本文就來用JS實(shí)現(xiàn)這一布局，需要的可以參考一下
2023-04-04
基于原生JS封裝的Modal對(duì)話框插件的示例代碼
這篇文章主要介紹了基于原生JS封裝的Modal對(duì)話框插件的示例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09
js實(shí)現(xiàn)頁面轉(zhuǎn)發(fā)功能示例代碼
本文為大家介紹的是使用js實(shí)現(xiàn)頁面轉(zhuǎn)發(fā)，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
2013-08-08
JavaScript獲取頁面中表單（form）數(shù)量的方法
這篇文章主要介紹了JavaScript獲取頁面中表單（form）數(shù)量的方法,涉及javascript操作表單document.forms數(shù)組的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-04-04
詳解小程序緩存插件(mrc)
這篇文章主要介紹了詳解小程序緩存插件(mrc)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
JavaScript雙問號(hào)(??)操作符用法詳解
在現(xiàn)代JavaScript開發(fā)中,處理變量默認(rèn)值是一個(gè)常見但容易引發(fā)bug的操作,很多開發(fā)者可能都遇到過這樣的問題：使用||設(shè)置默認(rèn)值時(shí),意外覆蓋了0、''等合法值,這時(shí)候,ES2020引入的雙問號(hào)操作符（??）就能完美解決這類問題,本文將帶您全面掌握這個(gè)操作符的使用場景和高級(jí)技巧
2025-04-04
JavaScript結(jié)合HTML DOM實(shí)現(xiàn)聯(lián)動(dòng)菜單
這篇文章主要為大家詳細(xì)介紹了JavaScript結(jié)合HTML DOM實(shí)現(xiàn)聯(lián)動(dòng)菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-04-04
JS 動(dòng)態(tài)判斷PC和手機(jī)瀏覽器實(shí)現(xiàn)代碼
這篇文章主要介紹了JS 動(dòng)態(tài)判斷PC和手機(jī)瀏覽器實(shí)現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下
2016-09-09
vscode錄音及語音實(shí)時(shí)轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件附踩坑日記！
以目前的vscode版本來說，作者并沒有開放訪問本地媒體權(quán)限，所以插件市場里面的所有語音相關(guān)插件也并沒有直接獲取vscode的媒體權(quán)限，這篇文章主要介紹了vscode錄音及語音實(shí)時(shí)轉(zhuǎn)寫插件開發(fā)并在工作區(qū)生成本地mp3文件?踩坑日記！,需要的朋友可以參考下
2023-05-05
如何基于JavaScript判斷圖片是否加載完成
這篇文章主要介紹了如何基于JavaScript判斷圖片是否加載完成,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12