效果
源码
< button id = " undo" onclick = " onHistory(-1)" > 撤消</ button>
< button id = " redo" onclick = " onHistory(1)" > 重做</ button> < button onclick = " operation(' Operation 1' )" > 操作1</ button>
< button onclick = " operation(' Operation 2' )" > 操作2</ button>
< button onclick = " operation(' Operation 3' )" > 操作3</ button>
< button onclick = " operation(' Operation 4' )" > 操作4</ button>
< button onclick = " operation(' Operation 5' )" > 操作5</ button>
< button onclick = " operation(' Operation 6' )" > 操作6</ button> < ul id = " result" > </ ul>
const historyData = { list: [ ] , index: - 1 } ; const render = ( ) => { const undo = document. querySelector ( '#undo' ) ; ( historyData. index === - 1 ) ? undo. setAttribute ( 'disabled' , 'disabled' ) : undo. removeAttribute ( 'disabled' ) ; const redo = document. querySelector ( '#redo' ) ; ( historyData. index === historyData. list. length - 1 ) ? redo. setAttribute ( 'disabled' , 'disabled' ) : redo. removeAttribute ( 'disabled' ) ; const result = document. querySelector ( '#result' ) ; result. innerHTML = '' ; historyData. list. forEach ( ( d, i ) => { const li = document. createElement ( 'li' ) ; li. style. color = historyData. index === i ? 'red' : 'black' ; li. innerText = ` ${ i} - 当前操作: ${ d. current} ` ; result. appendChild ( li) ; } ) ;
} const onHistory = ( i ) => { const index = historyData. index + i; historyData. index = index; render ( ) ;
} ; const operation = ( type ) => { historyData. list = [ ... historyData. list. slice ( 0 , historyData. index + 1 ) , { current: type } ] ; historyData. index = historyData. list. length - 1 ; render ( ) ;
} ; render ( ) ;