4.25 HTML学习心得--在网页中制作一个简单的时间跳转系统/水仙化问题

学习目标：

• 用switch方式去完成昨日的判断季节
• 学会去使用for循环以及do while &while语句
• 学会使用date函数，去获取时间属性
• 制作一个时间跳动系统
• string的函数

---

学习内容：

1. 昨天做过一个输入月份让他去判断此时的季节,在判断的部分,使用的是if函数来进行判断,我们使用变量名=document.getElementById(“id名”).value的时候,这里所提取的value值的类型是string字符串型,如果这个时候用简单的switch函数的话,用case 1:来进行判断,此时,value的值是string类型的,而case后面的1类型是整形,两者的类型是不同的,那么判断的时候==一个是整形类型一个是字符串类型,自然是不会相等的,那么就做不到正确的判定了,那么为什么昨天if函数的时候没有这个问题呢,因为js语句里,if里的=自动会吧字符型转换为整形,那现在要用switch的话,就要做到吧value值的类型进行转换,也就是变量名=parseInt(需要转换的变量名) 的函数来进行字符串类型到整形的转换.具体代码如下:当然,已经知道了value的值是字符串类型了,也可以吧case里的值也变成字符串类型.因为js是弱语言,所有可以case里使用字符串类型,具体代码如下:两者的运行结果是一样的.

2. for循环,和c语言之类的其他编程语言是大体相同的,for(初始化语句;条件表达式;控制体语句){循环结构} [明确循环次数使用for]
   执行流程:
   1)首先初始化语句执行一次,给变量赋值
   2)判断条件表达式是否成立,如果成立,就执行循环语句
   3)继续执行控制提语句,++或者–,对自变量自增或者自减
   4)继续判断条件,走上面的流程,直到条件表达式不成立,for结束
   例如:最后输出他1-10的合,也就是55;
   在for里,有一个很经典的应用,循环遍历[就是吧所有元素都去经历一遍]
   例:一个很经典的问题,水仙化问题,什么是水仙化数?水仙化数首先是三位数,其次他的个位数的次方+十位数的次方+百位数的次方=这个数的本身,这样的数,就是水仙化数,那么用for去输出浏览器中的全部水仙化数.
   首先,他是三位数,那么我们for的范围就是100-999,for(i=100;i<=999;i++),现在初始化语句、条件表达式、控制提语句已经写好了，现在就差循环结构了，那么要让他是水仙化数，就要他满足他个位数的次方+十位数的次方+百位数的次方=这个数的本身这个条件，用if去判断，那么首先要去获取他的个位十位百位的数：原理上个十百位的数字获取应该和其他语言里的一样，但是js语言因为他定义变量都是用的var，所有他不会去吧这个求余的结果去强制转换为整数，var自身不仅包含的有int也包含的有float类型，当求余出来的数是float的时候，也会吧小数原原本本写出来，而不是强制转换为int，所以这里用到了js里的强制转换函数math.floor，这个是强制向下取整数，现在个位十位百位的数字我们都分别获取到了b，a，c，那现在只需要在循环结构里加上条件判断就好了，具体代码如下：
   运行结果如下

3. do while&while这两个语句和其他编程类语句大抵相同，也无需多说，记住，do while会保底运行一次就可以了。具体代码如下：
   

4. 当我们需要获取系统时间的话，可以去使用date对象来获取，date（），直接让var a=date（），那么此时我们的a的值就是此时系统的标准时间，具体示范如下：

5. 运行结果如下：
   我们可以看到，此时时间是固定的样式，如果此时想去让他成为一个xx年xx月xx日 xx：xx：xx的话，就应该去获取他系统 时间里的各个部分的值，然后再对他进行拼接，具体代码如下:
   分别为获取当前系统时间的年，月，日，小时，分钟【秒的话使用a.getSeconds()】，让我们来运行一下看看结果。年理论上说这个值应该是2022，而此时却是122，这是因为getyear（）因为他要从1900年开始计算,那么2022-1900,就是122也就是说,getyear获得的值其实是当前年份到1900年的差值,那要获得正确的年份,就应该用getFullYear()函数,而月份，也少了1的值，这是因为计算机中是用0-11来区分月的，那么原本的1月就显示的0，原本的4月就显示成了3，所以我们应该给月份的value来加上一个1；这样更改一下代码的话，运行一下代码：可以看到，符合我们的预期。

6. 但是如果我们想去做一个可以一直跳动的时间，应该怎么做呢？刚刚上述的方法，只能获取到当时的时间值，要是想看新的值，就要去对网页进行一个刷新，如何让这个代码自己进行时间的跳动，首先我们要知道任何标签都有两个属性innerHTML和innerText，这两个属性中innerHTML是可以在js中加入我们常用的html标签进行渲染，但是innerText只能是普通的文本，就算在innerText里加上html标签，他也只会原封不动的吧html标签给输出出来，而不是去对文本进行渲染，那么让body里的某个标签获得js里的内容，就只需要更改需要更改标签的属性，具体操作就和昨天获取 input 里的 value的原理是相同的，a=document.getElementById(标签id),这样我们的变量a就获取了标签id的全部属性，然后a.innerHTML就是此时标签id的innerHTML属性了，现在吧上一步各个部分的年月日之类的属性拼接起来，再赋值给a.innerHTML，具体代码如下：
   . 那么，现在需要让他可以每秒进行一次，来让时间动起来，可以用到window.setInterval(“函数名”,时间【ms】)，这个函数就可以让每隔一定时间去运行一次函数，吧我们上述的内容放到一个函数里，然后让他每隔1s去运行一次，具体如下:
   那么一个简单的时间跳动效果就做出来了。
   7.js语言中，string对象，指的就是字符串数据值
   格式 ：
   创建一个js的字符串对象
   var 对象名 = new String(“字符串值”);
   表示一个字符串的简写格式
   var 对象名 = “字符串值” //但是内存的分配是不一样的
   其他常用函数如下：
   
   8.函数方面则和其他编程类语言大抵相同，没有什么特殊的地方，下图是一个简单的自定义函数以及他的调用方法: