<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<title>你是猪?</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
body {
background: #a3a3a3;
}
.name {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #000;
font-weight: bold;
}
.img {
margin: 0 auto;
width: 100%;
height: auto;
overflow: hidden;
margin-top: 30px;
}
.img img {
display: block;
width: 80%;
border-radius:100%;
height: auto;
margin: 0 auto;
}
.rainbow {
animation: 6s rainbow infinite linear;
}
@keyframes rainbow {
0% {
transform: rotate(0deg)
}
100% {
transform: rotate(360deg)
}
}
.time {
width: 100%;
height: 30px;
overflow: hidden;
line-height: 30px;
font-size: 14px;
color: #000;
margin-top: 30px;
}
.now_time {
float: left;
}
.all_time {
float: right;
}
.gc_show {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 14px;
margin-top: 30px;
}
.time_progress {
width: 100%;
height: 6px;
}
.progress {
width: 100%;
height: 6px;
background: #000;
position: relative;
}
.bar {
position: absolute;
top: 0;
left: 0;
height: 6px;
background: #09f;
display: block;
}
.btn {
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
position: absolute;
position: absolute;
top: -8px;
}
.contros {
width: 90%;
height: 60px;
margin: 0 auto;
overflow: hidden;
line-height: 60px;
}
.button {
margin: 0 auto;
display: block;
margin-top: 10px;
}
</style>
</head>
<body>
<audio src="http://mp3.flash127.com/music/36042.mp3" id="my_audio"></audio>
<!--音乐名字-->
<h1 class="name">最美的期待</h1>
<!--cd播放机-->
<div class="img">
<img src="http://bpic.ooopic.com/16/10/73/16107312-87c6acb63010a33b6e94594a9b11044a.jpg" />
</div>
<!--歌词显示-->
<!--时间-->
<div class="time">
<!--当前时间-->
<span class="now_time" id="now_time">00:00</span>
<!--总的时间-->
<span class="all_time" id="all_time">00:00</span>
</div>
<!--时间轴-->
<div class="time_progress">
<div class="progress">
<p class="bar" id="bar"></p>
<div class="btn" id="btn"></div>
</div>
</div>
<!--暂停或播放-->
<div class="contros">
<button class="button" onClick="playPause()">暂停/播放</button>
</div>
<script type="text/javascript">
function lv() {
var msg = "你是猪吗?\n\n请确认!";
if (confirm(msg) == true) {
var i = prompt("请输入姓名", name);
if (i == null || i == '') {
alert('姓名不能为空!请重新输入');
lv();
} else if (i !== '贾莉') {
alert('你不叫' + i + '哦,请重新输入!');
lv();
} else if (i === '贾莉') {
alert('原来' + i + '真的是猪,哈哈哈哈哈!');
alert('最后送你一首歌,希望你天天开心快乐!')
}
} else {
alert('别费劲了,关不掉的,还是点“确认”吧!');
lv();
}
}
lv();
var my_audio = document.getElementById("my_audio");
var p_all = $(".progress").width();
//暂停或播放
function playPause() {
if (my_audio.paused) {
my_audio.play();
$(".img img").addClass("rainbow");
} else {
my_audio.pause();
$(".img img").removeClass("rainbow");
}
}
//
my_audio.onplay = function () {
$(".img img").addClass("rainbow");
}
my_audio.onpause = function () {
$(".img img").removeClass("rainbow");
}
//audio播放的时候实时获取当前播放时间
my_audio.ontimeupdate = function () {
//获取当前播放时间
document.getElementById("now_time").innerHTML = timeFormat(my_audio.currentTime);
//当前的长度
now_long = my_audio.currentTime / my_audio.duration * p_all;
$(".bar").css({
width: now_long
});
var btn_l = now_long - 10 + 'px';
$(".btn").css({
left: btn_l
});
//
addListenTouch()
};
//页面一旦加入就获取audio的总时间
my_audio.onprogress = function () {
document.getElementById("all_time").innerHTML = timeFormat(my_audio.duration);
//总的长度
};
//时间转化
function myFunction() {
// 显示 id="now_time" 的 span 元素中音频的播放位置
}
// Time format converter - 00:00//时间格式转换器- 00:00
var timeFormat = function (seconds) {
var m = Math.floor(seconds / 60) < 10 ? "0" + Math.floor(seconds / 60) : Math.floor(seconds / 60);
var s = Math.floor(seconds - (m * 60)) < 10 ? "0" + Math.floor(seconds - (m * 60)) : Math.floor(seconds - (m * 60));
return m + ":" + s;
};
//手动拉拽进度条的部分
function addListenTouch() {
//var speed=$('.had-play');
var btn = document.getElementById("btn");
document.getElementById("btn").addEventListener("touchstart", touchStart, false);
document.getElementById("btn").addEventListener("touchmove", touchMove, false);
document.getElementById("btn").addEventListener("touchend", touchEnd, false);
}
function touchStart(e) {
e.preventDefault();
var touch = e.touches[0];
startX = touch.pageX;
my_audio.pause();
document.getElementById("all_time").innerHTML = timeFormat(my_audio.duration);
}
function touchMove(e) { //滑动
e.preventDefault();
var touch = e.touches[0];
x = touch.pageX - startX //滑动的距离
//btn.style.webkitTransform='translate('+0+'px,'+y+'px)';
var widthBar = now_long + x;
//
$(".bar").css({
width: widthBar
});
if (widthBar < p_all) {
//
$("#btn").css({
left: widthBar - 10 + 'px'
});
$("#bar").css({
width: widthBar
});
} //不让进度条超出页面
//
var yu = widthBar / p_all * my_audio.duration;
document.getElementById("now_time").innerHTML = timeFormat(yu);
}
function touchEnd(e) { //手指离开屏幕
e.preventDefault();
now_long = parseInt(btn.style.left);
var touch = e.touches[0];
var dragPaddingLeft = btn.style.left;
var change = dragPaddingLeft.replace("px", "");
numDragpaddingLeft = parseInt(change);
var currentTime = (numDragpaddingLeft / (p_all - 20) * my_audio.duration);
my_audio.play();
document.getElementById("all_time").innerHTML = timeFormat(my_audio.duration);
my_audio.currentTime = currentTime;
}
</script>
</body>
</html>
撩妹简单的web小程序!分享给大家~~~~~~
猜你喜欢
转载自blog.csdn.net/qq_36072384/article/details/81290279
今日推荐
周排行