前幾天看到大佬寫的变卦·易经64卦，心癢癢也想仿寫一個，理了一下路，開始磕磕絆絆地仿寫之路。
查看测试
這次仿寫沒有看源碼，先是看了一下效果，然後拷貝了一份css便開始理思路。
思路為作者提供的下面這張圖：
易經64卦，由上下部分組成，下半部分為上半部分的顛倒順序。
目的：
- 通過鼠標的互動展現64卦卦象；
- 單擊將陽（一橫）變爲陰（兩橫）；
- 鼠標移動到每一橫展示當前卦象每一橫的解釋；
- 通過改變陰陽來展現不同卦象。
思路：
- 設置6個橫，id分別為yao1、yao2、yao3、yao4、yao5、yao6;
- 默認6個橫為陽，value="0"（陰為value="1"）;
- 單擊后判斷當前為陽或陰，是陽改陰，是陰改陽;
- 將上三橫的value拼接，匹配上八個卦名：坤、艮、坎、巽、震、離、兌、乾，八個卦名用數字表示為："111"、"011"、"101"、"001"、"110"、"010"、"100"、"000";
- 下三橫方法如上，衹是將八個挂名顛倒匹配;
- 將上下卦名拼接;
- 待續......
直接借用HTML和CSS
最簡陋的結果是出來的，但是感覺太麻煩，經過同事提醒，還可以用json......
之後寫了個數組，然後用數字進去匹配，并且把詳細彈出：
function gua(){
var shang = $('#yao6').attr('value') + $('#yao5').attr('value') + $('#yao4').attr('value'),
xia = $('#yao3').attr('value') + $('#yao2').attr('value') + $('#yao1').attr('value'),
_result = [{num:'111000',name:'坤乾',value:'11.地天泰',content:'小往大来，吉亨。'},{num:'111100',name:'坤兑',value:'19.地泽临',content:'元，亨，利，贞。至于八月有凶。'},{num:'111010',name:'坤离',value:'36.地火明夷',content:'利艰贞。'},{num:'111110',name:'坤震',value:'24.地雷复',content:'亨。出入无疾，鹏来无咎。反复其道，七日来复，利有攸往。'},{num:'111001',name:'坤巽',value:'46.地风升',content:'元亨，用见大人，勿恤，南征吉。'},{num:'111101',name:'坤坎',value:'7.地水师',content:'贞，丈人，吉无咎。'},{num:'111011',name:'坤艮',value:'15.地山谦',content:'亨，君子有终。'},{num:'111111',name:'坤坤',value:'2.坤为地',content:'元亨，利牝马之贞。君子有攸往，先迷后得主，利西南得朋，东北丧朋。安贞，吉。'},{num:'011000',name:'艮乾',value:'26.山天大畜',content:'利贞，不家食吉，利涉大川。'},{num:'011100',name:'艮兑',value:'41.山泽损',content:'损：有孚，元吉，无咎，可贞，利有攸往。曷之用，二簋可用享。'},{num:'011010',name:'艮离',value:'22.山火贲',content:'亨。小利有攸往。'},{num:'011110',name:'艮震',value:'27.山雷颐',content:'贞吉。观颐，自求口实。'},{num:'011001',name:'艮巽',value:'18.山风蛊',content:'元亨，利涉大川。先甲三日，后甲三日。'},{num:'011101',name:'艮坎',value:'4.山水蒙',content:'亨。匪我求童蒙，童蒙求我。初筮告，再三渎，渎则不告。利贞。'},{num:'011011',name:'艮艮',value:'52.艮为山',content:'艮其背，不获其身，行其庭，不见其人，无咎。'},{num:'011111',name:'艮坤',value:'23.山地剥',content:'不利有攸往。'},{num:'101000',name:'坎乾',value:'5.水天需',content:'有孚，光亨，贞吉。利涉大川。'},{num:'101100',name:'坎兑',value:'60.水泽节',content:'亨。苦节，不可贞。'},{num:'101010',name:'坎离',value:'63.水火既济',content:'亨，小利贞，初吉终乱。'},{num:'101110',name:'坎震',value:'3.水雷屯',content:'元亨，利贞，勿用有攸往，利建侯。'},{num:'101001',name:'坎巽',value:'48.水封井',content:'改邑不改井，无丧无得，往来井井。汔至，亦未繘井，羸其瓶，凶。'},{num:'101101',name:'坎坎',value:'29.坎为水',content:'习坎，有孚，维心亨，行有尚。'},{num:'101011',name:'坎艮',value:'39.水山蹇',content:'利西南，不利东北；利见大人，贞吉。'},{num:'101111',name:'坎坤',value:'8.水地比',content:'吉。原筮元永贞，无咎。不宁方来，后夫凶。'},{num:'001000',name:'巽乾',value:'9.风天小畜',content:'亨。密云不雨，自我西郊。'},{num:'001100',name:'巽兑',value:'61.风泽中孚',content:'豚鱼吉，利涉大川，利贞。'},{num:'001010',name:'巽离',value:'37.风火家人',content:'利女贞。'},{num:'001110',name:'巽震',value:'42.风雷益',content:'利有攸往，利涉大川。'},{num:'001001',name:'巽巽',value:'57.巽为风',content:'小亨，利攸往，利见大人。'},{num:'001101',name:'巽坎',value:'59.风水涣',content:'亨。王假有庙，利涉大川，利贞。'},{num:'001011',name:'巽艮',value:'53.风山渐',content:'女归吉，利贞。'},{num:'001111',name:'巽坤',value:'20.风地观',content:'盥而不荐，有孚顒若。'},{num:'110000',name:'震乾',value:'34.雷天大壮',content:'利贞。'},{num:'110100',name:'震兑',value:'54.雷泽归妹',content:'征凶，无攸利。'},{num:'110010',name:'震离',value:'55.雷火丰',content:'亨，王假之，勿忧，宜日中。'},{num:'110110',name:'震震',value:'51.震为雷',content:'亨。震来虩虩，笑言哑哑。震惊百里，不丧匕鬯。'},{num:'110001',name:'震巽',value:'32.雷风恒',content:'亨，无咎，利贞，利有攸往。'},{num:'110101',name:'震坎',value:'40.雷水解',content:'利西南，无所往，其来复吉。有攸往，夙吉。'},{num:'110011',name:'震艮',value:'62.雷山小过',content:'亨，利贞，可小事，不可大事。飞鸟遗之音，不宜上，宜下，大吉。'},{num:'110111',name:'震坤',value:'16.雷地豫',content:'利建侯，行师。'},{num:'010000',name:'离乾',value:'14.火天大有',content:'元亨。'},{num:'010100',name:'离兑',value:'38.火泽睽',content:'小事吉。'},{num:'010010',name:'离离',value:'30.离为火',content:'利贞，亨。畜牝牛，吉。'},{num:'010110',name:'离震',value:'21.火雷噬嗑',content:'亨。利用狱。'},{num:'010001',name:'离巽',value:'50.风火鼎',content:'元吉，亨。'},{num:'010101',name:'离坎',value:'64.火水未济',content:'亨，小狐汔济，濡其尾，无攸利。'},{num:'010011',name:'离艮',value:'56.火山旅',content:'小亨，旅贞吉。'},{num:'010111',name:'离坤',value:'35.火地晋',content:'康侯用锡马蕃庶，昼日三接。'},{num:'100000',name:'兑乾',value:'43.泽天夬',content:'扬于王庭，孚号，有厉，告自邑，不利即戎，利有攸往。'},{num:'100100',name:'兑兑',value:'58.兑为泽',content:'亨，利贞。'},{num:'100010',name:'兑离',value:'49.泽火革',content:'巳日乃孚，元亨利贞，悔亡。'},{num:'100110',name:'兑震',value:'17.泽雷随',content:'元亨利贞，无咎。'},{num:'100001',name:'兑巽',value:'28.泽风大过',content:'元亨利贞，无咎。'},{num:'100101',name:'兑坎',value:'47.泽水困',content:'亨，贞，大人吉，无咎，有言不信。'},{num:'100011',name:'兑艮',value:'31.泽山咸',content:'咸，亨，利贞，取女吉。'},{num:'100111',name:'兑坤',value:'45.泽地萃',content:'亨。王假有庙，利见大人，亨，利贞。用大牲吉，利有攸往。'},{num:'000000',name:'乾乾',value:'1.乾为天',content:'元亨，利贞。'},{num:'000100',name:'乾兑',value:'10.天泽履',content:'履虎尾，不咥人，亨。'},{num:'000010',name:'乾离',value:'13.天火同人',content:'同人于野，亨。利涉大川，利君子贞。'},{num:'000110',name:'乾震',value:'25.天雷无妄',content:'元亨，利贞。其匪正有眚，不利有攸往。'},{num:'000001',name:'乾巽',value:'44.天风姤',content:'女壮，勿用取女。'},{num:'000101',name:'乾坎',value:'6.天水讼',content:'有孚，窒。惕中吉。终凶。利见大人，不利涉大川。'},{num:'000011',name:'乾艮',value:'33.天山遁',content:'亨，小利贞。'},{num:'000111',name:'乾坤',value:'12.天地否',content:'否之匪人，不利君子贞，大往小来。'}],
_gua = parseInt(shang + xia);
for (var i = 0;i<_result.length;i++){
if( _gua == _result[i].num){
var title = _result[i].value,
text = _result[i].content;
alert(title+"："+text)
}
}
};
接著是根據卦象不同，每一橫的顯示文字也不同......待續
2017年3月28日 第一次修改
僅供個人新手學習使用。