WEBAPI-日期对象, DOM节点

已于 2022-04-24 11:59:12 修改
阅读量1.5k 收藏
点赞数
分类专栏： webapi学习 文章标签： javascript
于 2022-04-23 11:33:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68531033/article/details/124360359
版权

日期对象

实例化

ECMAScript 中内置了获取系统时间的对象 Date，使用 Date 时与之前学习的内置对象 console 和 Math 不同，它需要借助 new 关键字才能使用

<script>
    //日期对象,掌握日期对象,可以让网页显示日期
    //实例化 new
    //得到当前时间
    const d1=new Date()
    console.log(d1);
    //字符串 指定时间日期
    const d2=new Date('2022-5-1 6:6:6' )
    console.log(d2);
    //数字制定日期时间
    const d3=new Date(2022,1,1,6,6,6)
    console.log(d3);
    // console.log(d1.toLocaleDateString() );当地时间
  </script>

常见的日期对象 

const re=n.getFullYear() //获取年份

const re=n.getMonth()+1//获取月份 月份要加1

const re =n.getDate ()//获取日期

const re=n.getDay() //获取星期

const re =n.getHours()//获取小时

const re=n.getMinutes()//获取分钟

const re =n.getSeconds()//获取秒数

<script>
    //获得日期对象
    const n=new Date()
    //使用方法
// const re=n.getFullYear() //获取年份
// const re=n.getMonth()+1//获取日期
// const re =n.getDate ()//获取日期
// const re=n.getDay() //获取星期
// const re =n.getHours()//获取小时
// const re=n.getMinutes()//获取分钟
// const re =n.getSeconds()//获取秒数
console.log(re);

//set 设置
n.setFullYear(2222)

console.log(n);

  //   console.log(date.getFullYear());
  //   console.log(date.getMonth()+1);
  //  console.log(date.getDate());//星期几
  </script>

 显示格式化时间

<!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>
</head>
<style>
  div{
    margin: auto;
    border-radius: 28%;
    width: 800px;
    height: 150px;
    background-color: paleturquoise;
    font-size: 35px;
    text-align: center;
    line-height: 150px;
  }
</style>
<body>
 
  <div></div>
 <script>
    showTime()
     // 定时器
     setInterval(function () {
      showTime()
    }, 1000)
    function showTime() {
      //  获取div
      const div = document.querySelector('div')
      // 创建 
      const n = new Date()

      // 获取信息
      let year = n.getFullYear()
      let month = n.getMonth() + 1
      let day = n.getDate()
      let hour = n.getHours()
      let min = n.getMinutes()
      let second = n.getSeconds()

      // 补0
      month = month < 10? '0'+ month :month
      day = day < 10? '0'+ day :day
      hour = hour < 10? '0'+ hour : hour
      min = min < 10? '0'+ min : min
      second = second < 10? '0'+ second :second

      // 字符串拼接
      const str = `${year}-${month}-${day} ${hour}:${min}:${second}`
      div.innerHTML = str
    }
   
  </script> 

</body>
</html>

时间戳

 <script>
    const n =new Date()
    //获取时间戳
    //getTime
    const re =n.getTime()
    console.log(re);
  </script>

获得时间戳

   获取时间戳 getTime()

  const re= date.getTime()

    2.+new Date

   const re= +new Date()

    3.Date.now()

<script>
     const n=new Date()

  //   获取时间戳 getTime()
  // const re= date.getTime()
  //   2.+new Date
  //  const re= +new Date()
  //   3.Date.now()
  const re= Date.now();//当前时间戳
    console.log(re);
  </script>

倒计时案例 


