前端--Javascript--练习

定时器练习：

需求：点击开始 input框显示当前时间，点击停止停止当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
    <!--先将时间显示到input框-->

</head>
<body>

<!--<input type="text">-->
<input type="text" id="displayTime" >
<!--<input type="button" value="start">-->
<input type="button" value="start" id="start">
<!--<input type="button" value="stop" >-->
<input type="button" value="stop" id="stop">


<script>
    /*
    // 先获取本地时间，并打印
    var localTime = new Date();
    console.log(localTime);
    // 修改时间显示方式
    console.log(localTime.toLocaleString());
    */
    // 最终时间变量格式如下
    // var localTime = new Date().toLocaleString();
    // console.log(localTime);

    // 接着修改input框的属性，因为要找到它，所以我们给显示框加一个id，方便查找
    // var dTEle = document.getElementById('displayTime'); // 获取到那个input
    // console.log(dTEle);
    // dTEle.value = localTime; // 给标签赋值
    /*
    //接着绑定开始按钮触发事件；需要找到它所以定义一个ID
    var startEle = document.getElementById('start');
    console.log(startEle);
    startEle.onclick = function () {
        var dTEle1 = document.getElementById('displayTime'); // 获取到那个input
        clearInterval(dTEle1);
        console.log(dTEle1);
        dTEle1.value = localTime; // 给标签赋值
    }
    */
    /*
    // 因为点开始获取的时间和给input是同样的代码，所以我们定义一个函数放到里面
    function lTime() {
        var dTEle = document.getElementById('displayTime'); // 获取到那个input
        console.log(dTEle);
        dTEle.value = localTime; // 给标签赋值
    }
    */
    /*
    var startEle = document.getElementById('start');
    console.log(startEle);
    startEle.onclick = function () {
        lTime();
    }
    */
    // 点开始后，确实显示时间了，但是时间不会变，所以我们用到了间隔运行 setInterval();
    var test;
    var startEle = document.getElementById('start');
    console.log(startEle);
    startEle.onclick = function () {
        localtime();
        test = setInterval("localtime()",1000);
    };
    // 进入console 发现已经自动刷新了，但是时间没变，那么我们就要把之前的数值清除，判断下如果定义的变量等于undefined就赋值，如果不是就跳过；
    // 修改函数
    var t;
    function localtime(){
        var newtime = new Date().toLocaleString();
        var display = document.getElementById('displayTime');
        if (t === undefined){
            display.value = newtime;
        }
    };
    // 发现可以显示时间了，但是停止按钮不生效
    //首先找到按钮，然后绑定事件，接着在绑定事件里取消间隔运行
    // 发现点击不生效，根据clearInterval()方法，必须提供一个变量，所以定义了一个全局变量对setInterval()进行赋值；
    var stopEle = document.getElementById("stop");
    stopEle.onclick=function () {
        clearInterval(test);
    }

</script>


</body>
</html>

定时器

搜索框示例：

需求：就像JD的搜索框，光标未进去之前会有个默认值，点击也是可以搜索的，光标进入后清空原来的值，然后输入内容进行搜索，若没输入值，则在光标离开后恢复之前显示的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索框示例</title>

</head>
<body>
<!--就像JD的搜索框，光标未进去之前会有个默认值，点击也是可以搜索的，光标进入后清空原来的值，然后输入内容进行搜索，若没输入值，则在光标离开后恢复之前显示的值-->
<input type="text" id="search" value="请输入你要查询的内容">
<input type="button" id="submit" value="Submit">

    <script>
        // 先对搜索框做事件绑定
        var searchEle = document.getElementById("search");

        searchEle.onfocus = function () {
            searchEle.value="";
        }
        searchEle.onblur= function () {
            if (!searchEle.value.trim()){
                searchEle.value="请输入你要查询的内容";
            }
        }
    </script>
</body>
</html>

搜索框示例

select 联动联系

需求：选择省份，旁边的选择栏显示的都是所选省份内的市级

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>select联动</title>

</head>
<body>
<!--比如：选中广东省，会显示广东省内的市的名称-->
<!--<script>-->
    <!--selectFoo();-->
<!--</script>-->
<select name="" id="father">
    <option>--请选择--</option>
</select>
<select name="" id="son">
    <option>--请选择--</option>
</select>

    <script>
        // function selectFoo() {
            var selectF=document.getElementById("father");;
            provinceList = {0:"广东省",1:"北京市"};
            var cityList = {0:["ShenZhen","DongGuan","GuangZhou"],1:["DaXing","DongCheng","PingGu"]};

            for (var i in provinceList){
                var optionEle = document.createElement("option");
                optionEle.value=i;
                optionEle.innerHTML=provinceList[i];
                selectF.appendChild(optionEle);
            };

            selectF.onchange=function () {
                var areas = cityList[this.value];
                console.log(areas);
                //找到子标签
                var selectS = document.getElementById("son");
                selectS.innerHTML ="--请选择--";
                // selectS.appendChild(sonOptionEle);
                if (areas === undefined){
                    var sonOptionEle = document.createElement("option");
                    sonOptionEle.innerHTML="--请选择--";
                    selectS.appendChild(sonOptionEle);
                } else {
                    for (var ii = 0;ii<areas.length;ii++){
                    var sonOptionEle = document.createElement("option");
                    sonOptionEle.innerHTML=areas[ii];
                    selectS.appendChild(sonOptionEle);
                }

                }

                //发现找第二个的时候 旧的数据还在，要清除旧的数据,在执行循环前，先重新赋值一次；

            }


        // };

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

select 联动

posted on 2019-09-05 14:55 Jerry-Wang 阅读(105) 评论(0) 收藏举报