webapi第三天

已于 2022-11-23 20:35:47 修改
阅读量67 收藏
点赞数
文章标签： 前端 javascript
于 2022-11-23 20:35:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45356160/article/details/127998341
版权

webapi第三天


在这里插入图片描述

节点操作

在这里插入图片描述

DOM节点

在这里插入图片描述

查找结点

父节点

在这里插入图片描述

★子节点

在这里插入图片描述

兄弟节点

在这里插入图片描述

增加节点

创建节点

在这里插入图片描述

追加节点到后面

在这里插入图片描述

追加节点到前面

在这里插入图片描述
可以保证追加到前面,下面这行代码
在这里插入图片描述

克隆节点

在这里插入图片描述
在这里插入图片描述

删除节点

在这里插入图片描述

时间对象

在这里插入图片描述

实例化

在这里插入图片描述
在这里插入图片描述

时间对象方法

在这里插入图片描述

时间戳

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

毕业倒计时

在这里插入图片描述
获得的知识点:
从头到尾写了好久,反正有时候date里的属性或者方法总是混淆,耽误时间,遇到问题再查方法吧,总之要多练


<!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">今天是2021年8月28日</p>
    <p class="title">下班倒计时</p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">
      现在是18:30:00    
    </p>
  </div>
  <script>
    setInterval(function(){
        let t = document.querySelector('.next')
    let nowtime = document.querySelector('.tips')
    let date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth()+1
    let day = date.getDate()
    t.innerHTML = `今天是${year}年${month}月${day}日`
    let hour = date.getHours()
    let minutes = date.getMinutes()
    let second = date.getSeconds()
    if(hour<10){
            hour = '0' + hour
        }
    if(minutes<10){
            minutes = '0' + minutes
        }
    if(second<10){
            second = '0' + second
        }
    nowtime.innerHTML = `现在是${hour}:${minutes}:${second}` 


    //倒计时
    //下班时间减去现在时间,就是倒计时时间
    let time1 = new Date('2022-11-23 18:30:00')
    let time2 = new Date()
    let second1 = (time1.getTime())-(time2.getTime())
    // document.write(parseInt(second1/1000))

    function time(){
        hour = parseInt(parseInt(second1/1000)/3600)
        if(hour<10){
            hour = '0' + hour
        }
        // console.log(parseInt(hour))
        minute = parseInt((parseInt(second1/1000)%3600)/60)
        if(minute<10){
            minute = '0' + minute
        }
        // console.log(parseInt(minute))
        second2 = parseInt((parseInt(second1/1000)%3600)%60)
        if(second2<10){
            second2 = '0' + second2
        }
        // console.log(parseInt(second1))
        return [hour,minute,second2]
    }
    // document.write(time()[1])
    let clock = document.querySelector('.clock')
    let child = clock.children
    child[0].innerHTML = `${time()[0]}`
    child[2].innerHTML = `${time()[1]}`
    child[4].innerHTML = `${time()[2]}`
    },1000)
  </script>

</body>

</html>

在这里插入图片描述

综合案例