<!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>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next">今天是2222年2月22日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="second">20</span>
    </p>
    <p class="tips">18:30:00下课</p>
  </div>
  <script>
   
    const hour=document.querySelector('#hour')
    const minutes=document.querySelector('#minutes')
    const second=document.querySelector('#second')
  
     // 定时器
   const timer= setInterval(function () {
      showTime()
    }, 1000)
    showTime()
    function showTime(){
      //创建时间
    //结束时间
  const end =new Date('2022-4-22 18:30:00')
  //开始时间
  const start =new Date()
  const val= end.getTime() - start.getTime()
  // console.log(val);
  let h= parseInt(val /1000 /60 / 60)
  let m=parseInt(val / 1000 / 60 % 60)
  let s=parseInt(val/1000 % 60)

  h = h < 10? '0'+ h : h
  m= m < 10? '0'+m :m
      s = s < 10? '0'+ s :s
  // console.log(s);
  hour.innerHTML=h
  minutes.innerHTML=m
  second.innerHTML=s
  //时间到了停止定时器
  if(val <=0){
clearInterval(timer)
  hour.innerHTML='00'
  minutes.innerHTML='00'
  second.innerHTML='00'
  } 
}
    
  </script>
</body>

</html>

DOM节点 

查找节点

 查找父节点

 元素.parentNode

<!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>
</head>
<body>
  <div>
    <p>段落</p>
    <h2>标题</h2>
    <span>111</span>
  </div>
    <script>
      const span=document.querySelector('span')
      //找父级div
      // span.parentNode
      console.log(span.parentNode);
    </script>
  
</body>
</html>

 查找子节点

元素.childNodes  所有的儿子 包括空格

元素.children  所有的元素子节点

<!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>
</head>
<body>
  <div>
  <p>段落</p>
  <h2>标题</h2>
  <span>111</span>
</div>
<script>
     const div=document.querySelector('div')
     console.log(div.childNodes);//所有的儿子 包括空格
     console.log(div.children);//所有的元素子节点
</script>
</body>
</html>

查找兄弟关系 

  上一个元素兄弟

     span.previousElementSibling

下一个元素兄弟

    span.nextElementSibling

<!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>
</head>
<body>
  <div>
    <p>段落</p>
    <h2>标题</h2>
    <span>111</span>
    <i>1111</i>
  </div>
  <script>
     const span=document.querySelector('span')
     //兄弟关系
    //  上一个元素兄弟
    //  span.previousElementSibling
    console.log(span.previousElementSibling);
    // 下一个元素兄弟
    // span.nextElementSibling
    console.log(span.nextElementSibling);
  </script>
</body>
</html>

创建节点 

createElement()

追加节点

1. 追加节点 插入到父元素的最后一个子元素

      父元素.appendChild(需要添加的子元素)

2.  插入节点

      父.appendChild(新的.旧的)

<!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>
</head>
<body>
  <input type="button" value="点击">
  <div>
    <h1>123</h1>
  </div>
  <script>
    const btn=document.querySelector('input')
    const div=document.querySelector('div')
    const h1=document.querySelector('h1')
    btn.addEventListener('click',function(){
      const newP=document.createElement('p')

      // 追加节点 插入到父元素的最后一个子元素
      // 父元素.appendChild(需要添加的子元素)
      div.appendChild(newP)

      // 插入节点
      // 父.appendChild(新的.旧的)
      div.insertBefore(newP,h1)
      newP.innerHTML='娃哈哈'
    })
  </script>
</body>
</html>

克隆节点 

克隆谁,先找到谁

    克隆   元素.cloneNode(true)//克隆元素以及所以子节点 //false克隆本身

默认值为 false

<!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>
</head>
<body>
  <input type="button" value="点击">
  <div class="box" title="'图片">
    <img src="./学成在线重构/images/course02.png" alt="">
    <h2>标题</h2>
</div>
  <script>
    // 克隆谁,先找到谁
    // 克隆   元素.cloneNode(true)//克隆元素以及所以子节点 //false克隆本身
    const btn=document.querySelector('input')
    const div=document.querySelector('div')
  btn.addEventListener('click', function () {
    //负直节点
  const newDiv=div.cloneNode(true)
  //追加到body的最后
  document.body.appendChild(newDiv)
  })
  </script>
</body>
</html>

删除节点

删除元素 :父.removeChild(子)

