• 每日学到 43 - JavaScript中BOM和DOM


    目录

    1.JavaScript弹窗

    2.location对象

    3.window

    4.获取HTML元素

    5.DOM改变HTML

    6.DOM改变CSS

    7.JavaScript计时事件

    8.今年国庆节倒计时代码


    1.JavaScript弹窗

         警告框
            alert()
                用于确保用户可以得到某些信息

        确认框
            confirm()
                用于验证是否接受用户操作

        提示框
            prompt()
                用于提示用户在进入页面前输入某个值

    2.location对象

        location.href
            返回当前页面的 URL

        location.pathname
            返回 URL 的路径名

        location.assign()
            加载新的文档

    3.window

        window.open("https://www.baidu.com");

        window.close();

    4.获取HTML元素

        document.getElementById
            通过id属性获取对象

        document.getElementsByTagName
            通过标签名获取对象

        document.getElementsByClassName
            通过class属性获取对象

    5.DOM改变HTML

        document.write()
            改变 HTML 输出流

         对象.innerHTML=新的 HTML
            改变 HTML 内容

        对象.attribute=新属性值
            改变 HTML 属性

    6.DOM改变CSS

        对象.style.property=新样式
            通过id属性获取对象
            document.getElementById("changePic").style.width="100px";

    7.JavaScript计时事件

        setInterval()
            间隔指定的毫秒数不停地执行指定的代码

        clearInterval()
            用于停止 setInterval() 方法执行的函数代码

        setTimeout()
            暂停指定的毫秒数后执行一次指定的代码

        clearTimeout()
            用于停止执行setTimeout()方法的函数代码

    8.今年国庆节倒计时代码

    1. html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>Documenttitle>
    8. <style>
    9. *{
    10. margin: 0 auto;
    11. }
    12. div {
    13. width : 700px;
    14. height : 200px;
    15. background-color : yellow;
    16. text-align: center;
    17. font-size: 50px;
    18. line-height: 200px;
    19. }
    20. style>
    21. head>
    22. <body>
    23. <div>div>
    24. <script>
    25. function time() {
    26. var willDate = new Date(2022, 9, 1, 0, 0, 0);
    27. var nowDate = new Date();
    28. var day = Math.floor((willDate - nowDate) / (24 * 60 * 60 * 1000));
    29. var hour = Math.floor(((willDate - nowDate) - day * (24 * 60 * 60 * 1000)) / (60 * 60 * 1000));
    30. var minute = Math.floor(((willDate - nowDate) - day * (24 * 60 * 60 * 1000) - hour * (60 * 60 * 1000)) / (60 * 1000));
    31. var second = Math.floor(((willDate - nowDate) - day * (24 * 60 * 60 * 1000) - hour * (60 * 60 * 1000) - minute * (60 * 1000)) / 1000);
    32. var result = document.querySelector('div');
    33. result.innerHTML = "剩余"+day+"天"+hour+"小时"+minute+"分钟"+second+"秒";
    34. }
    35. time();
    36. var interval = setInterval(time, 1000);
    37. script>
    38. body>
    39. html>

  • 相关阅读:
    win10下基于qt开发的板卡测试软件
    JNI开发必学C/C++基础
    Python学习笔记——基本类型、函数、输入和输出
    【Python百日进阶-WEB开发】Day177 - Django案例:09图形验证码(一)
    基于springboot+vue专业手语翻译预约系统
    FLASK+VUE+axios前后端交互
    Matlab论文插图绘制模板第122期—函数折线图(fplot)
    python 实现银行卡号查询银行名称和简称
    TEM和CWEM的优缺点
    agv 路径规划 matlab
  • 原文地址:https://blog.csdn.net/m0_52588421/article/details/126978900