第一百一十七章 再进一步

方法有两种。第一种用 pre 标签,来说明这个标签中的部分是代码,不作解析,直接显示。比如我们网站中显示的代码就是用这种方式。对于成块代码来说这种方式很方便,但是我们在网页中很多地方只是需要显示出某一个符号,用这种方法就会显得啰嗦。

第二种方法是使用实体字符,我们用另外的一种形式去表达这些符号,比如用   来表示空格。对,就是用这么一串来表示一个空格。大家可以观察一下特点,& 开头,; 结尾。这样的实体字符有很多,我们就不一一列举了。

也就是说我们在向网页元素中显示文本的时候,需要将许多的特殊符号转换为对应的实体字符才能够保证,显示的效果符合我们的预期。这也太麻烦了,这么多实体字符,宝宝记不住啊!

所以这里就有了一个简单的方法,可以帮你完成这个操作,只要将你想要显示的文本给它,它就会转换好,放到对应的元素中。这样子就很方便了,然后我就想到了一个神奇的操作:

如果我们需要查询某一个符号对应的实体字符,是不是可以先把这个符号写入到元素之中,然后再获取这个元素的代码呢?那么来试试看,基本的结构我就不写了,直接写主要代码:

<div id="text"></div><script>$('document').ready(function(){$('#text').text('<');const code = $('#text').html();$('#text').text(code);})</script>

这里我们做了三个操作:

  • 第一步:把一个符号,当做文本,显示在对应元素中;
  • 在这之后,再获取这个元素中的代码,保存入变量;
  • 最后把刚才获取的代码当作文本,再显示在这个元素之中。

于是你就得到了这个符号所对应的实体符号。如果我们可以让这一套操作,和输入框进行联动,那就做出了一个查询符号对应实体符号的小工具。就这么几句话代码,没有理由说难吧?所以再看两遍,仔细理解一下哦~

因为上面所讲到的方法都是双向的操作,所以我们使用 text 方法获取元素的内容时,也会自动将实体符号转换为对应的符号。

现在有了输入输出,就已经可以做许多的事情了(其实以前也可以做,只是输出的不那么人性化而已)。来做点什么呢?可以写一个循环,然后不断的增加……输出 1、2、3、4……

这太简单了,就是输出 2、4、6、8……我打开 Excel,输入几个格子,拉一下自动填充也就出来了。咱们搞点稍微复杂的,写个斐波那契数列出来好了,就是那种每个数字都等于前两个数字之和的。(0、1、1、2、3、5、8、13、……

<div id="output"></div><script>$('document').ready(function(){// 我先设置两个变量,用来代表当前数字之前的两个数字,初始值是 0 和 1。// 注意这里要用变量而不是常量,因为后面我们还要对它们进行修改let a = 0, b = 1;// 然后把这两个值输出出来$('#output').html(a+'<br>'+b);// 就先循环个 100 次吧,反正我自己又不费事// 嗯,但是建议大家最开始数字尽量设置的小一点,免得万一出错卡死了// 注意前面已经有两个数字了,所以我们的计数从 2 开始for(let i=2; i<100; i++){// 先计算出当前的数字,放入常量 cconst c = a+b;// 获取当前输出元素中的代码,放入常量 codeconst code = $('#output').html();// 在获取的代码后面加上换行和计算出的当前数字,然后输出$('#output').html(code+'<br>'+c);// 接下来为后面的循环做准备,我们要把变量 a、b 中的值替换为最新值a = b;b = c;}})</script>

因为篇幅不够,我就不放最终效果了(就是借口,你又拿我怎么样,你咬我呀!

反正结果有一点壮观,而且代码也不复杂呀,上面更多的明明是我写的注释嘛。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百一十七章 再进一步

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