JavaScript学习第四周（完结）

2022/4/4 14:19:02

编程Tag： javascript form var height document weight msg 完结四周

本文主要是介绍JavaScript学习第四周（完结），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

表单对象form

HTML的表单对象（按钮，选项等）可以当做js的对象来处理。

form	作用
button	按钮
checkbox	多选
radio	单选
reset	将这个页面所有互动过的部品重置
submit	提交
text	文本条？？
hidden
passwd	密码
textarea
select	选项（伴随option使用）

使用时，把这些东西夹在“< form ></ form >”里面，并且需要设置好form的name属性。

举个例子

    <body>
        <form name="weightForm">
        男性:<input type="radio" name="sex" checked>//checked是默认选中之意。
        女性:<input type="radio" name="sex"><br>
        身高:<input type="text" name="height">cm<br>
        <input type="button" value="计算" name="calc"><br>
        标准体重: <input type="text" name="weight" readonly>//readonly是只读之意，意味着这个文本框只能用来显示。
        
        </form>
        
    </body>

如果想指定某一个值，需要按这样的顺序：
document.form名.部品名.value

例如，document.weightForm.height.value 这样就指定了身高这个值。

radio单选与if判断的联动。

多个radio可以拥有同一个name。但是同name的radio中只能有一个被勾选。
使用if条件判断时检查checked属性:
如果checked，则返回值为1.

document.form名.radio名[序号].checked

    <script>
            var weight;
            if(document.weightForm.sex[0].checked){//[]内的数字是第几个的意思，0是第一个。 
                weight = (height - 80)*0.7;
            }else{
                weight = (height-70)*0.6;
            }
    </script>

结合起来的一个小程序：

    <head>
    <script>
        function stdWeight(){
            var height,weight;
            height = Number(document.weightForm.height.value);
            //把“height输入框内的值数字化。”
            
            if(document.weightForm.sex[0].checked){//[]内的数字是第几个的意思，0是第一个。 
                weight = (height - 80)*0.7;
            }else{
                weight = (height-70)*0.6;
            }
            document.weightForm.weight.value = weight;
        }
    </script>
    </head>

    <body>
        <form name="weightForm">
        男性:<input type="radio" name="sex" checked>//checked是默认选中之意。
        女性:<input type="radio" name="sex"><br>
        身高:<input type="text" name="height">cm<br>
        <input type="button" value="计算" name="calc" onclick="stdWeight()"><br>//点击时启用这个函数。
        标准体重: <input type="text" name="weight" readonly>
        
        </form>
    </body>

this.form：快捷短语

在< form>之间，可以使用this.form来代指【document.form名】
函数的自变量也可以是form，所以可以使用这个小技巧来避免繁琐的文字。
通过用自变量指定this.form并调用函数，可以从表单层次对表单的各个部件进行指定。(不再需要document层级)

于是上一个小程序可以写为：

    <script>
        function stdWeight(myForm){//这个函数的自变量是一个form。
            var height,weight;
            height = Number(myForm.height.value);
            if(myForm.sex[0].checked){
                weight = (height - 80)*0.7;
            }else{
                weight = (height-70)*0.6;
            }
            myForm.weight.value = weight;
        }
    </script>

 <input type="button" value="计算" name="calc" onclick="stdWeight(this.form)"><br>

具体体现在：document.weightForm --> this.form/myForm

setTimeout 方法

是window对象的方法
在指定的时间后执行处理(仅一次)

        <script>
            var timer;
            timer = window.setTimeout("alert('5秒了')",5000)//毫秒为单位
        </script>

以上程序的结果是：五秒后弹出一个窗口。

用递归可以完成一些关于时间的操作，例如：实时显示时间。

实时显示时间

<script>
        var timer;
        var i;
        window.onload = dClock;//用于开幕雷击
        function dClock(){
            var now = new Date();
            var sec = now.getSeconds();
            if(sec < 10){
                sec += "0";

            }
            document.clockForm.sec.value = sec;//赋值给部件，让它显示。
            
            timer = setTimeout("dClock()",1000);//再执行一遍自己咯
        }
    </script>

    <body>
        <form name="clockForm">
            <input type="text" name="sec" size="2">秒
        </form>
    </body>

