JavaScript简单案例（1）

最新推荐文章于 2024-08-23 16:53:29 发布

崔昕阳

最新推荐文章于 2024-08-23 16:53:29 发布

阅读量3.2k

点赞数 5

分类专栏： Web 文章标签： JS案例

本文链接：https://blog.csdn.net/Cuixinyang19_/article/details/80267991

版权

Web 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一些简单的JS案例，有利于巩固基础

1.动态显示时间
在网页上动态显示当前时间
要点：- 定时器 setInterval：某个时间内重复执行js代码

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body> 
    <div id="div1">
    </div>
    <script type="text/javascript">
        function getD1()
        {
            //获取时间
            var date = new Date();
            //格式化
            var d1 = date.toLocaleString();
            //获取div
            var div1 = document.getElementById("div1");
            div1.innerHTML = d1;
        }
        //使用定时器实现一秒写一次时间
        setInterval("getD1()",1000);
    </script>
 </body>
</html>

运行结果：
这里写图片描述
2.全选练习
实现全选，全不选，反选功能
要点：- 属性： checked=true：复选框是选中，false是不选中

<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
    <input type="checkbox" id="boxid" onclick="selAllNo()"/>全选/全不选
    </br>
    <input type="checkbox" name="love"/>篮球
    <input type="checkbox" name="love"/>羽毛球
    <input type="checkbox" name="love"/>排球
    <input type="checkbox" name="love"/>乒乓球
    </br>
    <input type="button" value="全选" onclick="selAll()"/>
    <input type="button" value="全不选" onclick="selNo()"/>
    <input type="button" value="反选" onclick="selOther()"/>
    <script type="text/javascript">
        function selAllNo()
        {
            /*
                1.得到复选框
                2.判断是否选中
            */
            var box1 = document.getElementById("boxid");
            if(box1.checked == true)
            {
                selAll();
            }
            else{
                selNo();
            }
        }
        function selOther()
        {
            loves = document.getElementsByName("love");
            for(var i=0; i<loves.length; i++)
            {
                love1 = love[i];
                if(love1.checked == true)
                {
                    love1.checked = false;
                }
                else
                {
                    love1.checked = true;
                }
            }
        }
        //实现全选的操作
        function selAll()
        {
            /*
                1.获取要操作的复选框
                    -使用getElementsByName()
                2.返回是数组
                    -判断复选框是否选中
                    checked = true
                    -遍历数组
            */
            var loves = document.getElementsByName("love");
            for(var i=0; i<loves.length; i++)
            {
                var love1 = love[i];
                love1.checked = true;
            }
        }
        function selNo()
        {
            var loves = document.getElementsByName("love");
            for(var i=0; i<loves.length; i++)
            {
                love1 = loves[i];
                love1.checked = false;
            }
        }

    </script>
 </body>
</html>

运行结果：
这里写图片描述
3.下拉列表左右选择
要点：
- select下拉列表里面属性 multiple：让下拉框里面的内容都显示出来
- 属性：selected=true：option是选中，false：option不是选中

<!doctype html>
<html>
 <head>
  <title>HTML示例</title>
  <style type="text/css">

  </style>
 </head>
 <body>
    <div id="div1" style="float:left">
        <div>
            <select id="selid1" multiple="multiple" style="height:100px;width:100px">
                <option>AAAA</option>
                <option>BBBB</option>
                <option>CCCC</option>
                <option>DDDD</option>
            </select>
        </div>
        <div>
            <input type="button" value="选中添加到右边" onclick="selToRight()"/>
            <br>
            <input type="button" value="全部添加到右边" onclick="allToRight()"/>
        </div>
    </div>
    <div>
        <div>
            <select id="selid2" multiple="multiple" style="height:100px;width:100px">
                <option>EEEE</option>

            </select>
        </div>
        <div>
            <input type="button" value="选中添加到左边" onclick="selToLeft()"/>
            <br>
            <input type="button" value="全部添加到左边" 
            onclick="allToLeft()"/>
        <div>
    </div>
    <script type="text/javascript">
        function selToRight()
        {
            /*
                1.获取select1里面的option
                2.判断option是否被选中
                3.如果选中，添加到右边
                4.得到select2
                5.添加选择的部分
            */
            var select1 = document.getElementById("selid1");
            var select2 = document.getElementById("selid2");
            var options1 = select1.getElementsByTagName("option");
            for(var i=0; i<options1.length; i++)
            {
                var option1 = options1[i];
                if(option1.selected == true)
                {
                    select2.appendChild(option1);
                    i--;
                }

            }
        }

        function allToRight()
        {
            var select1 = document.getElementById("selid1");
            var select2 = document.getElementById("selid2");
            var options1 = select1.getElementsByTagName("option");
            for(var i=0; i<options1.length; i++)
            {
                var option1 = options1[i];
                select2.appendChild(option1);
                i--;
            }
        }

        function selToLeft()
        {
            /*
                1.获取select2里面的option
                2.判断option是否被选中
                3.如果选中，添加到右边
                4.得到select1
                5.添加选择的部分
            */
            var select1 = document.getElementById("selid1");
            var select2 = document.getElementById("selid2");
            var options1 = select2.getElementsByTagName("option");
            for(var i=0; i<options1.length; i++)
            {
                var option1 = options1[i];
                if(option1.selected == true)
                {
                    select1.appendChild(option1);
                    i--;
                }

            }
        }

        function allToLeft()
        {
            var select1 = document.getElementById("selid1");
            var select2 = document.getElementById("selid2");
            var options1 = select2.getElementsByTagName("option");
            for(var i=0; i<options1.length; i++)
            {
                var option1 = options1[i];
                select1.appendChild(option1);
                i--;
            }
        }


    </script>
 </body>
</html>