定时器相关案例_省市二级联动_jQuery

最新推荐文章于 2024-05-13 08:00:00 发布

Levana_123

最新推荐文章于 2024-05-13 08:00:00 发布

阅读量127

点赞数

分类专栏： Java Web开发

本文链接：https://blog.csdn.net/qq_41541451/article/details/112302525

版权

Java Web开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

2021-01-07

1、BOM模型

BOM 是 Browser Object Model ，浏览器对象模型。就是将浏览器的内容抽象成一个个的对象。

其中最为核心的是 window 对象，代表整个浏览器窗口。而窗口中包含其他的对象：

document ：代表 html 文档

history ：代表浏览的历史

location ：代表浏览的网页地址

screen ：代表浏览器的屏幕信息等

window定时器

var timer = window.setInterval(code,mseconds); 每经过多长时间（毫秒）重复执行 code ，返回的是定

时器的名称。

window.clearInterval( 定时器名称 ) 取消重复执行的定时器

var timer = window.setTimeout(code,delay): 从该方法调用后的多少毫秒之后（延迟），执行 code 一次。

案例：

1、显示当前时间：

step1、需求分析：点击开始按钮：每隔1秒钟（setInterval）打印当前的时间（DOM编程）。时间借助JS的内置对象 Date。点击停止按钮：清除定时器

Date获取当前时间：

var now = new Date();
document.querySelector("#show").innerHTML = now.toLocaleString();

点击结束按钮，清除计时器

step2、代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        onload = function (ev) {
            var timer;
            var sbtn = document.querySelector("#start");
            sbtn.onclick = function () {
                //开始计时
                timer = setInterval(showtime,1000);
            }
            var ebtn = document.querySelector("#end");
            ebtn.onclick = function () {
                //停止计时
                clearInterval(timer);
            }
        }
        function showtime() {
            //获取当前时间
            var now = new Date();
            document.querySelector("#show").innerHTML = now.toLocaleString();
        }
    </script>
</head>
<body>
<input id="start" type="button" value="开始"/>
<input id="end" type="button" value="结束"/>
<hr/>
<span id="show"></span>
</body>
</html>

2、验证码倒计时：

step1、需求分析：点击发送验证码：1、按钮变为不可用；2、改变文本内容（按秒开始倒计时）

倒计时结束时：1、清除倒计时，2、按钮转变为可用，3、文字变为重新发送。

step2、代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        onload = function (ev) {
            var timer;
            //给按钮注册点击事件
            var btn = document.querySelector("#btn1");
            btn.onclick = function (ev2) {
                //将按钮变为不可用
                this.disabled = true;
                //开启倒计时
                timer = setInterval(changeText,1000);
            }
            var time = 3;
            function changeText() {
                time--;
                //alert(time);
                document.querySelector("#btn1").value = time+"秒";
                if(time==0){
                    //结束倒计时
                    clearInterval(timer);
                    //将按钮变为可用
                    btn.disabled = false;
                    //文字改为重新发送
                    btn.value = "重新发送";
                    //将时间初始值改为3
                    time=3;
                }
            }
        }
    </script>
</head>
<body>
验证码：<input size="8"/><input type="button" id="btn1" value="发送验证码"/>
</body>
</html>

3、轮播图：

step1、需求分析：图片名称存在规律的，从0-5，每隔一秒钟改变图片的链接即可（从0-5或5-0），到达最后一张图片，重新开始。

step2、具体代码实现：注意index的取值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        onload=function (ev) {
            var index=1;
            function changeimg() {
                document.querySelector("#img").src="images/"+index+".png";
                index++;
                if(index==4) {
                    index = 1;
                }
            }
            setInterval(changeimg,1000);
        }
    </script>
</head>
<body>
<img id="img"/>
</body>
</html>

4、定时显示图片

window.setTimeout(code, delay)delay延迟的时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        onload = function (ev) {
            function showimage() {
                document.querySelector("#image").src="images/1.png";
            }
            setTimeout(showimage,3000);
        }
    </script>
</head>
<body>
本页面3秒后，会显示图片
<img id="image"/>
</body>
</html>

window弹出框

window.alert(" 消息 ") ：警告框，阻塞式。

var returnValue = window.confirm(" 确认消息提示 "): 确认提示框。有一个确定按钮和一个取消按钮。点

击了确定，返回 true ，否则返回 false 。

var returnValue = window.prompt(" 提示信息 "," 默认内容 ") ：用户输入框。用户输入的内容就是方法的