这样就能实时显示秒。

计算经过多少秒了

    <script>
        var timer;
        var i = 0;
        window.onload = dClock;
        function dClock(){
            i++;
            document.clockForm.sec.value = i;
            timer = setTimeout("dClock()",1000);
        }
    </script>

    <body>
        <form name="clockForm">
           经过 <input type="text" name="sec" size="2">秒
        </form>
    </body>

每过一秒，i++并且再运行自己一次。

clearTimeout方法

中途停止计时器
对于上一个“计算经过多少秒”的程序，只需加几行代码，即可设计一个停止按钮。

    function stopClock(){
        clearTimeout(timer);
    }

    <input type="button" name="stop" onclick="stopClock();">

简单摇号机

不断给出随机数，然后结合暂停即可。

<script>
        var timer;
        var i = 0;
        window.onload = dClock;
        function dClock(){
            i = Math.floor(Math.random()*100); //给i赋值一个随机数
            document.clockForm.sec.value = i;  //让name为sec的text部品的值为i。
            timer = setTimeout("dClock()",10); //每10毫秒递归一次。
        }

        function stopClock(){
            clearTimeout(timer);//给按钮用的，就是暂停上个函数的setTimeout。
        }
    </script>

    <body>
        <form name="clockForm">
            <input type="text" name="sec" size="2">
            <input type="button" name="stop" value="暂停" onclick="stopClock();">
        </form>
    </body>

Image 图像

在html学习的基础上加一些小程序，但是我们先复习一下< img>吧

    <img src="1.jpg" alt="jaha" name="cat" height="300" onclick="changeImg()">
    src:存储图片路径
    name：此图片的name属性
    height：高度
    alt：在图片丢失时以文字替代。
    onclick：事件，即点击此图片后可以运行一个程序。

点击切换图片

这里给出两个图片，分别为1.jpg 2.jpg。那么我们就可以用加号来链接文件名（注意注释部分），以达到指定不同图片的效果
这里只给出函数部分。

    <script>
        var num = 1;
        function changeImg(){
            document.cat.src = num + ".jpg";//此处是更改name为cat那个图片的scr属性。当num不同时，自然指定了不同的图片。
            num++;
            if(num == 3)
                num = 1;
            
        }
    </script>

DOM 动态改变HTML

如何在不刷新网页的情况下改变已有的html元素（文字，图片等）？

id属性

在HTML部分，需要事先指定id准备。

<p id="msg"> 小梦酱今天的枪信佛吗 </p>

相当于给p中的信息附上了一个id，叫做msg。

getElementById

是document对象，获取指定id的属性的方法。

var msg = document.getElementById("msg");

捕捉id为msg的html元素，并赋值给msg变量。

innerHTML

可以获取和改变元素内的HTML。（用于script部分）

msg.innerHTML = "不行，小梦酱，<span style='color:red'>该图图辣!!!</span>";

结合一下，改变文字

结合以上三个知识，我们给出最终的程序：

<script>
        
        function lick(){
            var msg = document.getElementById("msg");
            msg.innerHTML = "不行，小梦酱，<span style='color:red'>该图图辣!!!</span>";
        }
    </script>

    <body>
        <p id="msg">小梦酱今天的枪信佛吗 </p>
        <button onclick="lick()">不行</button>
    </body>

此程序的效果为：点击一下button，上面的文字将被替换。

动态操作CSS

以下操作：

    var msg = document.getElementById("msg");
    msg.style.textAlign = "center";

执行完毕后，id为msg的html元素的style将会改变。

简单补充一个属性：可视（visibility）

visibility有两个值：visible与hidden，效果是显示与隐藏。

这篇关于JavaScript学习第四周（完结）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

JavaScript学习 第四周（完结）