首页 > 其他分享 >关于HarmonyOS的学习

关于HarmonyOS的学习

时间:2024-09-07 11:20:31浏览次数:19  
标签:function console log 学习 HarmonyOS 关于 var scrollTop document

day21

一、window对象常用方法

    // 提示信息,带有确认和取消。如果确认返回的是true,取消返回的是false
    // var res = confirm('你确定登录吗?')
    // console.log(res)
​
    var btn1 = document.querySelectorAll('button')[0]
    var btn2 = document.querySelectorAll('button')[1]
    btn1.onclick = function(){
        // 关闭浏览器窗口
        window.close()
    }
    btn2.onclick = function(){
        // 打开浏览器窗口
        // 参数1表示的是跳转到那个网页
        // 参数2表示是否新窗口打开 _self _blank(如果不写,默认新窗口)
        // 参数3表示的窗口的样式(存在兼容问题,有些浏览器不起作用)
        // window.open('https://www.jd.com')
        // window.open('https://www.jd.com', '_self')
        window.open('https://www.jd.com', '_blank', 'width=500; height=500;')
    }

二 、location地址栏对象

    // 返回的是主机名称
    // console.log(location.hostname)
​
    // 获取地址栏中完整的地址 作用:1、设置 2、获取 (常用)
    console.log(location.href)
​
    // 文件路径及文件名
    console.log(location.pathname)
​
    // 完整的url组成:协议protocol、域名domain、端口号port
​
    var btn1 = document.querySelectorAll('button')[0]
    var btn2 = document.querySelectorAll('button')[1]
​
    btn1.onclick = function(){
        location.reload()
    }
    // 所谓的强制刷新,不走缓存,直接重新向服务器获取数据
    btn2.onclick = function(){
        location.reload(true)
    }

三、window下的几个对象

1.history对象 history.forward(前进)

2.screen对象 screen.width screen.height

不包含状态栏 screen.availWidth screen.availHeight

四、onscroll滚动事件

    // onscroll 滚动事件,当滑动浏览器的滚动条的时候触发事件
    // scrollTop 获取滚动的距离
    // document.documentElement.scrollTop 当文档没有声明的时候,不起作用
    // document.body.scrollTop 当文档没有声明的时候,起作用
    // document.documentElement.scrollLeft当文档没有声明的时候,不起作用
    // document.body.scrollLeft 当文档没有声明的时候,起作用
​
    var aside = document.querySelector('aside')
    window.onscroll = function(){
        // var scrollTop = document.documentElement.scrollTop
        // var scrollTop = document.body.scrollTop
        // 兼容写法 短路运算符
        // var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        // console.log(scrollTop)
​
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if(scrollTop>=300){
            aside.style.opacity = 1
        }else{
            aside.style.opacity = 0
        }
    }

五、class Name和classList

1.className 能通过js形式给标记添加类名 var btn = document.querySelector('button') var box = document.querySelector('div')

    // var flag = true
    // btn.onclick = function(){
    //     if(flag){
    //         // 问题:style方式确实方便,如果设置的样式较多的情况下,就特别麻烦了
    //         // box.style.display = 'block'
    //         // box.style.backgroundColor = 'yellowgreen'
    //         // box.style.border = '1px solid black'
    //         box.className = 'show'
    //         flag = false
    //     }else{
    //         // box.style.display = 'none'
    //         box.className = ''
    //         flag = true
    //     }
    // }
    btn.onclick = function(){
       box.classList.toggle('show')
    }

2.classList 是一个对象上面有几个方法 add() remove() toggle()如果有类名就删除,没有将添加。 注意点1:className形式一次只能设置一个类名,如果设置多个,下面的会把上面的给覆盖掉 注意点2:box.className = 'sy1 sy2'可以添加两个类名,但是删除类名时会全面删除

六、吸顶效果

    var nav = document.querySelector('nav')
    window.onscroll = function(){
        // 获取滚动的距离
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        if(scrollTop>=200){
            nav.classList.add('fxd')
        }else{
            nav.classList.remove('fxd')
        }
    }

七、onresize

    // onresize 窗口事件,当浏览器的窗口改变时触发
    // innerWidth 可以获取浏览器的可视区域的宽度
    // innerHeight 可以获取浏览器的可视区域的高度
    window.onresize = function(){
        // console.log(window.innerWidth, window.innerHeight)
        if(window.innerWidth<=320){
            document.documentElement.style.fontSize = '32px'
        }else if(window.innerWidth<=640){
            document.documentElement.style.fontSize = '64px'
        }else if(window.innerWidth<=750){
            document.documentElement.style.fontSize = '75px'
        }
    }

八、回调函数

        + callback(cb)
        + 官方概念:
          => 如果把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指的函数时,我们就说这是回调函数
        + 理解概念:
          => 把函数当做参数给另一个函数使用,当当前的函数执行完毕后,再执行作为参数的这个函数,把这种情况称之为回调函数
        + 作用
          => 可以处理异步操作
          => 可以延迟执行
          => 可以解决代码阻塞问题
          => 可以把复杂的逻辑进行分类
          => ...

1.回调函数的第一种语法:将匿名函数当成参数传递 fn是主体函数 a参数就是回调函数 function fn(a){ console.log('我是主体函数') a() } fn(function(){ console.log('hello') })

2.回调函数的第二种语法:把有名称的函数当成参数传递 function fn(a){ a() console.log('我是主体函数') } fn(fn2) function fn2(){ setTimeout(function(){ console.log('hello') }, 2000) }

