vue模拟冒泡排序算法的可视化流程效果代码
代码语言:html
所属分类:动画
代码描述:vue模拟冒泡排序算法的可视化流程效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); *, *::before, *::after { box-sizing: border-box; } html { font: 700 16px/1 'Titillium Web', sans-serif; } body { margin: 40px 0; color: #fff; background-color: #000; } #app { width: 640px; margin: 0 auto; } .cards { position: relative; height: 400px; } .card-wrapper { position: absolute; bottom: 0; width: 6.25%; transition: -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); transition: transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275), -webkit-transform 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } .card { position: relative; height: 100%; margin: 0 5px; border: 1px solid #ff3179; background-color: #000; box-shadow: 0 0 25px #c2255c; } .card-active { -webkit-filter: hue-rotate(200deg); filter: hue-rotate(200deg); } .card-locked { -webkit-filter: hue-rotate(280deg); filter: hue-rotate(280deg); } .value { position: absolute; bottom: 5px; left: 0; right: 0; text-align: center; font-size: 1.25rem; } .control-panel { display: flex; align-items: center; justify-content: space-between; margin: 30px 5px 0; padding-top: 20px; border-top: 1px solid #fff; } h1 { margin: 0; font-size: 2.5rem; } button { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; color: #ff3179; font-size: 1.5rem; cursor: pointer; } @media only screen and (min-width: 880px) { #app { width: 800px; } .value { font-size: 1.5rem; } } @media only screen and (min-width: 1084px) { #app { width: 1024px; } .value { font-size: 1.75rem; } } </style> </head> <body> <div id="app"> <div class="cards"> <sort-card v-for="(card, index) in store.state.cards" :key="index" :value="card.value" :sort-index="card.sortIndex" :is-active="card.isActive" :is-locked="card.isLocked"></sort-card> </div> <div class="control-panel"> <h1>Bubble Sort Visualizer</h1> <button aria-label="Reset" v-if="store.state.done" @click="reset(SORT_ARRAY)"> <i class="fa fa-refresh" aria-hidden="true"></i> </button> </div> </div> <script type="text/x-template" id="sort-card-template"> <!-- 绑定内联样式,通过 height 和 transform 来显示不同的div --> <div class="card-wrapper" :data-sort-index="sortIndex" v-bind:style="{height: value * HEIGHT_INCREMENT + 'px',transform: 'translateX('+sortIndex*100+'%)'}"> <!-- 通过改变class,来改变颜色 --> <div class="card" :class="cardClassObject"> <div class="value">{{value}}</div> </div> </div> </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vuex.min.js"></script> <script> const EVENT_DELAY = 200; // 交换的过渡时间 const HEIGHT_INCREMENT = 20; //高度的增量, 数组的某一个值 * 增量 = 长方形高度 const SORT_ARRAY = [16,11,4,5,3,7,10,8,9,2,1]; // 进行冒泡排序的数组 const store = new Vuex.Store({ state: { values: [], // 值为 SORT_ARRAY 的副本 cards: [], // 可视化需要的数组,就是每一个长方形(div元素),数组的每一个值都代表一个div元素 done: true, // 表示是否排序完成,为true时,右下角出现重置按钮 // strValues 用来解决数组中出现重复的值,移动位置不对的情况 strValues:[], // 数组的一个副本,会将数组的值与下标拼起来,形成唯一的一个字符串 }, mutations: { // 重置,重新开始排序 reset (state, payload) { state.values = payload.values; // 遍历state.values,把state.values的每个值和下标拼接,形成唯一的字符串 // 值 和 下标 中间加上一个 符号,确保是唯一的,注意符号不能用""空字符串 state.values.forEach((item,i)=>state.strValues.push(item+'&'+i)); // 往 state.cards 中,添加对象,每个对象都代表一个需要排序的长方形(div元素) state.cards = []; for (let i = 0; i < state.values.length; i++) { state.cards.push({ value:state.values[i], // 数组中的值 strValue:state.strValues[i], //数组中的值和下标拼接的字符串 sortIndex:i, // 排序的索引 isActive: false, // 是否激活 isLocked: false // 是否锁定 }); } state.done = false; }, // 交换 swap (state, payload) { let a = payload.indexes[0]; let b = payload.indexes[1]; let temp = state.values[a]; // 交换真实的值 state.values[a] = state.values[b]; state.values[b] = temp; // 交换 数组中的值和下标拼接的字符串 let temp2 = state.strValues[a]; state.strValues[a] = state.strValues[b]; state.strValues[b] = temp2; // 重新定义s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0