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

 (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>


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

  • 4
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值