近日web APls案例作业

最新推荐文章于 2024-10-02 05:39:15 发布

Qiuxuntao

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量510

点赞数

分类专栏：前端文章标签： javascript css3 css

本文链接：https://blog.csdn.net/Qiuxuntao/article/details/121216098

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

文章目录

一、动态创建列表

请添加图片描述

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      margin: 0;
      padding: 0;
    }
    ul {
      margin: 0 auto;
      width: 94px;
      list-style: none;
      background-color: rgb(0, 255, 13);
      border-radius: 50px;
      /* text-align: center; */

    }

    ul li{
      font-family:cursive;text-shadow:6px 2px 2px #333;color:rgb(255, 106, 20);
      border-radius: 50px;
      width: 56px;
    }

    .btn {
      margin-left: 659px;
    }
  </style>
</head>

<body>
  <ul id="ul">
    <li>张国荣</li>
    <li>刘德华</li>
    <li>郭富城</li>
    <li>张学友</li>
    <li>黎明</li>
  </ul>
  <input class="btn" type="button" value="按钮" id="btn" />
  <script>
    var ul = document.getElementById('ul');
    ul.onclick = function (a) {
      a.target.style.backgroundColor = 'red';
    }
    var btn = document.getElementById('btn');
    btn.onclick = function () {
      var newNmae = document.createElement('li');
      newNmae.innerHTML = '邱勋涛';
      // ul.insertBefore(newNmae, ul.lastElementChild);
      ul.insertBefore(newNmae, ul.firstElementChild);
      ul.style.backgroundColor = 'pink';


    }
  </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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .search {
            position: relative;
            width: 178px;
            margin: 100px;
        }
        
        .con {
            display: none;
            position: absolute;
            top: -40px;
            width: 171px;
            border: 1px solid red;
            box-shadow: 0 2px 4px greenyellow;
            padding: 5px 0;
            font-size: 18px;
            line-height: 20px;
            color: #333;
        }
        
        .con::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            top: 28px;
            left: 18px;
            border: 8px solid #000;
            border-style: solid dashed dashed;
            border-color: blue transparent transparent;
        }
    </style>
</head>

<body>
    <div class="search">
        <div class="con">123</div>
        <input type="text" placeholder="请输入您的快递单号" class="jd">
    </div>
    <script>
        var con = document.querySelector('.con');
        var jd_input = document.querySelector('.jd');
        jd_input.addEventListener('keyup', function() {
                if (this.value == '') {
                    con.style.display = 'none';
                } else {
                    con.style.display = 'block';
                    con.innerText = this.value;
                }
            })
        jd_input.addEventListener('blur', function() {
                con.style.display = 'none';
            })
        jd_input.addEventListener('focus', function() {
            if (this.value !== '') {
                con.style.display = 'block';
            }
        })
    </script>
</body>

三、电子时钟

请添加图片描述
在这里插入图片描述

<!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>

四、双十一倒计时

请添加图片描述


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .time-item {
      width: 450px;
      height: 45px;
      margin: 0 auto;
    }
    
    .time-item strong {
        background: rgb(0, 255, 85);
        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: rgb(0, 255, 55);
        font-size: 32px;
        margin: 0 10px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .title {
      width: 700px;
      font-size: 80px;
      height: 50px;
      margin:200px auto 50px auto;
      font-family:cursive;text-shadow:6px 2px 2px #333;color:rgb(255, 20, 20);
      
    }
  </style>

</head>
<body>
  <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>
  <script>

    // 目标时间的时间戳
    var endDate = new Date('2021-11-11 0:0:0');
    var end = endDate.getTime();

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

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

    countdown();
    // 倒计时
    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>