JavaScript学习第四周（完结）

2022-04-04 13:35:37 阅读：210 来源： 互联网

标签：document weight form JavaScript height msg 完结 var 四周

表单对象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，效果是显示与隐藏。

标签：document,weight,form,JavaScript,height,msg,完结,var,四周
来源： https://www.cnblogs.com/nekodream/p/16098908.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript学习 第四周（完结）