zy-mhys
/
index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>梅花易数 在线排盘</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<style type="text/css">
*{margin: 0;padding: 0;box-sizing: border-box;}
html{background-color: white;color: #1f1f1f;font-size: 17px;font-family: 微软雅黑,"Microsoft Yahei",arial;}
body{max-width: 800px;margin: 0 auto;}
a{color: inherit;text-decoration: underline;}
#卦域{
  margin: 0 auto;
  max-width: 500px;
  padding: 5px;
  user-select: none;
}
#卦域 .row{
  float: left;
  width: 30%;
}
#卦域 .row + .row{
  margin-left: 5%;
}
.阴爻, .阳爻{
  background-color: transparent;
  height: 25px;
}
.阴爻:after{
  content: '';
  display: block;
  position: relative;
  height: 25px;
  width: 15%;
  top: 0;
  left: 42.5%;
  background-color: white;
}
.单卦{
  background-color: black;
}
.单卦 .br{
  height: 10px;
  background: white;
}
.clear{
  display: block;
  height: 0;
  clear: both;
}
input{
  width: 3.5em;
  padding: 3px 5px;
  border-radius: 2px;
  background-color: white;
  border: 1px solid gray;
  color: inherit;
}
button{
  padding: 4px 18px;
  background-color: #3F3F3F;
  color: #e3e3e3;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.1s;
  outline: none;
}
input, button{
  font-family: inherit;
  font-size: 18px;
  margin: 5px;
  font-weight: 800;
}
button:active{
  background-color: #171717;
}
.起卦{
  margin: 25px auto;
  text-align: center;
  user-select: none;
}
.卦名{
  text-align: center;
  background-color: white;
  font-size: 20px;
  height: 35px;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 800;
  color: #323232;
  letter-spacing: 2px;
}
#卦辞{
  padding: 15px;
}
@media screen and (max-width: 380px){
  #卦域 .row{
    float: left;
    width: 32%;
  }
  #卦域 .row + .row{
    margin-left: 2%;
  }
  input, button{
    font-size: 15px;
  }
}
.logo{
  text-align: center;
  padding-top: 25px;
  user-select: none;
  overflow: hidden;
}
.logo small{
  font-size: 0.8em;
  color: gray;
}
.logo img{
  transition: all 1.5s;
  transition-timing-function: ease-in-out;
  width: 4.5cm;
  height: 4.5cm;
  display: inline-block;
  transform: rotate(65deg);
  display: block;
  margin: 0 auto;
}
#回到顶部{
  position: fixed;
  bottom: 1em;
  right: 1em;
  font-size: 25px;
  line-height: 25px;
  user-select: none;
  color: #929292;
  display: none;
}
::selection{
  color: #e5e5e5;
  background-color: #1f1f1f;
}
.main{
  min-height: calc(100vh - 68px);
}
.foot{
  color: gray;
  font-size: 14px;
  line-height: 19px;
  text-align: center;
  padding: 15px;
  height: 68px;
}
</style>
</head>
<body>

<div class="main">
  <div class="logo">
    <img ondragstart='return false;' src="bg.svg" />
  </div>
  <form action="" method="get" onsubmit="return (function(){
    算卦动画();return false;
  })();">
    <div class="起卦">
      <input type="number" id="入上卦" placeholder="上卦" min="0" onclick="this.value = null;this.onclick=null">
      <input type="number" id="入下卦" placeholder="下卦" min="0" onclick="this.value = null;this.onclick=null">
      <input type="number" id="入爻动" placeholder="爻动" min="0" onclick="this.value = null;this.onclick=null">
      <button type="submit">走你</button>
    </div>
  </form>
  <div id="卦域">
    <div class="clear"></div>
    <div class="row" id="本卦"><div class="卦名">༺乾༻</div>
      <div id="上本卦" class="单卦" style="background-color: #f6f6f6;"><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div></div>
      <div id="下本卦" class="单卦" style="background-color: #f6f6f6;"><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div></div>
    </div>
    <div class="row" id="互卦"><div class="卦名">༺乾༻</div>
      <div id="上互卦" class="单卦" style="background-color: #f6f6f6;"><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div></div>
      <div id="下互卦" class="单卦" style="background-color: #f6f6f6;"><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div></div>
    </div>
    <div class="row" id="变卦"><div class="卦名">༺乾༻</div>
      <div id="上变卦" class="单卦" style="background-color: #f6f6f6;"><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div></div>
      <div id="下变卦" class="单卦" style="background-color: #f6f6f6;"><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div><div class="阳爻"></div><div class="br"></div></div>
    </div>
    <div class="clear"></div>
  </div>
  <div id="卦辞"></div>
