JavaWeb基础总结之Js几个经典的小案例

最新推荐文章于 2024-06-20 14:26:28 发布

Is-Me-HL

最新推荐文章于 2024-06-20 14:26:28 发布

阅读量2.6k

点赞数 4

分类专栏： JavaWeb 文章标签： Js之动态获取系统时间 Js之复选框的选择 Js之省市联动 Js之小案例

本文链接：https://blog.csdn.net/m0_37265215/article/details/82954951

版权

JavaWeb 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

（1）动态显示当前系统时间

<body>
    <p>当前时间：<span id="times"></span></p>
</body>
<script>
    function get(){
        var date=new Date();
        /** Returns a value as a string value appropriate to the host environment's current locale. */
        var d1=date.toLocaleString();
        var times=document.getElementById("times");
        times.innerHTML=d1;
    }
    setInterval("get()",1000);
</script>

（2）复选框的全选/全不选/反选

<body>
    <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()">
</body>
<script>
    function selAll(){
        var all=document.getElementsByName("love")
        for(var i=0;i<all.length;i++)
        {
            var a=all[i];
            a.checked=true;
        }
    }
    function selNo(){
        var all=document.getElementsByName("love")
        for(var i=0;i<all.length;i++)
        {
            var a=all[i];
            a.checked=false;
        }
    }
    function selOther(){
        var all=document.getElementsByName("love")
        for(var i=0;i<all.length;i++){
            var a=all[i];
            a.checked=!a.checked;
        }
    }
</script>

（3）省市联动

<body>
    <select id="country" onchange="add1(this.value)">
        <option value="0">请选择</option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="德国">德国</option>
        <option value="日本">日本</option>
    </select>
    <select id="city"></select>
</body>
<script>
    var arr=new Array(4);
    arr[0]=["中国","南京","抚州","上饶","日客则","哈密","Is-Me-HL"]
    arr[1]=["美国","华盛顿","迪特鲁","纽约","休斯顿"]
    arr[2]=["德国","慕尼黑","柏林","Is-Me-HL","Is-Me-HL"]
    arr[3]=["日本","东京","北海道","大阪","神户"]

    function add1(val) {
        //创建一个数组存储
        var city1=document.getElementById("city")
        var options11=city1.getElementsByTagName("option");
        for(var m=0;m<options11.length;m++){
            var op=options11[m];
            city1.removeChild(op);
            m--;
        }
        for(var i=0;i<arr.length;i++){
            var arr1=arr[i]
            var firstValue=arr1[0]
            if(firstValue==val){
                for(var j=1;j<arr1.length;j++){
                    var value1=arr1[j]
                    var option1=document.createElement("option")
                    var text1=document.createTextNode(value1);
                    option1.appendChild(text1);
                    city1.appendChild(option1);
                }
            }
        }
        // alert(val)
    }
</script>

注：以上文章仅是个人学习过程总结，若有不当之处，望不吝赐教。

Is-Me-HL

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb基础总结之Js几个经典的小案例

（1）动态显示当前系统时间&lt;body&gt; &lt;p&gt;当前时间：&lt;span id="times"&gt;&lt;/span&gt;&lt;/p&gt;&lt;/body&gt;&lt;script&gt; function get(){ var date=new Date(); /** Retur
复制链接

扫一扫