<!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>
</head>
<body>
  <input type="button" value="点击">
  <div>
    <img src="./学成在线重构/images/course02.png" alt="">
  </div>
  
  <script>
    //删除元素 :父.removeChild(子)
    const btn=document.querySelector('input')
    const img=document.querySelector('img')
  btn.addEventListener('click', function () {
   img.parentNode.removeChild(img)
  })
  </script>
</body>
</html>

移动元素 

<!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>
</head>
<body>
  <input type="button" value="点击">
  <div>
    <img src="./学成在线重构/images/course02.png" alt="">
  </div>
  <p></p>
  <script>
    const btn=document.querySelector('input')
    const img=document.querySelector('img')
  btn.addEventListener('click', function () {
    document.querySelector('p').appendChild(img)
  })
  </script>
</body>
</html>

M端事件 

移动端事件

  <script>
    // 给文档监听事件
    //  touchstart  按下触发
 document.addEventListener('touchstart',function(){
   console.log('按下');
 })
//touchmove  滑动触发
 document.addEventListener('touchmove',function(){
   console.log('滑动');
 })
  //touchend  松开触发
  document.addEventListener('touchend',function(){
   console.log('松开');
 }) 
    </script>

 案例

重绘和回流

重绘不一定会影响回流,回流一定会影响重绘

页面发生改变  回流