</div>
<div id="回到顶部">⇧</div>
<div class="foot">
  「在线起卦」<br />
  &copy;2020 <a href="http://gitee.com/foxnes">luuljh</a>
</div>

<script type="text/javascript" src="calendar.js"></script>

<script type="text/javascript">

时间 = new Date();
农历 = calendar.solar2lunar(时间.getFullYear(), 时间.getMonth()+1, 时间.getDate());
生肖对应 = {
  '鼠': 1, '牛': 2, '虎': 3, '兔': 4, '龙': 5, '蛇': 6, '马': 7, '羊': 8, '猴': 9, '鸡': 10, '狗': 11, '猪': 12
}
农历.lYear = 生肖对应[农历.Animal]
// 农历.lYear 农历.lMonth 农历.lDay
时辰 = 时间.getHours()
if (时辰 % 2 == 1) 时辰 += 1
时辰 = 时辰/2 + 1
$('#入上卦').val((农历.lYear+农历.lMonth+农历.lDay)%8)
$('#入下卦').val((农历.lYear+农历.lMonth+农历.lDay+时辰)%8)
$('#入爻动').val((农历.lYear+农历.lMonth+农历.lDay+时辰)%6)

// 坤卦提前
八卦 = [
  ['坤','000', '土'],
  ['乾','111', '金'],
  ['兑','011', '金'],
  ['离','101', '火'],
  ['震','001', '木'],
  ['巽','110', '木'],
  ['坎','010', '水'],
  ['艮','100', '土']
];

六四卦 = [["乾","111111"],["坤","000000"],["屯","100010"],["蒙","010001"],["需","111010"],["讼","010111"],["师","010000"],["比","000010"],["小畜","111011"],["履","110111"],["泰","111000"],["否","000111"],["同人","101111"],["大有","111101"],["谦","001000"],["豫","000100"],["随","100110"],["蛊","011001"],["临","110000"],["观","000011"],["噬嗑","100101"],["贲","101001"],["剥","000001"],["复","100000"],["无妄","100111"],["大畜","111001"],["颐","100001"],["大过","011110"],["坎","010010"],["离","101101"],["咸","001110"],["恒","011100"],["遁","001111"],["大壮","111100"],["晋","000101"],["明夷","101000"],["家人","101011"],["睽","110101"],["蹇","001010"],["解","010100"],["损","110001"],["益","100011"],["夬","111110"],["姤","011111"],["萃","000110"],["升","011000"],["困","010110"],["井","011010"],["革","101110"],["鼎","011101"],["震","100100"],["艮","001001"],["渐","001011"],["归妹","110100"],["丰","101100"],["旅","001101"],["巽","011011"],["兑","110110"],["涣","010011"],["节","110010"],["中孚","110011"],["小过","001100"],["既济","101010"],["未济","010101"]];

