神奇的占卜（HTML版）

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

发上来充实下自己的blog。

神奇的占卜

---

 

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

<style type="text/css">

  .table_back{width: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>

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