WEBAPI练习

最新推荐文章于 2023-03-30 20:57:36 发布

qq_40169837

最新推荐文章于 2023-03-30 20:57:36 发布

阅读量317

点赞数

分类专栏：每日自主练习写网页大体思路文章标签： js javascript html css jquery

本文链接：https://blog.csdn.net/qq_40169837/article/details/106692623

版权

每日自主练习同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

写网页大体思路

5 篇文章 0 订阅

订阅专栏

WebAPI笔记考点（第一天）
今日学习目标


能够说出常用的3-5个键盘事件
       能够知道如何获取当前键盘按下的是哪个键
       能够知道浏览器的顶级对象window
       能够使用window.onload事件
       能够使用window.onresize事件
       能够说出两种定时器的区别
       能够使用location对象的href属性完成页面之间的跳转
       能够使用location对象获取url中的参数部分
       能够使用history提供的方法实现页面刷新

1.DOM和BOM

在这里插入图片描述

2.零散知识点总结

window部分
1：window对象是顶级对象，location、history、navigator这些对象都是其属性。pageX是鼠标事件对象的属性。

2：onload是页面内容全部加载完触发。DOMContentLoaded是DOM元素加载完触发，且从IE9开始支持。window对象是顶级对象，定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。

定时器部分
1：setTimeou()相当于炸弹，只会触发1次。定时器都可以被清除，清除时需要指定清除哪个。

2：开启定时器表示法
A，window.setTimeout(function(){console.log(‘开启定时器’)}, 1000);

B，setInterval(function(){console.log(‘开启定时器’)}, 1000);

C，setTimeout(function(){console.log(‘开启定时器’)},0);

D，setTimeout(function(){console.log(‘开启定时器’)});

3.小案例思路总结

（1）5秒后关闭广告
在这里插入图片描述

（2）模拟京东快递单查询
在这里插入图片描述

（3）倒计时

（5）发送短信倒计时

（6）5分钟自动跳转页面

（7）获取url参数

4,。自主练习

1.页面电子时钟 😎
开启定时器，每隔1秒执行1次回调函数
回调函数中，使用Date对象获取当前时分秒
判断时分秒是否大于10
将时分秒内容拼接成字符串，并设置盒子的内容

<!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>Document</title>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div');
        getTimer()
        setInterval(getTimer, 1000);

        function getTimer() {
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            var dates = time.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = time.getDay();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            div.innerHTML = year + '年' + month + '月' + dates + '日' + arr[day] + h + ':' + m + ':' + s;
        }
    </script>
</body>

</html>

2.纪念日倒计时

获取要操作的元素（天时分秒盒子）
获取结束日期的时间戳
开启定时器
.获取当前日期的时间戳，并计算两个日期的差
将毫秒的时间差分别计算为天时分秒
设置盒子的内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>纪念日倒计时</title>
</head>
<style type="text/css">
    .title {
      width: 360px;
      height: 50px;
      margin:200px auto 50px auto;
    }
	 .time-item {
      width: 450px;
      height: 45px;
      margin: 0 auto;
    }
    
    .time-item strong {
        background: orange;
        color: #fff;
        line-height: 49px;
        font-size: 36px;
        font-family: Arial;
        padding: 0 10px;
        margin-right: 10px;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }
	.time-item > span {
        float: left;
        line-height: 49px;
        color: orange;
        font-size: 32px;
        margin: 0 10px;
        font-family: Arial, Helvetica, sans-serif;
    }
</style>
<body background="images/sss.png">
	<h1 class="title">距离七周年纪念日，还有</h1>
  
  <div class="time-item">
    <span><span id="day">00</span>天</span>
    <strong><span id="hour">00</span>时</strong>
    <strong><span id="minute">00</span>分</strong>
    <strong><span id="second">00</span>秒</strong>
  </div>
  </div>
  <script>

    

    // 获取天时分秒的盒子
    var spanDay = document.getElementById('day');
    var spanHour = document.getElementById('hour');
    var spanMinute = document.getElementById('minute');
    var spanSecond = document.getElementById('second');

    // 开启定时器
    setInterval(countdown, 1000);

    countdown();
    // 倒计时
    
    // // 目标时间的时间戳
    var endDate = new Date('2023-06-08 0:0:0');
    var end = endDate.getTime();

    function countdown() {     
      // 当前时间的时间戳
      var nowDate = new Date();
      var now = nowDate.getTime();

      // 计算时间差（毫秒）
      var leftTime = end-now; 
      // 相差的秒数
      leftTime /= 1000;

       // 求 相差的天数/小时数/分钟数/秒数
	  var day, hour, minute, second;

	  day = Math.floor(leftTime / 60 / 60 / 24);
	  hour = Math.floor(leftTime / 60 / 60 % 24);
	  minute = Math.floor(leftTime / 60 % 60);
	  second = Math.floor(leftTime % 60);
      
      // 设置盒子的内容
      spanDay.innerText = day;
	  spanHour.innerText = hour;
	  spanMinute.innerText = minute;
	  spanSecond.innerText = second;

    }
  </script>
</body>

</html>

qq_40169837

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
WEBAPI练习

WebAPI笔记考点（第一天）今日学习目标能够说出常用的3-5个键盘事件能够知道如何获取当前键盘按下的是哪个键能够知道浏览器的顶级对象window 能够使用window.onload事件能够使用window.onresize事件能够说出两种定时器的区别能够使用location对象的href属性完成页面之间的跳转能够使用location对象获取url中的参数部分能够使用hi
复制链接

扫一扫