JavaScript学习 第四周(完结)

2022/4/4 14:19:02

本文主要是介绍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学习 第四周(完结)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程