关于Javascript 特效代码

Posted 2023-05-10

<script language="javascript">
<!-- Hide the script from old browsers --
function compute(obj)
obj.expr.value = eval(obj.expr.value)
var one = '1'
var two = '2'
var three = '3'
var four = '4'
var five = '5'
var six = '6'
var seven = '7'
var eight = '8'
var nine = '9'
var zero = '0'
var plus = '+'
var minus = '-'
var multiply = '*'
var divide = '/'
var decimal = '.'
function enter(obj, string)
obj.expr.value += string
function clear(obj)
obj.expr.value = ''
// --End Hiding Here -->
</script>
<form name="calc">
<table border=1>
<td colspan=4><input type="text" name="expr" size=30 action="compute(this.form)"> <tr>
<td><input type="button" value=" 7 " onClick="enter(this.form, seven)">
<td><input type="button" value=" 8 " onClick="enter(this.form, eight)">
<td><input type="button" value=" 9 " onClick="enter(this.form, nine)">
<td><input type="button" value=" / " onClick="enter(this.form, divide)">
<tr><td><input type="button" value=" 4 " onClick="enter(this.form, four)">
<td><input type="button" value=" 5 " onClick="enter(this.form, five)">
<td><input type="button" value=" 6 " onClick="enter(this.form, six)">
<td><input type="button" value=" * " onClick="enter(this.form, multiply)">
<tr><td><input type="button" value=" 1 " onClick="enter(this.form, one)">
<td><input type="button" value=" 2 " onClick="enter(this.form, two)">
<td><input type="button" value=" 3 " onClick="enter(this.form, three)">
<td><input type="button" value=" - " onClick="enter(this.form, minus)">
<tr><td colspan=2><input type="button" value=" 0 " onClick="enter(this.form, zero)">
<td><input type="button" value=" . " onClick="enter(this.form, decimal)">
<td><input type="button" value=" + " onClick="enter(this.form, plus)">
<tr><td colspan=2><input type="button" value=" = " onClick="compute(this.form)">
<td colspan=2><input type="button" value="AC" size= 3 onClick="clear(this.form)"> </table>
</form>

以上是原代码 哪位大侠帮我说明一下.要每句都详细的说明一下
本人不才,初学Javascript 什么都不懂.
解说的越详细越好
这是效果连接http://www.codesky.net/article/doc/200508/javascript/jsq1.htm

<script language="JavaScript">
<!-- Hide the script from old browsers --
function compute(obj) //定义一个函数 名字叫compute 他接收了一个参数 obj
obj.expr.value = eval(obj.expr.value) //当前的参数的值和下文参数值所用的方法相同
var one = '1' //定义一个字符型的1
var two = '2' //定义一个字符型的2
var three = '3' //定义一个字符型的3
var four = '4' //定义一个字符型的4
var five = '5' //定义一个字符型的5
var six = '6' //定义一个字符型的6
var seven = '7' //定义一个字符型的7
var eight = '8' //定义一个字符型的8
var nine = '9' //定义一个字符型的9
var zero = '0' //定义一个字符型的0
var plus = '+' //定义一个字符型的+
var minus = '-' //定义一个字符型的*
var multiply = '*' //定义一个字符型的*
var divide = '/' //定义一个字符型的/
var decimal = '.' //定义一个字符型的.
function enter(obj, string) //定义一个函数 名字叫enter 他接收了一个参数 obj
obj.expr.value += string //让 obj的值加上 '+'后面的值
function clear(obj) //定义一个函数 名字叫clear 他接收了一个参数 obj
obj.expr.value = '' //让obj的值等于空
// --End Hiding Here -->
</script>
<form name="calc">
<table border=1>
<td colspan=4><input type="text" name="expr" size=30 action="compute(this.form)"> <tr>

<!--提交表单-->
<td><input type="button" value=" 7 " onClick="enter(this.form, seven)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 8 " onClick="enter(this.form, eight)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 9 " onClick="enter(this.form, nine)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" / " onClick="enter(this.form, divide)"><!--当鼠标点

击按钮的时候提交给函数按钮中的值-->
<tr><td><input type="button" value=" 4 " onClick="enter(this.form, four)"><!--当鼠标

点击按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 5 " onClick="enter(this.form, five)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 6 " onClick="enter(this.form, six)"><!--当鼠标点击按

钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" * " onClick="enter(this.form, multiply)"><!--当鼠标

点击按钮的时候提交给函数按钮中的值-->
<tr><td><input type="button" value=" 1 " onClick="enter(this.form, one)"><!--当鼠标点

击按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 2 " onClick="enter(this.form, two)"><!--当鼠标点击按

钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" 3 " onClick="enter(this.form, three)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" - " onClick="enter(this.form, minus)"><!--当鼠标点

击按钮的时候提交给函数按钮中的值-->
<tr><td colspan=2><input type="button" value=" 0 " onClick="enter

(this.form, zero)"><!--当鼠标点击按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" . " onClick="enter(this.form, decimal)"><!--当鼠标

点击按钮的时候提交给函数按钮中的值-->
<td><input type="button" value=" + " onClick="enter(this.form, plus)"><!--当鼠标点击

按钮的时候提交给函数按钮中的值-->
<tr><td colspan=2><input type="button" value=" = " onClick="compute(this.form)"><!

--提交表单在javascript中进行运算-->
<td colspan=2><input type="button" value="AC" size= 3 onClick="clear(this.form)"> <!--

点击此按钮调用此函数-->
</table>
</form> 参考技术A <script language="JavaScript">
<!-- Hide the script from old browsers --
function compute(obj) //按等于“=”按钮调用的函数；
obj.expr.value = eval(obj.expr.value)//用js的eval()方法计算name为expr中的公式

