撩妹简单的web小程序！分享给大家~~~~~~ - 好文

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

热门工具换一换