撩妹簡單的web小程式！分享給大家~~~~~~
阿新 • • 發佈：2018-12-28
<!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>