学到的知识;
反正写了好久
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>微博发布</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .w {
      width: 900px;
      margin: 0 auto;
    }

    .controls textarea {
      width: 878px;
      height: 100px;
      resize: none;
      border-radius: 10px;
      outline: none;
      padding-left: 20px;
      padding-top: 10px;
      font-size: 18px;
    }

    .controls {
      overflow: hidden;
    }

    .controls div {
      float: right;
    }

    .controls div span {
      color: #666;
    }

    .controls div .useCount {
      color: red;
    }

    .controls div button {
      width: 100px;
      outline: none;
      border: none;
      background: rgb(0, 132, 255);
      height: 30px;
      cursor: pointer;
      color: #fff;
      font: bold 14px '宋体';
      transition: all 0.5s;
    }

    .controls div button:hover {
      background: rgb(0, 225, 255);
    }

    .controls div button:disabled {
      background: rgba(0, 225, 255, 0.5);
    }

    .contentList {
      margin-top: 50px;
    }

    .contentList li {
      padding: 20px 0;
      border-bottom: 1px dashed #ccc;
      position: relative;
    }

    .contentList li .info {
      position: relative;
    }

    .contentList li .info span {
      position: absolute;
      top: 15px;
      left: 100px;
      font: bold 16px '宋体';
    }

    .contentList li .info p {
      position: absolute;
      top: 40px;
      left: 100px;
      color: #aaa;
      font-size: 12px;
    }

    .contentList img {
      width: 80px;
      border-radius: 50%;
    }

    .contentList li .content {
      padding-left: 100px;
      color: #666;
      word-break: break-all;
    }

    .contentList li .the_del {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 28px;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div class="w">
    <!-- 操作的界面 -->
    <div class="controls">
      <img src="./images/9.6/tip.png" alt="" /><br />
      <!-- maxlength 可以用来限制表单输入的内容长度 -->
      <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
      <div>
        <span class="useCount" id="useCount">0</span>
        <span>/</span>
        <span>200</span>
        <button id="send">发布</button>
      </div>
    </div>
    <!-- 微博内容列表 -->
    <div class="contentList">
      <ul id="list">
        <li hidden>
            <div class="info">
              <img class="userpic" src="./images/9.6/03.jpg" />
              <span class="username">死数据:百里守约</span>
              <p class="send-time">死数据:发布于 2020年12月05日 00:07:54</p>
            </div>
            <div class="content">死数据:111</div>
            <button class="the_del">X</button>
          </li>
      </ul>
    </div>
  </div>

  <!-- 添加了hidden属性元素会直接隐藏掉 -->
  <script>
    // maxlength 是一个表单属性, 作用是给表单设置一个最大长度

    // 模拟数据
    let dataArr = [
      { uname: '司马懿', imgSrc: './images/9.5/01.jpg' },
      { uname: '女娲', imgSrc: './images/9.5/02.jpg' },
      { uname: '百里守约', imgSrc: './images/9.5/03.jpg' },
      { uname: '亚瑟', imgSrc: './images/9.5/04.jpg' },
      { uname: '虞姬', imgSrc: './images/9.5/05.jpg' },
      { uname: '张良', imgSrc: './images/9.5/06.jpg' },
      { uname: '安其拉', imgSrc: './images/9.5/07.jpg' },
      { uname: '李白', imgSrc: './images/9.5/08.jpg' },
      { uname: '阿珂', imgSrc: './images/9.5/09.jpg' },
      { uname: '墨子', imgSrc: './images/9.5/10.jpg' },
      { uname: '鲁班', imgSrc: './images/9.5/11.jpg' },
      { uname: '嬴政', imgSrc: './images/9.5/12.jpg' },
      { uname: '孙膑', imgSrc: './images/9.5/13.jpg' },
      { uname: '周瑜', imgSrc: './images/9.5/14.jpg' },
      { uname: '老夫子', imgSrc: './images/9.5/15.jpg' },
      { uname: '狄仁杰', imgSrc: './images/9.5/16.jpg' },
      { uname: '扁鹊', imgSrc: './images/9.5/17.jpg' },
      { uname: '马可波罗', imgSrc: './images/9.5/18.jpg' },
      { uname: '露娜', imgSrc: './images/9.5/19.jpg' },
      { uname: '孙悟空', imgSrc: './images/9.5/20.jpg' },
      { uname: '黄忠', imgSrc: './images/9.5/21.jpg' },
      { uname: '百里玄策', imgSrc: './images/9.5/22.jpg' },
    ]


    //先设置一个input文本监听事件和定时器来测字数
    let t = document.querySelector('textarea')
    let zishu = document.querySelector('.useCount')
    setInterval(function(){
        t.addEventListener('input',function(){
            zishu.innerHTML = `${t.value.length}`
        })
    })



    //构造一个算时间的函数
    function time(){
    let d = new Date()
    let year = d.getFullYear()
    let month = d.getMonth()+1
    let date = d.getDate()
    let hour = d.getHours()
    let minute = d.getMinutes()
    let second = d.getSeconds()
    if(month<10){
    month = '0' + month
    }
    if(date<10){
    date = '0' + date
    }
    if(hour<10){
    hour = '0' + hour
    }
    if(minute<10){
    minute = '0' + minute
    }
    if(second<10){
    second = '0' + second
    }
    return [year, month, date, hour, minute, second]
    }



    //随机函数
    function getRandom(min,max){
        return Math.floor(Math.random()*(max - min +1)) + min
    }




    //发布按牛一个click监听事件
    let send= document.querySelector('#send')
    let list = document.querySelector('#list')
    let li = document.querySelector('li')
    send.addEventListener('click',function(){
    //用克隆方法获得新li,并修改名和片和时间,然后加到li最前面
    let newli = li.cloneNode(true)
    //修改新li
    newli.hidden = false
    let num = getRandom(0,21)
    newli.children[0].children[0].src = `${dataArr[num].imgSrc}`
    newli.children[0].children[1].innerHTML = `${dataArr[num].uname}`
    //发布于 2020年12月05日 00:07:54
    newli.children[0].children[2].innerHTML = `发布于 ${time()[0]}年${time()[1]}月${time()[2]}日 ${time()[3]}:${time()[4]}:${time()[5]}` 
    let text = document.querySelector('textarea') 
    newli.children[1].innerHTML = `${text.value}` 
    //追加到最前面
    list.insertBefore(newli,list.children[0])

    

    //关闭,加载了添加li的里面
    let thedel = document.querySelector('.the_del')
    console.log(thedel.parentNode)
    thedel.addEventListener('click', function(){
    //移除li结点
    list.removeChild(thedel.parentNode)   
    })
    })
  </script>
</body>

</html>

在这里插入图片描述

重绘和回流

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

魏某某某
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值