JavaScript的简单应用

已于 2023-12-07 14:36:54 修改
阅读量967 收藏 24
点赞数 22
文章标签： javascript 开发语言 html5 前端
于 2023-12-06 23:42:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A0123abc_/article/details/134832279
版权

文章目录

一、电子时钟的设计与实现

1.界面设计

5个div盒子，设成行内块形式，.t1盒子单独设宽，高，边框，让文本居中显示
html

  <style>
      .t1 {
        width: 100px;
        height: 50px;
        display: inline-block;
        border: 1px solid black;
        text-align: center;
        line-height: 50px;
      }
      div {
        display: inline-block;
      }
    </style>

界面

2.动态效果实现步骤

1)引入节点对象

let hh = document.getElementById("ta");
let mm = document.getElementById("tb");
let ss = document.getElementById("tc");

2)Date方法运用

利用Date函数中getHours 、getMinutes 、getSeconds方法获取小时，分钟、秒并赋值给该文档节点内容

let date = new Date();
    hh.innerHTML = date.getHours();
    mm.innerHTML = date.getMinutes();
    ss.innerHTML = date.getSeconds();

3）显示数字永远为双数

如果节点内容变单数则在前面加个0

    if (hh.innerHTML < 10) {
      hh.innerHTML = "0" + hh.innerHTML;
    }
    if (mm.innerHTML < 10) {
      mm.innerHTML = "0" + mm.innerHTML;
    }
    if (ss.innerHTML < 10) {
      ss.innerHTML = "0" + ss.innerHTML;
    }
  }

4）setInterval方法运用

setInterval：每隔1s调用sun函数

setInterval("sun()", 1000);

5onload方法运用

运用onload方法，让每次打开页面立即显示当前时间

  <body onload="sun()">

3.总体效果图

在这里插入图片描述

源代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电子钟设计</title>
    <style>
      .t1 {
        width: 100px;
        height: 50px;
        display: inline-block;
        border: 1px solid black;
        text-align: center;
        line-height: 50px;
      }
      div {
        display: inline-block;
      }
    </style>
  </head>
  <body onload="sun()">
    <h1>电子钟设计</h1>
    <hr />
    <div class="t1" id="ta"></div>
    <div>:</div>
    <div class="t1" id="tb"></div>
    <div>:</div>
    <div class="t1" id="tc"></div>
    <script>
      function sun() {
        let hh = document.getElementById("ta");
        let mm = document.getElementById("tb");
        let ss = document.getElementById("tc");
        let date = new Date();
        hh.innerHTML = date.getHours();
        mm.innerHTML = date.getMinutes();
        ss.innerHTML = date.getSeconds();
        if (hh.innerHTML < 10) {
          hh.innerHTML = "0" + hh.innerHTML;
        }
        if (mm.innerHTML < 10) {
          mm.innerHTML = "0" + mm.innerHTML;
        }
        if (ss.innerHTML < 10) {
          ss.innerHTML = "0" + ss.innerHTML;
        }
      }

      setInterval("sun()", 1000);
    </script>
  </body>
</html>

二．音乐播放器

1.界面设计

1）.样式设计

头像居中显示，下面有一个控制条，底部是由三张图片组成的按钮，将按钮颜色设为透明，不显示边框，让所有盒子内容均居中显示

<style>
#imgg{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-left: 10px;
}
div{
    text-align: center;
    margin:10px
}
button{
    background: transparent;
    border: 0;
    outline: 0;
}
img{
    border: 0;
}
</style>

2）.样式效果图

在这里插入图片描述

2.动态效果实现

1）引入节点对象

let tobtn = document.getElementById(“togglebtn”);
let music = document.getElementById(“audio”);
let volume = document.getElementById(“volume”);
let title = document.getElementById(“title”);

2.）建立两个数组，点击事件

（1）设立两个数据，MusicList对象存储三首歌，设立函数运用他们循环播放，TitleList对象存储三首歌歌名

 let MusicList = new Array(
        "单依纯-爱的回归线(Live).mp3",
        "EndlessHorizon.mp3",
        "单依纯-爱的回归线(Live).mp3"
      );
      let TitleList = new Array("小夜曲", "无尽的地平线", "云海");

（2）点击事件：οnclick=(“函数名（）”)
代码中用到了多处点击事件，如下例，当点击button按钮时，触发点击事件，运行lastMusic函数

 <button onclick="lastMusic()">
        <img src="images/image/next.png" width="50px" height="50px" alt="" />
      </button>

3.）音乐播放与暂停方法

toggleMusic：如果歌曲暂停，就把按钮图片换成暂停的图片，反之则把按钮换成播放的图片

 function toggleMusic() {
        if (music.paused) {
          music.play;
          tobtn.innerHTML =
            '<img src="images/image/pause.png" width="50px" height="50px" alt="" />';
        } else {
          music.paused;
          tobtn.innerHTML =
            '<img src="images/image/play.png" width="50px" height="50px" alt="" />';
        }
      }