学习吖
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Web API DOM11】节点操作
06-06
在Web开发中，API（应用程序接口）是一种允许不同软件组件之间交互的方式，而DOM（文档对象模型）则是HTML和XML文档的一种结构化表示。DOM1是DOM标准的第一个版本，它定义了如何通过JavaScript等脚本语言操作网页...
webapi（四）- 时间对象
随心所欲的便笺
04-15 498
时间对象 可以让网页显示时间 作用： 得到当前系统时间或者指定时间 语法： 1. 获取当前时间 let data = new Date() // 得到当前时间 let date = new Date() console.log(date) 2. 获取指定时间 let date = new Date(‘指定的时间’) // 得到指定时间 let date = new Date('1949-10-01') console.log(date) 时
.Net Core WebApi返回日期格式的问题
design_in_1988的博客
11-05 1693
环境：.net core 2.1 webapi 问题简介： 返回DateTime，前端接收到的字符有时候为2018-01-01T12:01:01，有时候为2018-01-01T01:01:01.722+08:00，无法正常解析 原因： WebApi的Json解析采用的是NewtonSoft的Json.net类库，其格式化日期默认采用的是ISO-8601 格式，该标准规定，日期...
C# .NET WEBAPI 项目测试接口耗时类 Stopwatch
最新发布
weixin_44909642的博客
01-30 468
开发过程中，有时需要测试接口运行时间，net平台直接提供了Stopwatch类来操作。
WebAPI之日期对象、事件对象、事件流、阻止默认行为
李建雨的博客
12-05 423
一、日期对象 1、日期对象的创建 let time = new Date() 获取计算机当前时间给变量time let time2 = new Date('2021-1-5 12:45:32') 创建时间对象时指定时间（传的是字符串） let time3 = new Date(2021,0,2,16,32,12) // 代表2021年1月2日16点32分12秒 创建时间对象时指定时间（传的是数字，分别是年、月、日、时、分、秒），time3代表2021年1月2日16点32分12秒，如果对应
第9章 JS-Web-API-DOM【学会DOM，才能具备网页开发的基础】.rar
12-24
本章主题聚焦于JS的Web API之一——DOM（Document Object Model），这是一个用于表示HTML或XML文档的树型结构，使得我们可以用编程方式来操作页面元素。理解并熟练运用DOM，是成为合格网页开发者的基本技能。 DOM...
Web前端开发技术-认识DOM对象.pptx
07-07
【Web前端开发技术-认识DOM对象】 在Web前端开发中，DOM（Document Object Model）对象是至关重要的概念，它是一个标准的编程接口，允许开发者通过JavaScript等脚本语言操作HTML和XML文档。DOM将HTML或XML文档解析...
前端-webapi相关面试题.md
02-19
内功概要：前端面试-webapi的相关面试题（问题+答案） 问题如下： 1. 请说下什么是重绘和重排（回流）？他们的区别是什么？ 2 .说说this的指向问题吧？ 3. 事件流分为哪两个阶段？ 4 .事件委托的实现原理？如果获取...
purescript-web-dom:W3C DOM规范的类型定义和低级接口实现
05-08
通过阅读模块文档，开发者可以了解如何创建元素、访问DOM节点、监听事件以及执行其他常见的DOM操作。 Purescript-web-dom库的优势在于，它将W3C DOM规范的接口转化为Purescript的类型安全形式，这意味着在编译阶段...
webapi 统一处理时间格式
weixin_30421525的博客
04-18 638
public class UnixDateTimeConvertor : DateTimeConverterBase { public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer) ...
完整的将日期时间转换为汉字的代码
laravel framework
07-21 262
下面的代码可以将任意日期（1000-01-01 0:0:0------&gt;9999-12-31 23:59:59）转换为汉字显示 Function datename(ByVal mydate As String) As String Dim i As Long, mystr(6) As String, temp As StringConst all As String = "○一二三四五六七八...
关于web api 中 日期格式问题解决方案
weixin_34319374的博客
07-20 485
在构造函数或者 全局开始的时候调用这个 public BossApiController() { JsonMediaTypeFormatter jsonFormatter = GlobalConfiguration.Configuration.Formatters.JsonFormatter; JsonSe...
ASP.NET WebApi 自带Json返回日期带T无法格式化的问题
weixin_30432007的博客
07-27 365
WebApi自带json序列化对遇到时间日期字段的时候，到前端获取的格式总是为“2016-07-14T15:32:44”，中间总是会带一个T,显然不是很友好。先是偷懒在园子里边去找一些解决方案，尝试了一下，然并卵。于是，自己想办法。 1.先是查看ApiController.JsonResults<T>的源码 ...
初学 go 入门-案例-教程-记录（10）webapi 框架 Gin（二）前端 Get 请求，刷新时间
二等碗
09-14 257
初学 go 入门-案例-教程-记录（10）webapi 框架 Gin（二）前端 Get 请求，刷新时间初目录展示核心代码结果展示 初 希望能写一些简单的教程和案例分享给需要的人 欢迎进qq群交流：546496965 我们之前接触了如何用搭建 webapi 框架 Gin https://blog.csdn.net/qq_36051316/article/details/120196088，现在我们要学习如何使用请求API gin ： https://github.com/gin-gonic/gin 目录展示
c# webapi 日期还T 问题，已解决
PariyPeng
01-14 982
背景：网上大部门写的方案能返回时解决带T的问题，但在前端保存数据如果带有日期字段2021-1-14时，后端则收不到该字段的值 解决方案： 第一步把以下代码复制到WebApiConfig.cs或者新建一个类 #region Json日期带T格式转换 /// <summary> /// Json日期带T格式转换 /// </summary> public class JsonDateTimeConverter : .
C# WebAPI中DateTime类型字段在使用微软自带的方法转json格式后默认含T的解决办法
DearGaz的博客
07-18 3207
本人新手，在.Net中写WebAPI的时候，当接口返回的json数据含有日期时间类型的字段时，总是在日期和时间中夹着一个字母T；微软这么设置可能有其内在的初衷，但是对于我来说，这样的格式不是很方便，前端同学展示出来的时候也总是要记得处理一下显示格式。曾经问过部门内一位老鸟，老鸟的反应告诉我这在微软的框架下做json转换是不可避免的；当初一度放弃了这个问题。后来突然冷静分析了一下，微软不可能做的这么...
"深入认识DOM对象及Web API的前端开发技术
Web前端开发技术-认识DOM对象.pptx是一份关于DOM对象的学习材料，通过这份资料，我们可以学习到DOM对象的应用，以及掌握获取元素的方式、操作元素的方式、元素的属性和DOM节点操作、事件的绑定和事件对象的使用、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值