1.项目共分为8个网页：


首页、历史文化、景区概况、推荐游玩、美食一览、文化活动、地理位置、联系我们


纯css+html实现的静态网页，很适合新手学习和使用，  源码下载

如下图，首页：

含背景音乐循环播放，自动播放（首先浏览器兼容自动播放），顶部菜单，每个菜单链接一个页面，通过a标签，css重置a标签的样式，一张背景图，两个大标题居中显示，左下角音频播放图标，播放时360度动态旋转效果

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_ide

 

定义和用法

animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

注释：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

默认值：

none 0 ease 0 1 normal

继承性：

no

版本：

CSS3

JavaScript 语法：

object.style.animation="mymove 5s infinite"

默认值：

none 0 ease 0 1 normal

继承性：

no

版本：

CSS3

JavaScript 语法：

object.style.animation="mymove 5s infinite"

语法


animation: name duration timing-function delay iteration-count direction;


值

描述

animation-name

规定需要绑定到选择器的 keyframe 名称。。

animation-duration

规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function

规定动画的速度曲线。

animation-delay

规定在动画开始之前的延迟。

animation-iteration-count

规定动画应该播放的次数。

animation-direction

规定是否应该轮流反向播放动画。

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_加载_02

历史文化：

顶部同样八个菜单，正文标题居中，内容左边文字段落，右边图片排版，背景透明

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_html_03

 景区概况：

正文每一行三张图片间隔排序

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_加载_04

 推荐游玩：

标题居中，内容排版刚好与历史文化相反，左边图片，右边文字，背景白色

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_加载_05

 美食一览：

标题居中，内容排版刚好与景区概况一样

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_html_06

 文化活动：

标题居中，内容排版刚好与推荐游玩一样，左边图片，右边文字，背景白色

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_html_07

 地理位置：

标题居中，文字简洁+一张图片位置

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_加载_08

联系我们：

form表单实现

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_加载_09

 2.整个项目基于纯css+html，音频播放用了vue，目录结构如下图

用JavaScript制作一个简单的前端静态网页项目 用web做一个静态网页_ide_10

3.首页源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/common.css">
    <script src="../js/vue/vue.js"></script>
</head>
<body style="background-color: #548F7A">
    <video autoplay muted loop src="ing.mp4" hidden></video>
</body>
<body>
<div id="app" >
    <audio src="../media/music.mp3" ref="player" hidden="false" autoplay="true" loop="true"></audio>
    <div class="top-box">
        <div class="name">DAXINGANLING</div>
        <div class="menu menu-left menu-active">
            <a href="index.html">首页</a>
        </div>
        <div class="menu">
            <a href="history.html">历史文化</a>
        </div>
        <div class="menu">
            <a href="spot.html">景区概况</a>
        </div>
        <div class="menu">
            <a href="recommend.html">推荐游玩</a>
        </div>
        <div class="menu">
            <a href="food.html">美食一览</a>
        </div>
        <div class="menu">
            <a href="culture.html">文化活动</a>
        </div>
        <div class="menu">
            <a href="map.html">地理位置</a>
        </div>
        <div class="menu">
            <a href="contact.html">联系我们</a>
        </div>
    </div>
    <div class="index-big-title">
        <div>大兴安岭</div>
        <div>美丽的大自然</div>
    </div>

    <!--  isPlay为1就说明播放中，加动态旋转效果  -->
    <div :class="'music-box '+(isPlay==1?'img-move-box':'')" @click="playFun">
        <img src="../images/music.png">
    </div>

</div>
</body>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                isPlay: 0,//默认0未自动播放  1播放  2暂停
            };
        },
        mounted() {
            let that = this;
            let eleMusic = this.$refs.player;
            eleMusic.addEventListener('waiting', function () { //加载
                console.log("加载中");
            });
            eleMusic.addEventListener('play', function () { //播放开始执行的函数
                console.log("开始播放");
                that.isPlay = 1;
                console.log(that.isPlay);
            });
            eleMusic.addEventListener('playing', function () { //播放中
                console.log("播放中");
                that.isPlay = 1;
                console.log(that.isPlay);
            });
            eleMusic.addEventListener('pause', function () { //暂停开始执行的函数
                console.log("暂停播放");
                console.log(that.isPlay);
                if(that.isPlay == 1){//循环自动播放
                    that.$refs.player.play();
                }
            });
            this.playFun();//加载马上自动播放，有些浏览器已经不支持自动播放，可以先设置浏览器允许自动播放
        },
        methods: {
            playFun() {
                if (!this.$refs.player) {
                    alert('播放资源不存在!');
                    return;
                }
                if (this.isPlay == 1) { //暂停
                    this.isPlay = 2;
                    this.$refs.player.pause();
                } else if (this.isPlay == 0 || this.isPlay == 2) { //播放
                    this.$refs.player.play();
                }
            },
        }
    })
</script>

</html>

4.JS监听和判断Video视频播放、暂停、结束、长度信息

为了更好的控制视频的状态，我们可以使用JS来监听和判断Video视频播放、暂停、结束、长度等信息，下面总结一下JS监听VIDEO视频信息的代码。

（1）HTML页面视频标签大体如下

<video id="video" controls="controls">
<source type="video/mp4" src="mi.mp4">
</video>

（2）视频加载后获取视频的长度

var elevideo = document.getElementById("video");
elevideo.addEventListener('loadedmetadata', function () { //加载数据
//视频的总长度
console.log(elevideo.duration);
});

（3）视频开始播放

var elevideo = document.getElementById("video");
elevideo.addEventListener('play', function () { //播放开始执行的函数
console.log("开始播放");
});

（4） 视频正在播放中

var elevideo = document.getElementById("video");
elevideo.addEventListener('playing', function () { //播放中
console.log("播放中");
});

（5）视频加载中

var elevideo = document.getElementById("video");
elevideo.addEventListener('waiting', function () { //加载
console.log("加载中");
});

（6）视频暂停播放

var elevideo = document.getElementById("video");
elevideo.addEventListener('pause', function () { //暂停开始执行的函数
console.log("暂停播放");
});

（7）视频结束播放

 

var elevideo = document.getElementById("video");
elevideo.addEventListener('ended', function () { //结束
console.log("播放结束");
}, false);