神奇的占卜（HTML版）

神奇的占卜，大概是去年看到，觉得好玩，改写成HTML版的。

发上来充实下自己的blog。

神奇的占卜

---

 

代码保存为html文件，在浏览器中直接运行即可。

<style type="text/css">
  .table_back{320px;height:480px;border:0px}
  .floor{border:0px solid gray;font-size:12px;line-height:24px;}
</style>

<div id="NT">神奇的占卜<hr></div>

<script type="text/javascript">
/*
标题：神奇的占卜
设计：宁涛
日期：2010年9月20日
*/

function Prediction(options) {
  var self = this;
  for (var p in options) this[p] = options[p];
  this.parent = this.parent || document.body;
  this.rowCount = this.rowCount || 20;
  this.colCount = this.colCount || 5;
  this.picMax = this.picMax || 20;

  this.div_Intro = document.createElement("div");
  this.div_Intro.innerHTML = 
  "玩法：心中默想任意一个两位数，例如：23。 <br>"+
  "然后个数与十位相加：2+3=5。 <br>"+
  "用这个两位数23减相加的和5，得到23-5=18。 <br>"+
  "在页面中找到18对应的图标，记在心中。 <br>"+
  "然后点击占卜按钮，见证奇迹的时刻到了。 <br><hr>";
  this.parent.appendChild(this.div_Intro);

  this.table_back = document.createElement("table");
  this.table_back.className = "table_back";
  this.table_back.cellPadding = "0px";
  this.table_back.cellSpacing = "0px";
  this.floors = {};
  for (var i = 0; i  < this.rowCount; i++) {
    var tr = this.table_back.insertRow(-1);
    for (var j = 0; j  < this.colCount; j++) {
      var td = tr.insertCell(-1);
      td.className = "floor";
      this.floors[[i, j]] = {td: td};
      td.innerHTML = " ";
    }
  }
  this.parent.appendChild(this.table_back);

  this.button_Predict = document.createElement("input");
  this.button_Predict.type = "button";
  this.button_Predict.value = "占卜";
  this.button_Predict.onclick = function() {
    self.Predict();
  };
  this.parent.appendChild(this.button_Predict);

  this.font_Result = document.createElement("font");
  this.font_Result.face = "webdings";
  this.font_Result.size = "5px";
  this.font_Result.style.width = "50px";
  var TmpClr = Math.floor(0xFFFFFF / (this.picMax+1)).toString(16);
  this.font_Result.color = "000000".substr(TmpClr.length) + TmpClr;
  this.font_Result.innerHTML = " ";
  this.parent.appendChild(this.font_Result);

  this.button_Replay = document.createElement("input");
  this.button_Replay.type = "button";
  this.button_Replay.value = "刷新";
  this.button_Replay.onclick = function() {
    self.replay();
  };
  this.parent.appendChild(this.button_Replay);

  this.replay();
}

Prediction.prototype = {
  replay: function(){
    this.picOffSet = 40 + Math.floor( (120-this.picMax) * Math.random() );
    for(var i = 0; i  < this.rowCount; i++) {
      for(var j = 0; j  < this.colCount; j++) {
        this.floors[[i, j]].td.innerHTML = this.NewCell((this.rowCount-i-1)+(this.colCount-j-1)*this.rowCount);
      }
    }
    this.font_Result.innerHTML = " ";
  },

  NewCell: function(cell_index) {
    var RandNum = Math.floor(this.picMax * Math.random());
    if((0==(cell_index%9)) && (cell_index <90)) RandNum=0;
    var TmpClr = Math.floor(0xFFFFFF * (RandNum+1) / (this.picMax+1)).toString(16);
    TmpClr = "000000".substr(TmpClr.length) + TmpClr;
    var TmpStr = cell_index;
    TmpStr += " <font face=\"webdings\" size=\"5px\" color=\"#";
    TmpStr += TmpClr
    TmpStr += "\">";
    TmpStr += String.fromCharCode(this.picOffSet+RandNum);
    TmpStr += " <\/font>";
    return TmpStr;
  },

  Predict: function() {
    this.font_Result.innerHTML = String.fromCharCode(this.picOffSet);
  }
}

function $(id) { return document.getElementById(id); }

new Prediction({parent: $("NT")});

</script>

占卜的原理其实很简单，这里就不揭底了。