首页 > 其他分享 >Web API(一些记录)

Web API(一些记录)

时间:2023-11-24 23:33:46浏览次数:45  
标签:Web const 函数 记录 对象 元素 获取 API 属性

Web API(一些记录)

1.注意当使用间隔函数的时候做轮播图,点点的效果,删除需要放在间隔函数内,不能在函数外面声明,在外面的话删的点就固定了,放里面就是每执行一次就再选择一次

2.i--在事件点击函数里面也是立马执行吗,不是先把函数里面的其他东西执行完,再执行i--吗?

答:是的因为i--它是独立出来的,就是按顺序直接执行。前面说的全部式子执行完在自减是说在一个式子里比如:

let i = 1
 2 + i-- = o
o是等于3不是等于2,因为i--是在一个式子里面的会执行完在自减。所以console.log(i)结果是0

3.e和this

e是触发条件的对象,this是绑定的对象指向调用者。this表示绑定事件的元素,事件处理函数形参event是事件对象。这两个可以不一样比如我身上放了一个砖头,别人打我一拳,砖头碎了。那我就是this,砖头就是event,我是this我绑定了被打事件,然后砖头也就是事件对象,被打的对象。

在事件处理函数中,this指向事件源dom对象,简单说指向函数调用者

4.间隔函数i++和if的顺序

setInterval(function(){
            i++
    		//这里必须把if判断放在i++后面,不能放在结尾,因为一旦找不到imgSrc了又会回到i++,它是不会			继续往下面走的,也就是不会执行后面的if语句
    		if (i >= data.length) {
                i = 0
            }
            img.src = data[i].imgSrc
            title.innerHTML = data[i].title
           
        },1000)

5.滚动对象相关记录

// 总结
// 1.属性:scrollLeft和scrollTop;作用是被卷去的头部和左侧;也就是可以配合页面滚动来用,可读写

// 2.属性:clientWidth和clientHeight;作用是获得元素宽度和高度;说明不包含border、margin、滚动条,用于js获取元素大小,只读属性

// 3.属性:offsetWidth和offsetHeight;作用是获取元素宽度和高度;说明包含border、padding、滚动条等,只读

// 4.属性:offsetLeft和offsetTop;作用获取元素自己定位父级元素得左、上距离;说明获取元素位置的时候使用,只读属性

6.日期对象

// 2.2日期对象方法
      // 因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式
      // 1.方法:getFullYear();作用:获得年份;说明:获取四位年份
      // 2.方法:getMonth();作用:获得月份;说明:取值为0~11
      // 3.方法:getDate();作用:获取月份中的一天;说明:不同月份取值也不相同
      // 4.方法:getDay();作用:获取星期;说明:取值为0~6
      // 5.方法:getHours();作用:获取小时;说明:取值为0~23
      // 6.方法:getMinutes();作用:获取分钟;说明:取值为0~59
      // 7.方法:getSeconds();作用:获取秒;说明:取值为0~59

7.日期对象获取

const date = new Date()
let s = date.getSeconds()
            // 利用三元运算符来算
            // s = s < 10 ? '0' + s : s
            // 另一种方法用'对象'.padStart(指定的位数, '不够的话补充的字符串')padStart,2是需要得位数,s是对象,0是要补得东西
            // 还有一个padEnd是补充在后面的
            's'.padStart(2, '0')
一般在后面加个间隔函数,然后一起封装在一个函数里面,随时能用
获取时间的另外一种方式,注意这种方式只能获取到格式为年/月/日/,时间之间是:
div.innerHTML = date.toLocaleString()

8.对象修改

<h2>随机点名</h2>
const h = document.querySelector('h2')
        h.classList.add('.box4')
        h.title = 'fef'
        h.style.cursor = 'pointer'
        h.style.color = 'red'
        h.innerHTML = 'wokai'
如果是img标签修改图片的时候记得,不要加style,他不是样式,是属性,比如
img.src = '图片的路径/指定的数组.img'   //img这个就看数组对象里面图片的属性是什么就是什么就行了

9.星期的转换

// 根据日期Day() 0~6 返回的时星期一这种
   <h1></h1>
	<script>
        const arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
        const h1 = document.querySelector('h1')
        h1.innerHTML = arr[new Date().getDay()]
	</script>

10.时间的转换(可以用于倒计时效果,时间戳)

 // 1.通过时间戳获得的时间是毫秒,需要转换为秒在计算
        // 2.转换公式
        d = parseInt(总秒数/60/60/24)  //计算天数
        h = parseInt(总秒数/60/60%24)   //计算小时
        m = parseInt(总秒数/60%60)    //计算分数
        s = parseInt(总秒数%60)      //计算当前秒数

11.DOM

三、DOM节点分类
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

文档是一个文档节点。

所有的HTML元素都是元素节点。

所有 HTML 属性都是属性节点。

文本插入到 HTML 元素是文本节点。are text nodes。

注释是注释节点。

