发表于： 2020-03-16 23:06:05
1 1453
今日完成
基本完成task7
简单了解了js的onclick时间并应用于任务
成果
页面二
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
</script>
<link rel="stylesheet" href="../../css/normalize.css">
<link rel="stylesheet" href="../../css/task7.css">
<title>投票</title>
</head>
<body>
<header>
<div class="game-menu-wrap">
<div class="game-menu-icon">
<span></span>
<span></span>
<span></span>
</div>
<div class="game-menu-list">
<a href="#">分享</a>
<a href="#">设置</a>
</div>
</div>
<span class="game-title">投票</span>
<a href="#" onclick="quit()" class="btn-quit">
<span></span>
</a>
</header>
<div class="top-message">
<div class="top-message-items">
<span>发言讨论结束，大家请投票</span>
<audio id="audio1" src="../../audio/task7.mp3" controls="controls" hidden></audio>
<button class="top-message-audio" onclick="playPause()"></button>
<div class="caret-down"></div>
</div>
<span>点击得票数最多人的头像</span>
</div>
</div>
<div class="main-game">
<div class="game-portrait-row">
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">水民</span>
<span class="game-number">1号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">水民</span>
<span class="game-number">2号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">警察</span>
<span class="game-number">3号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
</div>
<div class="game-portrait-row">
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">法官</span>
<span class="game-number">4号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">狙击手</span>
<span class="game-number">5号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">医生</span>
<span class="game-number">6号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
</div>
<div class="game-portrait-row">
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">杀手</span>
<span class="game-number">7号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">水民</span>
<span class="game-number">8号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">水民</span>
<span class="game-number">9号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
</div>
<div class="game-portrait-row">
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">水民</span>
<span class="game-number">10号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">水民</span>
<span class="game-number">11号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
<div class="portrait-wrap ">
<div class="portrait">
<span class="game-name">杀手</span>
<span class="game-number">12号</span>
</div>
<div class="game-select-wrap">
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
<button type="button" class="game-select-btn"></button>
</div>
</div>
</div>
</div>
<div class="btn-vote-wrap">
<a href="result.html"><button type="button" class="btn-vote">投死</button></a>
</div>
<div ID="popup-quit">
<p>确定要结束游戏吗？</p>
<div class="quit-btn-wrap">
<button class="quit-btn bgcolor1" onclick="skipHome()">确定</button>
<button class="quit-btn bgcolor2" onclick="quitCancle()">取消</button>
</div>
</div>
<script>
var myAudio = document.getElementById('audio1')
function playPause() {
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
}
var cancle = document.getElementById('popup-quit')
function quitCancle() {
cancle.style.display = "none";
}
function quit() {
cancle.style.display = "block";
}
function skipHome() {
window.location.href = "index.html";
}
</script>
</body>
</html>
页面三
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="../../css/task7.css">
</head>
<body>
<header>
<a href="index.html" class="btn-home-icon">
</a>
<span class="game-title">游戏结果</span>
<a href="#" class="btn-info-icon">
</a>
</header>
<div class="result-wrap">
<div class="result clearfix">
<div class="result-logo"></div>
<p class="result-logo-font">太棒了！你知道么？在捉鬼游戏中只有20%的卧底取得游戏最终的胜利哦！</p>
<div class="result-summary">
<p>本次游戏共计用时0小时25分钟</p>
<span>杀  手 2 人  </span>
<span>警 察 1 人  </span>
<span>平 民 6 人</span>
<br />
<span>狙击手 1 人  </span>
<span>医 生 1 人  </span>
<span>法 官 1 人</span>
<p>卧底词汇: 爱新觉罗</p>
<p>水民词汇: 努尔哈赤</p>
</div>
</div>
<div class="result-detailed">
<div class="result-detailed-date">
<span class="detailed-date">第1天</span>
<span class="detailed-time">0小时07分</span>
<p>晚上：2号被杀手杀死，2号是水民</p>
<p>白天：7号被全民投票投死，7号是杀手</p>
</div>
</div>
<div class="result-detailed">
<div class="result-detailed-date">
<span class="detailed-date">第2天</span>
<span class="detailed-time">0小时07分</span>
<p>晚上：2号被杀手杀死，2号是水民</p>
<p>白天：7号被全民投票投死，7号是杀手</p>
</div>
</div>
<div class="result-detailed">
<div class="result-detailed-date">
<span class="detailed-date">第3天</span>
<span class="detailed-time">0小时07分</span>
<p>晚上：2号被杀手杀死，2号是水民</p>
<p>白天：7号被全民投票投死，7号是杀手</p>
</div>
</div>
</div>
</div>
<div class="btn-result-wrap">
<a href="vote.html"><button class="btn-result bgcolor1">再来一局</button></a>
<button class="btn-result bgcolor3">上传并分享</button>
</div>
</body>
</html>
css
header {
position: absolute;
top: 0;
width: 100%;
height: 8vh;
background-color: #29bde0;
text-align: center;
}
/* ---------页面二-------------- */
.game-menu-wrap {
position: absolute;
left: 3vw;
bottom: 0;
width: 3.3vh;
height: 5.1vh;
}
.game-menu-icon {
position: absolute;
width: 100%;
height: 3.3vh;
border: 0.2vh solid #fff;
}
.game-menu-icon>span {
position: absolute;
left: 0.2vh;
width: 2.5vh;
height: 0.2vh;
background-color: #fff;
}
.game-menu-icon span:nth-child(1) {
top: 0.57vh;
}
.game-menu-icon span:nth-child(2) {
top: 1.34vh;
}
.game-menu-icon span:nth-child(3) {
top: 2.11vh;
}
.game-menu-list {
display: none;
position: absolute;
left: 0vh;
top: 5.1vh;
width: 7vh;
height: 10vh;
background-color: #fff;
box-shadow: 1px 2px 3px rgba(0, 0, 0, .2);
z-index: 99;
}
.game-menu-list a {
font-size: 2.5vh;
color: #9a9a9a;
line-height: 5vh;
}
.game-menu-wrap:hover .game-menu-list {
display: block;
}
.game-title {
font-size: 3.5vh;
color: #fff;
line-height: 8vh;
}
.btn-quit {
position: absolute;
right: 3vh;
bottom: 1.8vh;
width: 3.3vh;
height: 3.3vh;
}
.btn-quit span {
display: block;
width: 4.2vh;
height: 0.36vh;
background-color: #fff;
transform: rotate(45deg);
transform-origin: left top;
}
.btn-quit span::after {
content: '';
display: block;
width: 4.2vh;
height: 0.36vh;
background-color: #fff;
transform: rotate(90deg);
}
.btn-quit:hover .popup-quit {
display: block;
}
.top-message {
position: absolute;
top: 8vh;
width: 100%;
height: 13.2vh;
background-color: #69d1e9;
}
.top-message-items {
position: relative;
height: 7.2vh;
background-color: #b9e9f5;
}
.top-message-items>span {
padding-left: 5vh;
line-height: 7.2vh;
}
.top-message-audio {
position: absolute;
top: 1.35vh;
right: 3vw;
width: 4.5vh;
height: 4.5vh;
background-color: #fbb435;
border: none;
border-radius: 50%;
}
.top-message-audio::after {
content: '';
position: absolute;
top: 0.75vh;
left: 1.2vh;
width: 0;
height: 0;
border-top: 1.5vh solid transparent;
border-bottom: 1.5vh solid transparent;
border-left: 2.8vh solid #fff;
border-right: none;
}
.top-message-items::after {
content: '';
position: absolute;
bottom: -2vh;
left: 8vw;
display: block;
width: 0;
height: 0;
border-top: 2vh solid #b9e9f5;
border-left: 1.5vh solid transparent;
border-right: 1.5vh solid transparent;
border-bottom: none;
}
.top-message>span {
display: block;
padding-left: 10vw;
font-size: 2vh;
color: #fff;
line-height: 6vh;
}
.main-game {
position: absolute;
top: 21.2vh;
width: 100%;
height: 61.5vh;
background-color: #69d1e9;
overflow: auto;
}
.game-portrait-row {
display: flex;
justify-content: space-around;
}
.portrait-wrap {
width: 12.7vh;
height: 17.2vh;
margin-top: 1.8vh;
}
.portrait {
width: 12.7vh;
height: 12.7vh;
border: 0.4vh solid #fff;
text-align: center;
}
.game-name {
display: block;
width: 100%;
height: 80%;
background-color: #f5c97b;
}
.game-number {
display: block;
width: 100%;
height: 20%;
background-color: #83b09a;
font-size: 1.5vh;
color: #fff;
}
.game-number::before,
.game-name::before {
display: inline-block;
height: 100%;
vertical-align: middle;
content: "";
}
.game-select-wrap {
display: none;
justify-content: space-between;
margin-top: 1.8vh;
width: 12.7vh;
height: 2.7vh;
}
.game-select-btn {
width: 2.7vh;
height: 2.7vh;
margin: 0;
padding: 0;
border: none;
background-size: 100%;
}
.game-select-btn:nth-child(1) {
background-image: url(../img/task7/task7_01.png);
}
.game-select-btn:nth-child(2) {
background-image: url(../img/task7/task7_02.png);
}
.game-select-btn:nth-child(3) {
background-image: url(../img/task7/task7_03.png);
}
.game-select-btn:nth-child(4) {
background-image: url(../img/task7/task7_04.png);
}
.portrait-wrap:hover .game-select-wrap {
display: flex;
}
.btn-vote-wrap {
position: absolute;
bottom: 0;
width: 100%;
height: 17.3vh;
background-color: #69d1e9;
text-align: center;
}
.btn-vote {
margin-top: 4.55vh;
width: 76.5vw;
height: 8.2vh;
background-color: #fbb435;
border: none;
color: #fff;
}
#popup-quit {
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50vh;
height: 27vh;
background-color: #fff;
text-align: center;
border-radius: 2vh;
}
#popup-quit p {
font-size: 4vh;
;
line-height: 17vh;
}
.quit-btn-wrap {
display: flex;
justify-content: space-around;
}
.quit-btn {
width: 20vh;
height: 5vh;
border: none;
color: #fff;
border-radius: 1vh;
}
.bgcolor1 {
background-color: #f66f6f;
}
.bgcolor2 {
background-color: #c6c6c6;
}
/* ---------------页面三------------ */
.btn-home-icon {
position: absolute;
left: 3vh;
bottom: 1.8vh;
width: 5vh;
height: 4vh;
background-image: url(../img/task7/task7_05.png);
background-size: 100%;
}
.btn-info-icon {
position: absolute;
right: 3vh;
bottom: 1.8vh;
width: 3.6vh;
height: 3.6vh;
background-image: url(../img/task7/task7_06.png);
background-size: 100%;
}
.result-wrap {
position: absolute;
top: 7.9vh;
bottom: 0;
width: 100%;
height: 92vh;
border-top: 0.1vh solid #74d4eb;
overflow: auto;
}
.result {
padding: 0 12vw;
background-color: #29bde0;
}
.result-logo {
width: 31.8vh;
height: 18.6vh;
margin: 2vh auto;
background-image: url(../img/task7/task7_07.png);
background-size: 100%;
}
.result-logo-font {
font-size: 3.3vh;
color: #ffc865;
}
.result-summary {
margin: 5.5vh 0 1.8vh;
font-size: 2.2vh;
line-height: 4vh;
color: #fff;
}
.result-detailed {
height: 14.5vh;
padding: 0 12vw;
background-color: #fff;
border-top: 0.1vh solid #ddd;
}
.detailed-date {
font-size: 3vh;
color: black;
line-height: 5vh;
}
.detailed-time {
float: right;
font-size: 2.2vh;
line-height: 5vh;
color: #d5d5d5;
}
.result-detailed-date>p {
font-size: 2vh;
color: #a6a6a6;
line-height: 4vh;
}
.result-detailed-date>p:last-child::after {
content: '';
display: block;
width: 100%;
height: 11.7vh;
}
.btn-result-wrap {
display: flex;
justify-content: space-around;
align-items: center;
position: absolute;
bottom: 0;
width: 100%;
height: 11.7vh;
background-color: rgba(41, 189, 244, .5);
}
.btn-result {
width: 23vh;
height: 7.5vh;
border: none;
border-radius: 1vh;
font-size: 3vh;
color: #fff;
}
.bgcolor3 {
background-color: #fbb435;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
clear: both;
}
明日计划
尝试用bootstrap轮播图组件优化页面一
优化代码，细节微调
收获
简单了解js的onclick事件，
由document.getElementById获取数据
通过function 实现 audio播放暂停 ，页面跳转，改变css样式等功能
返回列表
评论