var one = '1'//定义变量，用对应的type="button"的onClick中,这个对应enter(this.form, one);下面几行同理；
var two = '2'
var three = '3'
var four = '4'
var five = '5'
var six = '6'
var seven = '7'
var eight = '8'
var nine = '9'
var zero = '0'
var plus = '+'
var minus = '-'
var multiply = '*'
var divide = '/'
var decimal = '.'
function enter(obj, string) //type="button"的调用函器
obj.expr.value += string//在表单expr的值后面连上相应的字符

function clear(obj)
obj.expr.value = ''//清空表单

/*由以上，可见这是一个js计算器*/
// --End Hiding Here -->
</script> 参考技术B 本书以网站开发者在开发中遇到的实际问题和应该掌握的技术为中心，全面介绍了JavaScript在网站开发中各个方面的常用技术和技巧。全书共19章，分别是窗口/框架与导航条设计、表单及表单元素、实用JavaScript函数、日期和时间、文字特效、超级链接特效、操作表格、图形图像与多媒体、页面特效、状态栏特效、报表与打印、网站安全、html/CSS样式、JavaScript与XML、JavaScript与ASP结合、JavaScript与JSP结合、JavaScript与ASP.NET结合、JavaScript与php结合、综合应用等。全书共提供了401个实例，每个实例都突出实用性，其中大部分是网站开发者梦寐以求的问题解决方案。
　　本书附有配套光盘。光盘提供了书中所有实例的全部源代码，所有源代码都经过精心调试，在Windows XP/Windows 2000环境下测试通过，保证能够正常运行。
　　本书适用于广大计算机爱好者和编程人员使用，也可供大中专院校师生学习参考。

关于javascript异步

1.简单的理解

　　JavaScript是单线程的！总所周知，正常代码是从上而下，一条一条顺序执行的。就好比下楼梯，第一条代码先获得内存或者先执行操作。当遇到漫长的处理操作时（比如读取庞大的文件时，执行大量的计算时），就会发生阻塞。如下图：

　　　　

　　

　　　　var fs = require("fs");
　　　　var data = fs.readFileSync(\'input.txt\');//读取文件
　　　　console.log(data.toString());　　　　　　//读完了文件才能执行=====>data.tostring()
　　　　console.log("程序执行结束!");

　　　　这就导致你后面要走的路（ console.log("程序执行结束!");）是受你这阶长路相关联的代码（console.log(data.toString());）影响的。

　　　　就问你难不难受？

 

　　　　好在javascript有个回调这个功能，说白了就是收到事件完成的通知后要执行的内容。如下图：

　　紫色代表执行过的代码，红色表示data.toString()代码,小人则表示老哥们在哪。

　　var fs = require("fs");

　　fs.readFile(\'input.txt\', function (err, data) {
    　　if (err) return console.error(err); console.log(data.toString());     //但是！data.toString()在文件读取后并不会立即执行
　　});
　　console.log("程序执行结束!");

 

　　输出：

　　>程序执行结束!
　　>菜鸟教程官网地址：www.runoob.com

 

　　这里我们可以看到，是先打印“程序执行结束！”，再执行data.String()的。这说明，我们下完楼梯才会去走上移了的路。（即，执行完js主程序所有的代码，才会去执行回调）

　　我就问你刺不刺激？

 

2.比较

 

　  一目了然的发现，我盗用了代码。第一段代码是阻塞代码，第二段代码是非阻塞代码。有了回调后，咱就不用担心效率问题喽！

　　假如上面阻塞代码要执行完需要：10s（做个比方，别当真）=======>读文件用时7s======>打印文件内容2s======>打印结束1s（ok  7+2+1=10）

　　　　　　　　则非阻塞代码需要：=======>读文件用时7s=======>打印结束1s=======>打印文件内容1s(What the  fuck!  7+1+2=10)

　　执行顺序发生改变却没有提高运行速度！

　　

　　这其实是一个哲♂学问题！

　　如果代码的侧重点不是看向-打印文件内容，而是看向-打印结束。这样原来要第10秒这个时间才能执行打印结束，而老子现在第8秒就能打印结束，足足快了2秒啊！！！想想如果把打印结束这段代码变成请求回复，我的天呐。。。。

　　说了一堆废话，收。

 

3.0异步

　　单线程是什么，我可不管单线程是什么，在我的想象中，单线程就好像一根吸管，吸就完事了。不对，单线程是老哥一人对着吸管一个劲的吸，独享一个管的快乐。那多线程就像是老哥的快乐基友们看见老哥在偷吃，抢走了快乐！一群人你一口，我一口的用吸管吸！你吸的时间长，你占用的cpu的时间就长，其它快乐基友就只能看着你喝。为了合理，咱就排队轮流来。。。扯远了

　　同步，我的理解就是在一个时间间隔内，第一步执行完执行第二步，顺序执行。那异步就是在这一个时间间隔里，我不光执行第一个动作，同时我还在做着另一个动作。

　　那有人要问了，你胡说，你这两段代码都是顺序执行的呀，呵呵。

　　哼，事实上异步处理对于cpu来说也是顺序执行，只是每段代码处理速度快到你以为是同时发生的。想想老哥和基友们，每个人使用吸管的时间足够断，在肉眼上就能够看到一个会变化的人在吸一个吸管的假像。

 

　　具体来说，异步运行机制如下：
　　（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
　　（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
　　（3）一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
　　（4）主线程不断重复上面的第三步。
　　 --------------------- 
　　 原文：https://blog.csdn.net/qq_22855325/article/details/72958345 　

 

　　说的真好！