4.） 设置音量大小

input属性调用setVolume方法，当音量进度条发生变化时，把音量进度条的值赋值给所听音乐，使得所听音乐与进度条值一致

onchange="setVolume()"
 function setVolume() {
        music.volume = volume.value;
      }

5.） 切换歌曲

（1）切换下一首歌曲

设立一个变量i判断歌曲MusicList数组长度，当变量i==MusicList数组长度-1意味着最后一首歌播放，直接令i=0，并将歌曲路径换成第一首（music.src = MusicList[i]），歌名也换成第一首的（title.innerHTML = TitleList[i]）;当不是最后一首歌播放，直接让i++，两种情况考虑完后先暂停一下音乐调用数组MusicList[i] TitleList[i],更新歌曲歌名，更新后再打开音乐

function nextMusic() {
        if (i == MusicList.length - 1) i = 0;
        else i++;
        music.pause();
        music.src = MusicList[i];
        title.innerHTML = TitleList[i];
        music.play();
      }
(2) 切换上一首歌曲

变量i判断歌曲MusicList数组长度，当变量i==0，意味着第一首歌播放，直接令变量i = MusicList.length – 1，令 i为是最后一首歌 ；当i！=0意味着不是第一首歌，那就直接i–，两种情况考虑完后先暂停一下音乐调用数组MusicList[i] TitleList[i],更新歌曲歌名，更新后再打开音乐

function lastMusic() {
        if (i == 0) i = MusicList.length - 1;
        else i--;
        music.pause();
        music.src = MusicList[i];
        title.innerHTML = TitleList[i];
        music.play();
      }

3.源代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/音乐播放器.css" />
    <title>Document</title>
  </head>
  <body>
    <h1>简单音乐播放器</h1>
    <hr />
    <!-- 音乐文件载入 -->
    <audio src="单依纯-爱的回归线(Live).mp3" id="audio" preload>
      对不起，您的浏览器不支持HTML5的操作
    </audio>
    <!-- 纺CD样式圆形图片 -->
    <div id="CDImage ">
      <img src="images/imm.jpg" alt="" id="imgg" />
    </div>
    <!-- 音量进度条 -->
    <div>
      <input
        id="volume"
        type="range"
        min="0"
        max="1"
        step="0.1"
        onchange="setVolume()"
      />
    </div>
    <!-- 显示歌曲名称 -->
    <div>当前正在播放：<span id="title">小夜曲</span></div>
    <!-- 音乐播放器按钮 -->
    <div>
      <button onclick="lastMusic()">
        <img src="images/image/next.png" width="50px" height="50px" alt="" />
      </button>
      <button onclick="toggleMusic()" id="togglebtn">
        <img src="images/image/pause.png" width="50px" height="50px" alt="" />
      </button>
      <button onclick="nextMusic()">
        <img src="images/image/next.png" width="50px" height="50px" alt="" />
      </button>
    </div>
    <script>
      let tobtn = document.getElementById("togglebtn");
      let music = document.getElementById("audio");
      let volume = document.getElementById("volume");
      let title = document.getElementById("title");
      let MusicList = new Array(
        "单依纯-爱的回归线(Live).mp3",
        "EndlessHorizon.mp3",
        "单依纯-爱的回归线(Live).mp3"
      );
      let TitleList = new Array("小夜曲", "无尽的地平线", "云海");
      let i = 0;
      //音乐播放与暂停方法
      function toggleMusic() {
        if (music.paused) {
          music.play;
          tobtn.innerHTML =
            '<img src="images/image/pause.png" width="50px" height="50px" alt="" />';
        } else {
          music.paused;
          tobtn.innerHTML =
            '<img src="images/image/play.png" width="50px" height="50px" alt="" />';
        }
      }
      //设置音量大小
      function setVolume() {
        music.volume = volume.value;
        console.log(music.volume);
      }
      //切换下一首歌曲
      function nextMusic() {
        if (i == MusicList.length - 1) i = 0;
        else i++;
        music.pause();
        music.src = MusicList[i];
        title.innerHTML = TitleList[i];
        music.play();
      }
      //切换上一首音乐
      function lastMusic() {
        if (i == 0) i = MusicList.length - 1;
        else i--;
        music.pause();
        music.src = MusicList[i];
        title.innerHTML = TitleList[i];
        music.play();
      }
    </script>
  </body>
</html>

4.效果展示

在这里插入图片描述

三.总结：

html+css能够制作静态页面效果，而JavaScript 是一种脚本编程语言，它能让网页展现给你的不再是简单的静态信息，而是实时的内容更新——交互式的地图、2D/3D 动画、滚动播放的视频等等，要想做一个好的页面，js是必不可少的一部分

小涛砸
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值