WBE前端笔记3:JavaScript练习 DOM,BOM操作

简介: WBE前端笔记3:JavaScript练习 DOM,BOM操作

div和span

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        #div1{
            background-color: aquamarine;
            border: 1px red solid;
            height: 100px;
            width: 300px;
        }
    </style>
    <script type="text/javascript">
        window.onload= function(){
            document.getElementById("divbutton").onclick=function(){
                document.getElementById("div1").innerHTML="<font color='red'>哈哈哈</font>"
                //document.getElementById("div1").innerText="<font color='red'>哈哈哈</font>"
            }
            document.getElementById("spanbutton").onclick=function(){
                document.getElementById("span1").innerText="<font color='red'>哈哈哈</font>"
            }
        }
    </script>
</head>
<body>
    <button id="divbutton" >向DIV中添加</button>
    <button id="spanbutton" >向SPAN中添加</button>
    <div id="div1"></div>
    <span id="span1"></span>
</body>
</html>

运行后点击了两个按钮的结果为:

image.png

innerHTML是作为页面元素来插入

innerText是作为文本插入

多选框

假设现有这样的的需求:

image.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function(){
            var ckall= document.getElementById("ckall");
            var aihaos=document.getElementsByName("aihao");
            ckall.onclick=function(){
                for(var i = 0;i<aihaos.length;i++){
                    console.log(aihaos[i].checked=ckall.checked);
                }
            }
            for(var i = 0;i<aihaos.length;i++){
                aihaos[i].onclick=function(){
                    ckall.checked=aihaos[0].checked&&aihaos[1].checked&&aihaos[2].checked
                }
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" id="ckall"/><br>
    <input type="checkbox" name="aihao" value="one"/>1<br>
    <input type="checkbox" name="aihao" value="two"/>2<br>
    <input type="checkbox" name="aihao" value="three"/>3<br> 
</body>
</html>

下拉列表select的value

image.png

运行结果

image.png

函数的周期调用setInterval

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <script type="text/javascript">
    function getnowtime(){
      var date=new Date();
      document.getElementById("timeDiv").innerText = date.toLocaleString();
    }
    window.onload=function(){
      v=window.setInterval("getnowtime()",1000);
    }
    function zwld(){
      window.clearInterval(v);
    }
  </script>
  <body>
    <button type="button" onclick="zwld()">砸瓦鲁多</button>
    <div id="timeDiv"></div>
  </body>
</html>

效果为页面显示当前时间,当点击按钮后时间不再刷新

window.open 打开窗口 window.close 关闭窗口

image.png

效果与超链接类似,使用close可以关闭窗口

confirm 确认框

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <button onclick="del()">删除</button>
  </body>
  <script type="text/javascript">
    function del(){
      var a=confirm("确认吗");
      if(a){
        alert("确认");
      }else{
        alert("取消");
      }
    }
  </script>
</html>

单击按钮后会弹出

image.png

单击确定会弹出确定

点取消会弹出取消

将当前窗口设为顶级

创建文件t1.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <iframe src="t2.html" style="height: 500px; width: 500px;"></iframe>
  </body>
</html>

创建t2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>T2</h1>
    <button onclick="btn()">设为顶级</button>
  </body>
  <script type="text/javascript">
    function btn(){
      if(window.top!=window.self){
        console.log("adsasa")
        window.top.location = window.self.location
      }
    }
  </script>
</html>

运行:

image.png

单击按钮后:

image.png

   


目录
打赏
0
0
0
0
0
分享
相关文章
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
333 14
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
430 62
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之,优化 DOM 和 BOM 的性能需要综合考虑多个方面,通过合理的设计和技术手段,提升项目的运行效率和用户体验。在实际开发中,要不断地进行性能优化实践,以适应不断变化的需求和技术发展。
DOM 和 BOM 在项目中的应用
【10月更文挑战第19天】在现代网页开发和应用项目中,DOM(文档对象模型)和 BOM(浏览器对象模型)扮演着至关重要的角色。它们为开发者提供了与网页文档和浏览器环境进行交互的能力,使项目能够实现丰富的功能和用户体验。
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
109 6
JavaScript笔记(回顾一,基础知识篇)
JavaScript基础知识点回顾,包括语言定义、ECMAScript规范、字面量、变量声明、操作符、关键字、注释、流程控制语句、数据类型、类型转换和引用数据类型等。
JavaScript笔记(回顾一,基础知识篇)
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
111 1
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
235 1
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
128 0
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    13
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    29
  • 3
    详解智能编码在前端研发的创新应用
    17
  • 4
    巧用通义灵码,提升前端研发效率
    9
  • 5
    智能编码在前端研发的创新应用
    6
  • 6
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    22
  • 7
    VSCode AI提效工具,通义灵码前端开发体验
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    8
  • 9
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    13
  • 10
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
    36
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等