前端笔记之BOM&DOM编程

最新推荐文章于 2024-09-05 11:41:54 发布

协手共建美好家园

最新推荐文章于 2024-09-05 11:41:54 发布

阅读量149

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/XIYECODE/article/details/103737068

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
  BOM编程：对浏览器的各种对象进行操作
    window：浏览器窗体对象
        location：页面对象
            如 location.href可以获取地址栏地址，对赋值则是跳转指定地址页面
               location.reload()重载当前页面，类似刷新
        history：浏览器历史记录
            如 history.forward()页面前进
               history.back()页面后退
               history.go(n)前进或后退n个页面，n为正前进，为负后退
        计时器：
            setInterval(函数名, 间隔毫秒数)：每个指定时间执行函数，即“连续”执行
            setTimeout(函数名, 间隔毫秒数)：隔指定时间后执行函数，仅且执行一次，后面不会再执行
            clearInterval(计时器)、clearTimeout(计时器)：清除对应计时器
        提示框：
            alert("提示信息")：只有提示信息内容
            prompt("提示信息带输入框", "输入框默认值")：返回输入框内容
            confirm("提示信息带输入框")：返回值---确认是true，取消是false

  DOM编程：对元素节点进行操作
-->
<div style="text-align: center">
    <div id="dateTime">时间显示器</div><hr>
    <input type="button" id="start" value="开始"><input type="button" id="stop" value="停止" disabled>
</div>
<script>
    var timeout = setTimeout(function () {
        /*window.location.reload();*/
        alert(window.location.href);
        /*clearTimeout(timeout);*/
    }, 1000);

    var interval;
    var start = document.querySelector("#start");
    var stop = document.querySelector("#stop");
    start.onclick = function (ev) {
        this.disabled = true;
        stop.removeAttribute("disabled");
        document.querySelector("#dateTime").innerHTML = new Date().toLocaleString();
        interval = setInterval(function () {
            document.querySelector("#dateTime").innerHTML = new Date().toLocaleString();
        }, 1000);
    };
    stop.onclick = function (ev) {
        clearInterval(interval);
        this.disabled = true;
        start.removeAttribute("disabled");
    };

    alert(prompt("返回输入框内容", "1234"));
    alert(confirm("确认是true，取消是false"));
</script>
</body>
</html>

协手共建美好家园

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端笔记之BOM&DOM编程

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!-- BOM编程：对浏览器的各种对象进行操作 window：浏览器窗...
复制链接

扫一扫