• 每日学到 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>

  • 相关阅读:
    应用层基础 —— 认识URL
    Qt项目实战 杂谈一二:中文乱码事情小,处理不好头发少
    TensorFlow在推荐系统中的分布式训练优化实践
    CCRC 网络安全技术课程
    使用dateutil的parser.parse()格式化时间对象
    【TensorFlow2 之012】TF2.0 中的 TF 迁移学习
    RabbitMQ
    SpringBoot实现多数据源(四)【集成多个 Mybatis 框架】
    部署springboot打包不打包配置文件,配置文件为外部配置文件使用 (真实场景)
    Unity之如何接入google cardboard-xr-plugin实现android手机VR
  • 原文地址:https://blog.csdn.net/m0_52588421/article/details/126978900