3.异步代码 // setInterval 主体函数 // 需求:希望1秒或者2秒后处理逻辑代码,如果不传递一个函数作为参数,其他的数据类型做不到 // 1秒定时器去调用回调函数 setInterval(function(){ console.log('逻辑代码') }, 1000)

    function fn(){
        console.log('逻辑代码')
    }
    setInterval(fn, 1000)
​
    function fn(a){      
        console.log('我是主体函数')
        a()
    }
    fn(fn2)
​
    function fn2(){
        // setTimeout(function(){
        //     console.log('hello')
        // }, 2000)
​
        for(var i=0; i<1000; i++){
            console.log(i)
        }
    }

4.开发场景及使用 开发场景:网络请求,你前端向服务器发送请求信息,服务器会把你需要的请求的数据返回 回调函数的使用: // arr.forEach(function(){}) // arr.sort(function(a, b){return a - b})

    var arr = [10, 20, 30]
    // 把处理逻辑的代码单独放在回调函数里面
    function callback(item){
        return item>=20
    }
    // 主体函数
    var res = arr.filter(callback)
    console.log(res)

九、锚点

    + 锚点其实也是超链接的一种形式
    + 命名锚点的作用:
      => 在同一页面内的不同位置进行跳转
    + 语法
      => <a href="#pic1">描述文字</a> 点击可以跳转的标记
      => <标记 id="pic1">目标内容</标记> 跳转目标标记

标签:function,console,log,学习,HarmonyOS,关于,var,scrollTop,document
From: https://blog.csdn.net/m0_72035166/article/details/141935563

相关文章

  • 关于Tailscale Subnet routers要说的
    国内的水文很多,Tailscale的部署就不说了。简单的都有讲到,但凡深度一点儿的只能找找外边儿的文章了。昨天刚给群晖装完Tailscale,打算着利用Subnetrouters功能来访问另外的2个子网。国内的水文在介绍这一段使用的时候是这样的:该文章提到:如果有多个网段添加,就多运行上面说到的......
  • AI大语言模型LLM学习-WebAPI搭建
    系列文章1.AI大语言模型LLM学习-入门篇2.AI大语言模型LLM学习-Token及流式响应前言在上一篇博文中,我们调用了在线大模型API,并用Python写了一个控制台流式对话客户端,基本能愉快的与大模型对话聊天了。但控制台总归太技术化,我们希望能有个类似ChatGPT那样的Web......
  • JAVA学习-练习试用Java实现“删除有序数组中的重复项”
    问题:给你一个有序数组nums,请你原地删除重复出现的元素,使每个元素只出现一次,返回删除后数组的新长度。不要使用额外的数组空间,你必须在原地修改输入数组并在使用O(1)额外空间的条件下完成。说明:为什么返回数值是整数,但输出的答案是数组呢?请注意,输入数组是以......
  • java计算机毕业设计每日一课微党课学习管理平台(开题+程序+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在信息化高速发展的今天,党员教育工作面临着新的机遇与挑战。传统的党员学习模式往往受限于时间、空间及资源,难以适应新时代党员教育高效化、个性化的......
  • 行政组织理论-第十一章:创建学习型组织
    章节章节汇总第一章:绪论第二章:行政组织的演变第三章:科层制行政组织理论第四章:人本主义组织理论第五章:网络型组织理论第六章:行政组织目标第七章:行政组织结构第八章:行政组织体制第九章:行政组织设置与自身管理第十章:组织激励第十一章:创建学习型组织第十二章:政府再造流程第十三......
  • 基于nodejs+vue电脑软件技能学习平台[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,电脑软件技能已成为现代社会不可或缺的一部分,广泛应用于教育、企业、科研及日常生活等多个领域。然而,面对琳琅满目的软件工具和不断......
  • PyTorch深度学习教程第二章-PyTorch 简介
    文章目录前言一、高层次理解PyTorch二、开始使用PyTorch清单2.1:使用pip安装PyTorch清单2.2:使用conda安装PyTorch清单2.3:一个简单的PyTorch测试程序输出2.1:测试程序的输出结果三、PyTorch的应用四、PyTorch的优点和限制五、PyTorch与TensorFlow的比......
  • 【机器学习实战】用随机森林预测在线购物者的购买意向
    一、数据介绍1、背景与来源本次数据集来自UCI机器学习库中的在线购物者购买意向数据集。该数据集是从某个在线零售商数据库中随机收集的。数据都来自于一年期间的不同用户,以避免对特定活动、特殊日子、用户档案或时间段的任何倾向性。通过收集用户行为数据、选择关键特征、......
  • AI大语言模型LLM学习-Token及流式响应
    token是什么?比较官方的token解释:Token是对输入文本进行分割和编码时的最小单位。它可以是单词、子词、字符或其他形式的文本片段。token是自然语言处理的最细粒度。简单点说就是,LLM的输入是一个个的token,输出也是一个个的token。token是由LLM处理的基本数据单元。......
  • 子集卷积 学习笔记
    如果没有交集的情况,就可以做或运算卷积考虑交集,没有交集=大小和相同依次考虑集合的大小为0,1,...,n对每种情况,构造长度为(1<<n)的集合幂级数,只对size=i赋值枚举答案中集合的大小为0,1,...,n对每个i,枚举f中的贡献是(j),g中的贡献是(i-j)让(j)和(i-j)做或运算卷积,答案一定合法......