12.不同手机版本可以访问页面

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // navigator的数据类型是对象,该对象记录了浏览器自身的相关信息
        // 通过userAgent检测浏览器的版本和平台
        // 这个以后可以用在老板让你在安卓系统或者苹果系统的手机可以访问公司的网站,就可以用这个直接复制粘贴就可以了
        //  <!-- 检测 userAgent(浏览器信息) -->
!(function () {  //立即执行函数前面还可以加!或者+,加了这两个就把前面的funtion(){}看成一个整体
const userAgent = navigator.userAgent
// <!-- // 验证是否为Android或iPhone -->
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// <!-- // 如果是Android或iPhone,则跳转至移动站点 -->
if (android || iphone) {
location.href = 'http://m.itcast.cn' }
})()
    </script>
   
</head>

标签:Web,const,函数,记录,对象,元素,获取,API,属性
From: https://www.cnblogs.com/ke-xi/p/17855021.html

相关文章

  • Java之API详解之Runtime的详细解析
     3.1概述Runtime表示Java中运行时对象,可以获取到程序运行时设计到的一些信息3.2常见方法常见方法介绍我们要学习的Object类中的常见方法如下所示:publicstaticRuntimegetRuntime() //当前系统的运行环境对象publicvoidexit(intstatus) //停止虚拟机publicintavailab......
  • git bisect 查找引入bug的提交记录
    它的原理就是将代码提交的历史,按照两分法不断缩小定位。就是将代码历史一分为二,确定问题出在前半部分,还是后半部分,不断执行这个过程,直到范围缩小到某一次代码提交。step1:查找提交记录,找到可能引入错误的提交记录区间gitlog--pretty=onelinestep2:开始使用gitbisect......
  • 一些方便的webassembly 工具
    WebAssembly团队提供了一些方便的webassembly工具集包含的工具集wat2wasm 将WebAssembly文本格式(.wat)转换为WebAssembly二进制格式(.wasm)wasm2wat 是wat2wasm的反向工具,将二进制格式转换回文本格式(.wat)wasm-objdump 类似于传统的objdump工具,它打印有关WebAssembly二进制......
  • 西北电专电院_数据结构上机报告记录_第三次上机报告
    内容比较简单,和其他院的上机比起来说是这样的实现二叉树的基本操作,二叉树使用链式结构建立,基本操作基本用递归实现 1.问题描述二叉树的基本操作;(1)创建二叉树,需注意此处是按照先序法输入(2)通过先序遍历、中序遍历、后序遍历分别输出二叉树(3)求取二叉树的结点总数、树的深度......
  • 【刷题记录】20231124 线段树分治
    做题记录:注意到每次相当于\(0\)后面加\(1\),\(1\)后面加\(0\),因此每次可以合并01和10然后将问题规模减半。黑白染色,白格子=lcm+1,黑格子=prime相乘。发现横着竖着有六个质数,斜着只用四个质数。调整一下顺序即可。状压DP。考虑S作为前缀max时S与U-S的排列方案数。S每......
  • 用于webdav图床对比PicGo、PicList、lsky
    用于webdav图床对比PicGo、PicList、lsky需求场景:本人有自建WebDAV,非坚果云,有可访问的公网域名(内网穿透出来的),需要一个图床可以沟通Window、安卓、ios经过多方比对,结论如下:PicGo不支持WebDAV,但是我发现了一个二开项目PicListPicList支持WebDAV,但是没有网页端,无法沟通三端lsk......
  • 好用的IDEA插件——Apipost-Helper-2.0
    今天给大家推荐IDEA插件:ApipostHelper,比市面上很多产品好用并且完全免费!先说一下ApipostHelper的安装和使用安装在IDEA编辑器插件中心输入Apipost搜索安装:Apipost-Helper-2.0配置方法:使用ApipostIDEA插件前需要在IDEA设置中进行配置:云端域名默认为:https://sync-project-ide.a......
  • 软件测试/人工智能|教你如何使用ChatGPT的API
    简介自从有了ChatGPT之后,我每天都想去调戏它一番,自从开放了ChatGPT的API,我就想着通过API来使用ChatGPT,这样的话,速度上的体验应该会更好,本文就来介绍一下如何使用ChatGPT的API。环境准备在调用API之前,我们首先需要准备好我们的环境,一是我们需要安装openAI第三方库,OpenAI提供了一个......
  • 记录--买不起劳力士,一气之下熬夜写一个
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助最近喜欢研究起了手表,对劳力士这款“百事圈”实在是心水的不行啊!心痒难耐无奈钱包不支持,作为一个前端程序员,买不起的东西该怎么办?当然是自己做一个啊!说干就干,熬夜自己做了个“百事圈”出来!源码在最后!先看成品......
  • Java Web实现文件下载的几种方式
    文件下载可以说是网站的基础功能,要实现最下载功能,有一种最基本的方法,那就是将超链接的href属性指向对应的资源文件。如下面连接指向了百度首页的图片:​ ​I'mtheindexofBaidu​​但这种方式的缺陷也是很明显的,目录信息被获取,不利于信息安全。其实信息安全还是其次,主要还是......