编程语言
首页 > 编程语言> > JavaScript学习 第四周(完结)

JavaScript学习 第四周(完结)

作者:互联网

表单对象form

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

举个例子

    <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.weightForm.height.value 这样就指定了身高这个值。

radio单选与if判断的联动。

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:快捷短语

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

    <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 方法

        <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 图像

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

点击切换图片

    <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属性

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

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

getElementById

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

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

innerHTML

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有两个值:visible与hidden,效果是显示与隐藏。

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