function $(id){
  // 只能选一个元素
  return {
    dom: document.querySelector(id),
    val: function(text){
      if (typeof text == 'undefined'){
        return $(id).dom.value;
      }else{
        $(id).dom.value = text;
      }
    },
    html: function(code, add){
      if (typeof code == 'undefined'){
        return $(id).dom.innerHTML;
      }else{
        if (typeof add == 'undefined'){
          $(id).dom.innerHTML = code;
        }else{
          $(id).dom.innerHTML += code;
        }
      }
    },
    画爻: function(爻){
      $(id).html('');
      // 爻 如 101
      爻 = 爻.split('');
      爻.forEach(function(item){
        if (item == 1){
          // 阳爻
          $(id).html('<div class="阳爻"></div><div class="br"></div>', '+');
        }else{
          $(id).html('<div class="阴爻"></div><div class="br"></div>', '+');
        }
      });
      // 画完卦判断一下是哪个卦，好定五行颜色
      八卦.forEach(function(item){
        if (item[1] == 爻.join('')){
          $(id).五行着色(item[2]);
        }
      })
    },
    五行着色: function(五行){
      let color = 'black';
      switch (五行){
        case '金':
          color = '#ebbb00';
          break;
        case '木':
          color = '#00982d';
          break;
        case '水':
          color = '#005f98';
          break;
        case '火':
          color = '#b82200';
          break;
        case '土':
          color = '#9e5900';
          break;
      }
      $(id).dom.style = 'background-color: '+color+';';
    }
  }
}

function 算卦动画(){
  $('.logo img').dom.style.transform = $('.logo img').dom.style.transform == 'rotate(965deg)' ? 'rotate(65deg)' : 'rotate(965deg)';
  setTimeout(function(){
    算卦();
  }, 500);
}

function 算卦(){
  while (document.getElementsByClassName('卦名').length > 0){
    document.getElementsByClassName('卦名')[0].remove();
  }
  if ($('#入上卦').val() == "" ||
    $('#入下卦').val() == "" ||
    $('#入爻动').val() == ""
    ){
    return "";
  }
  var 上 = ($('#入上卦').val()%8);
  var 下 = ($('#入下卦').val()%8);
  var 爻 = ($('#入爻动').val()%6);
  // 本卦
  $('#上本卦').画爻(八卦[上][1]);
  $('#下本卦').画爻(八卦[下][1]);
  var 本卦 = 八卦[上][1] + 八卦[下][1];
  // 互卦
  var 互卦 = 八卦[上][1].substr(1, 2)+八卦[下][1].substr(0, 1);
  互卦 += 八卦[上][1].substr(2, 1)+八卦[下][1].substr(0, 2);
  $('#上互卦').画爻(互卦.substr(0, 3));
  $('#下互卦').画爻(互卦.substr(3, 3));
  // 变卦
  var 变卦 = (八卦[上][1] + 八卦[下][1]).split('');
  爻 = (爻 == 0) ? 0 : (6 - 爻);
  变卦[爻] = (变卦[爻] == '1') ? '0' : '1';
  变卦 = 变卦.join('');
  $('#上变卦').画爻(变卦.substr(0, 3));
  $('#下变卦').画爻(变卦.substr(3, 3));

  // 判断重卦
  function 断重卦(id, 卦象){
    for (var i = 0; i < 六四卦.length; i++) {
      // 这里需要把卦象反过来！！！因为顺序不一样
      if (六四卦[i][1] == 卦象.split('').reverse().join('')){
        $(id).html('<div class="卦名">༺'+六四卦[i][0]+'༻</div>' + $(id).html());
        let index = i+1;
        $(id).dom.onclick = function(){
          展示爻辞(index);
        }
      }
    }
  }
  断重卦('#本卦', 本卦);
  断重卦('#互卦', 互卦);
  断重卦('#变卦', 变卦);
}
function 展示爻辞(index){
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function(){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      $('#卦辞').html(xmlhttp.responseText);
    }
  }
  xmlhttp.open("GET", "./64guaci/"+index, true);
  xmlhttp.send();
}
window.onscroll = function(){
  if (document.documentElement.scrollTop > 700){
    $('#回到顶部').dom.style = "display: block;"
  }else{
    $('#回到顶部').dom.style = "";
  }
}
$('#回到顶部').dom.onclick = function(){
  back2top = setInterval(function(){
    var dtop = document.documentElement.scrollTop;
    var speed = Math.floor(-dtop/8);
    document.documentElement.scrollTop = dtop+speed;
    if(dtop==0){
      clearInterval(back2top);
    }
  }, 10);
}
</script>

</body>
</html>