javascript 测试：了解阶乘

<style type="text/css"> body { font-size: 24pt; } #container, #tip { width: 600px; margin: 10px auto; background-color: white; padding: 10px; border: 1px solid lightsteelblue; } #tip { font-size: 10pt; } #blackboard { background-color: black; color: white; padding: 25px; border: 1px solid black; font-size: 13pt; font-family: 'Courier New', monospace; height: 300px; z-index: 1; } #teacher { background-color: #448; color: white; padding: 15px; border: 1px solid black; margin: 20px 0; } #student { background-color: #dfd; color: #373; padding: 15px; border: 1px solid black; } #downArray { font-size: 24pt; position: relative; top: -230px; left: 555px; color: white; width: 35px; height: 35px; z-index: 9999; cursor: pointer; background-color: #666; } div.clear { clear: both; height: 1px; overflow: hidden; }</style> <script type="text/javascript"> var steps = [[ {actor:"blackboard", type:"say", value: "1. 了解阶乘(factorial)"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"teacher", type:"say", value: "请看上面："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"say", value: "1"}, {actor:"", type:"wait", value: 0.5}, {actor:"teacher", type:"say", value: "这是什么？"} ],[ {actor:"student", type: "say", value: "这是整数 1。"} ],[ {actor:"teacher", type: "say", value: "在 Ruby 中，这样写就能得到整数 1。"}, {actor:"", type:"wait", value: 0.2}, {actor:"teacher", type:"say", value: "如果我想得到 2 呢？"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"student", type: "say", value: "像上面这样："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"show", value: "2"} ],[ {actor:"teacher", type: "say", value: "没错。有没有其他方式呢？"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"student", type: "say", value: "嗯……，上面这样也可以吧："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"show", value: "2 * 1"} ],[ {actor:"teacher", type: "say", value: "对了。"}, {actor:"", type:"wait", value: 0.2}, {actor:"teacher", type:"say", value: "如果我想得到 6 呢？"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"student", type: "say", value: "像上面这样："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"show", value: "3 * 2 * 1"} ],[ {actor:"teacher", type:"say", value: "24 呢？"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"student", type: "say", value: "像上面这样："}, {actor:"", type:"wait", value: 0.2}, {actor:"blackboard", type:"show", value: "4 * 3 * 2 * 1"} ],[ {actor:"teacher", type:"say", value: "类似这样的乘法表达式，你以前见过吗？"} ],[ {actor:"student", type:"say", value: "见过，这叫阶乘(factorial)。"} ],[ {actor:"", type:"clear", value: "blackboard"}, {actor:"teacher", type:"say", value: "没错。我们看看这个 Ruby 函数："}, {actor:"", type:"wait", value: 0.5}, {actor:"blackboard", type:"show", value: "def factorial(n)\n" + " if n == 1\n" + " n\n" + " else\n" + " n * factorial(n-1)\n" + " end\n" + "end"} ],[ {actor:"student", type:"say", value: "它的名字叫 factorial，它就是做阶乘的吧？"}, {actor:"", type:"wait", value: 0.5}, {actor:"student", type:"say", value: "不过看起来好像太简单了。"} ],[ {actor:"teacher", type:"say", value: "那你说说阶乘最简单的定义是什么？"} ],[ {actor:"student", type:"say", value: "最简单的定义是：n! = n * (n-1)!"} ],[ {actor:"teacher", type:"say", value: "那你再看看上面这个函数，"} ],[ {actor:"student", type:"say", value: "看到了，第五行，n * factorial(n-1)"}, {actor:"", type:"wait", value: 0.2}, {actor:"student", type:"say", value: "和刚才的定义很像。"} ],[ {actor:"teacher", type:"say", value: "没错。但是如果当 n 减到 1 了呢？"} ],[ {actor:"student", type:"say", value: "当然不能再往下乘了，否则结果就变成 0 了。"}, {actor:"", type:"wait", value: 0.2}, {actor:"student", type:"say", value: "所以当 n 为 1 的时候应该直接得到 1。"} ],[ {actor:"teacher", type:"say", value: "那你再看看上面这个函数，"} ],[ {actor:"student", type:"say", value: "看到了，第二行好像就是做这个判断的。"}, {actor:"", type:"wait", value: 0.2}, {actor:"student", type:"say", value: "如果满足这个条件，第三行就是返回 1 吧。"} ],[ {actor:"teacher", type:"say", value: "就是这样。现在你能不能描述一下这个函数的过程？"} ],[ {actor:"student", type:"say", value: "简单。如果参数为 1，则结果也为 1，"}, {actor:"", type:"wait", value: 0.5}, {actor:"student", type:"say", value: "否则结果为 n * factorial(n-1)。"} ]];var currentStep = 0;var currentSubstep = 0;var currentStatus = "ready";function toNormalString(str) { str = str.replace(/ /g, " "); str = str.replace(/</g, "<"); str = str.replace(/>/g, ">"); str = str.replace(/"/g, "\""); str = str.replace(/
/g, "\n"); return str;}function toHTML(str) { str = str.replace(/ /g, " "); str = str.replace(/</g,>/g, ">"); str = str.replace(/\"/g, """); str = str.replace(/\n/g, "
"); return str;}function say() { var step = steps[currentStep]; var substep = step[currentSubstep]; var msg = substep.value; var element = document.getElementById(substep.actor); var content = toNormalString(element.innerHTML); if (content == " ") { content = ""; } if (content.length < msg.length) { element.innerHTML = msg.substring(0, content.length + 1); setTimeout(say, 100); } else { addSubstep(true); }}function wait() { var step = steps[currentStep]; var substep = step[currentSubstep]; addSubstep(false); setTimeout(nextStep, substep.value * 1000);}function doClear() { var step = steps[currentStep]; var substep = step[currentSubstep]; document.getElementById(substep.value).innerHTML = " "; addSubstep(true);}function show() { var step = steps[currentStep]; var substep = step[currentSubstep]; document.getElementById(substep.actor).innerHTML = toHTML(substep.value); addSubstep(true);}function addSubstep(autoNext) { currentSubstep += 1; if (autoNext) { setTimeout(nextStep, 100); }}function nextStep() { if (currentStep == steps.length) { return; } if (currentStatus == "ready") { currentStatus = "running"; document.getElementById("downArray").style.display = "none"; } var step = steps[currentStep]; var substep = step[currentSubstep]; if (currentSubstep == step.length) { currentSubstep = 0; currentStep += 1; currentStatus = "ready"; document.getElementById("downArray").style.display = ""; return; } if (substep.type == "say") { document.getElementById(substep.actor).innerHTML = " "; say(); } else if (substep.type == "clear") { doClear(); } else if (substep.type == "show") { show(); } else if (substep.type == "wait") { wait(); }}function attachEvent(elem, eventName, callback) { if (elem.addEventListener) { elem.addEventListener(eventName, callback, false); } else if (elem.attachEvent) { elem.attachEvent('on' + eventName, callback); } else { var currentEventHandler = elem['on' + eventName]; if (currentEventHandler == null) { elem['on' + eventName] = callback; } else { elem['on' + eventName] = function(e) { currentEventHandler(e); callback(e); } } }}function gotoNextStep() { if (currentStatus == "ready") { nextStep(); }}</script>

 

 

 

 

单击▼，一步一步学习 Ruby

▼

<script type="javascript">attachEvent(document.getElementById("downArray"), "click", gotoNextStep);</script>