返回值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        onload = function (ev) {
            document.querySelector("#btn1").onclick = function () {
                alert("警告框");
            }
            document.querySelector("#btn2").onclick = function () {
                var sure = confirm("确定进行下一步的操作嘛");
                sure?alert("您点击的是确定"):alert("你点击的是取消");
            }
            document.querySelector("#btn3").onclick = function () {
                var value = prompt("请输入年龄");
                alert("您输入的年龄是："+value);
            }
        }
    </script>
</head>
<body>
<input id="btn1" type="button" value="按钮1"/>
<input id="btn2" type="button" value="按钮2"/>
<input id="btn3" type="button" value="按钮3"/>
</body>
</html>

window其他对象

1、location：表示地址

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        onload = function (ev) {
            document.querySelector("#btn1").onclick = function () {
                alert(location.href);
            }
            document.querySelector("#btn2").onclick = function () {
                location.href = "http://www.baidu.com";
            }
        }
    </script>
</head>
<body>

</body>
<input type="button" id="btn1" value="获取链接地址"/>
<input type="button" id="btn2" value="访问百度网址"/>
</html>

2、history 表示页面的访问历史

history.back()：后退

history.forward()：前进

点击访问页面2后，有了访问历史，才能点击前进和后退

3、screen

screen-availwidth:可用的屏幕宽度；

screen-availheight:可用的屏幕高度；

4、Document

2、js实际案例

1、省市二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        onload = function (ev) {
            var pros = ["北京市","山东省","广东省"];
            var citys = {
                "北京市":["东城区","西城区","朝阳区","丰台区","石景山区","海淀区","顺义 区","通州区","大兴区","房山区","门头沟区","昌平区","平谷区","密云区","怀柔区","延庆区"],
                "山东省":["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊 市","济宁市","泰安市","威海市","日照市","滨州市","德州市","聊城市","临沂市","菏泽市"],
                "广东省":["广州市","深圳市","珠海市","汕头市","佛山市","江门市","湛江 市","茂名市","肇庆市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山 市","潮州市","揭阳市","云浮市"]
            };
            var proObj = document.querySelector("#province");
            var cityObj = document.querySelector("#city");
            //给两个select赋初始值,select的初始值只能是option中的value
            proObj.innerHTML = "<option value=''>-省份-</option>";
            cityObj.innerHTML = "<option value=''>-城市-</option>";
            //显示所有的省份
            for(var i in pros){
                proObj.innerHTML += "<option value='"+pros[i]+"'>"+pros[i]+"</option>";
            }
            proObj.onchange = function () {
                //重置city，每次换省份，city不会累加
                cityObj.innerHTML = "<option value=''>-城市-</option>";
                var cityValue = citys[this.value];//this.value是省份；cityValue是key的集合
                for(var i in cityValue){
                    cityObj.innerHTML +="<option value='"+cityValue[i]+"'>"+cityValue[i]+"</option>";
                }
            }
        }
    </script>
</head>
<body>
地址：<select id="province" name="province"></select>
<select id="city" name="city"></select>
</body>
</html>

有点迷糊。。。

3、jQuery

1、jQuery简介

jQuery 是一套 Javascript 函数库。 jQuery 的宗旨 “Write less ， do more” 。提高 js 的编码效率。

2、jQuery使用步骤

1、引用

双标签，直接拖

2、页面加载

3、DOM对象和jQuery对象转换

DOM 对象：通过 document.getXXXX 或 querySelector 获取的对象就是 DOM 对象。 DOM 对象只能使用

dom 提供的方法。比如获取 value 属性的值，对象 .value 。

jQuery 对象：通过 jQuery 的方式获取的对象就是 jQuery 对象。 jQuery 对象只能使用 jQuery 的方法。比如

获取对象 value 的值，对象 .val()

DOM 对象转换为 jQuery 对象，只需要将对象用 $(DOM) 包括起来，就变为了 jQuery 对象

jQuery 对象转成 DOM 对象，所谓的 jQuery 对象实际上就是将 DOM 对象变为了一个数组。转换为 DOM 对

象，只需要 jquery 对象 [0] 或 jQuer 对象 .get(0);

4、jQuery选择器

Levana_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器相关案例_省市二级联动_jQuery

2021-01-071、BOM模型BOM是Browser Object Model，浏览器对象模型。就是将浏览器的内容抽象成一个个的对象。其中最为核心的是window对象，代表整个浏览器窗口。而窗口中包含其他的对象： document：代表html文档history：代表浏览的历史location：代表浏览的网页地址screen：代表浏览器的屏幕信息等window定时器var timer = window.setInterval(code,mseconds)
复制链接

扫一扫

专栏目录