一、音频日历模块
这个案例是本人实际开发时所写
开发要求:
- 通过日历模块控制音频模块
- 点击某天时修改音频及音频模块标题
由于一些问题,暂无法获取数据,但大部分功能均已实现
线上可去 cctv国际在线->土耳其首页底部 ->点击收音机更多
线上案例与以下代码出入削大~不过原理差不多。
HTML:
<div class="right-content">
<div class="radio-wrap">
<div class="radio-box">
<div>
<div class="aPlayer" audiosrc="../土耳其音频/音乐播放器/Mojito.mp3" id="audio_player" style="width: 0px; height: 0px;"> </div>
<div class="title">
<span class="fl">Radyo</span>
<i class="fl"></i>
<div class="clear"></div>
</div>
<div class="line"></div>
<div class="control jp-voice">
<div class="jp-controls">
<div class="jp-play" style="display: block;"></div>
<div class="jp-pasue" style="display: none;"></div>
</div>
<div class="jp-progress fl">
<div class="jp-seek-bar">
<div class="jp-play-bar bar playBar">
<div class="jp-play-bas"></div>
</div>
</div>
</div>
<div class="time">
<div class="jp-current-time current-time fl">00:00:00</div>
<div class="fl">/</div>
<div class="jp-duration duration fl">00:00:00</div>
<div class="clear"></div>
</div>
</div>
<div class="jp-volume-controls">
<button class="jp-mute" role="button" tabindex="0" style="display: block;">mute</button>
<button class="jp-unmute" role="button" tabindex="0" style="display: none;">unmute</button>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
</div>
</div>
</div>
</div>
<div id="calendar" class="calendar">
<div class="calendar-title">
<div class="arrow">
<span class="arrow-prev"><<</span>
<a href="#" class="title"></a>
<span class="arrow-next">>></span>
</div>
</div>
<ul class="calendar-week">
<li class="item">Paz</li>
<li class="item">Pzt</li>
<li class="item">Sal</li>
<li class="item">Çar</li>
<li class="item">Per</li>
<li class="item">Cum</li>
<li class="item">Cmt</li>
</ul>
<ul class="calendar-date">
</ul>
</div>
</div>
CSS:
<style>
* {
box-sizing: content-box;
}
.clear {
*zoom: 1;
}
.clear:after {
content: '·';
display: block;
height: 0;
visibility: hidden;
clear: both;
}
/* 收音机背景 */
.radio-box {
margin: 0 auto;
position: relative;
width: 385px;
height: 130px;
background-image: url(../土耳其音频/音乐播放器/audio_background.png);
background-repeat: no-repeat;
background-position: center;
}
.radio-box .title {
padding-top: 20px;
padding-bottom: 12px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.radio-box>div {
width: 346px;
margin: 0 auto;
}
/* 标题样式 */
.radio-box .title span {
font-size: 18px;
font-weight: 600;
display: block;
line-height: 24px;
}
/* 标题旁边图标 */
.radio-box .title i {
display: block;
background: url(../土耳其音频/音乐播放器/audio_icon.png) no-repeat center;
width: 26px;
height: 22px;
margin-left: 10px;
}
/* 收音机中部横线 */
.radio-box .line {
height: 3px;
background: url(../土耳其音频/音乐播放器/audio_radio-line.png) no-repeat center;
}
/* 收音机暂停按钮 */
.radio-box .jp-play {
background: url(../土耳其音频/音乐播放器/audio_timeout.png) no-repeat center;
width: 60px;
height: 60px;
}
/* 收音机播放按钮 */
.radio-box .jp-pasue {
background: url(../../土耳其页面/土耳其音频/音乐播放器/audio_start.png) no-repeat center;
width: 60px;
height: 60px;
}
/* 控制静音与否 */
.radio-box .jp-volume-controls {
position: absolute;
top: 26px;
right: 102px;
}
.radio-box .jp-volume-controls button {
width: 15px;
height: 15px;
position: absolute;
overflow: hidden;
text-indent: -9999px;
border: none;
cursor: pointer;
}
.radio-box .jp-volume-controls .jp-mute {
background-image: url(../土耳其音频/音乐播放器/audio_turnoffmute.png);
background-color: transparent;
background-repeat: no-repeat;
background-size: 18px 15px;
}
.radio-box .jp-volume-controls .jp-unmute {
background-image: url(../土耳其音频/音乐播放器/audio_mute.png);
background-color: transparent;
background-repeat: no-repeat;
background-size: 12px 15px;
}
.radio-box .jp-volume-controls .jp-volume-bar {
position: absolute;
overflow: hidden;
background: #e4edff;
border-radius: 2px;
border: solid 1px #e8e8e8;
top: 6px;
left: 20px;
width: 60px;
height: 5px;
cursor: pointer;
}
.radio-box .jp-volume-controls .jp-volume-bar .jp-volume-bar-value {
background: #f26d6e;
width: 0;
height: 5px;
border-radius: 2px;
}
.jp-voice {
position: relative;
}
.jp-progress {
position: absolute;
top: 30px;
left: 70px;
cursor: pointer;
width: 140px;
height: 6px;
border-radius: 6px;
background-color: #a5a9ad;
}
.jp-progress .jp-seek-bar {
overflow: hidden;
}
.jp-progress .jp-play-bar {
width: 0%;
height: 6px;
border-radius: 6px;
background-color: red;
}
.jp-progress .jp-play-bas {
display: block;
position: absolute;
top: -5px;
cursor: pointer;
width: 6px;
height: 16px;
background-image: url(../土耳其音频/音乐播放器/audio_progress.png);
background-repeat: no-repeat;
background-position: left;
}
.jp-voice .time {
position: absolute;
top: -2px;
right: 0;
font-size: 12px;
margin-top: 26px;
}
.container {
width: 768px;
height: 486px;
border: 1px solid #ccc;
background-color: #f8f8f8;
overflow: auto;
}
.container p i {
display: inline-block;
width: 12px;
height: 24px;
}
.container p {
line-height: 40px;
padding: 10px;
font-size: 24px;
}
.left-content .title-wrap {
margin-bottom: 43px;
}
.calendar {
margin: 0 auto;
width: 380px;
padding-bottom: 10px;
background-color: #fff;
overflow: hidden;
border: 1px solid #ccc;
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-ms-border-radius: 15px;
-o-border-radius: 15px;
}
.calendar-title {
position: relative;
height: 20px;
line-height: 40px;
padding: 6px 0 20px;
background: #f26d6e;
padding-top: 18px;
}
.calendar-title a.title {
display: inline-block;
font-size: 26px;
padding: 0 25px;
text-decoration: none;
color: #fff;
}
#backToday {
position: absolute;
left: 70%;
top: 8px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
color: #fff;
background-color: rgb(255, 128, 142);
font-size: 18px;
}
.calendar-title .arrow {
position: absolute;
top: 10px;
left: 50%;
width: 250px;
margin-left: -125px;
text-align: center;
}
.calendar-title .arrow span {
color: #fff;
font-size: 20px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.calendar-title .arrow span:hover {
color: #888;
}
.calendar-week {
font-weight: 600;
font-size: 16px;
margin-left: 8px;
}
.calendar-week,
.calendar-date {
overflow: hidden;
margin-left: 12px;
padding-left: 0;
}
.calendar-week .item,
.calendar-date .item {
float: left;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
color: #4e4e4e;
list-style-type: none;
}
.calendar-date .item {
border-radius: 50%;
cursor: pointer;
font-size: 16px;
color: #ccc;
}
.calendar-date .item:hover,
.calendar-date .item-curMonth:hover {
background-color: #f0f0f0;
}
.calendar-date .item-curMonth {
color: #999999;
font-weight: 600;
}
.calendar-date .item-curDay,
.calendar-date .item-curDay:hover {
color: #fff;
background-color: #ff5a6d;
}
.calendar-date .item-selected,
.calendar-date .item-selected:hover {
color: #fff;
background: #ff808e;
}
.calendar-today {
display: none;
position: absolute;
right: 20px;
top: 20px;
width: 90px;
height: 48px;
padding: 6px 10px;
background-color: rgb(255, 128, 142);
border-radius: 5px;
}
.calendar-today .triangle {
position: absolute;
top: 50%;
left: -16px;
margin-top: -8px;
border-width: 8px;
border-style: solid;
border-color: transparent rgb(255, 128, 142) transparent transparent;
}
.calendar-today p {
color: #fff;
font-size: 14px;
line-height: 24px;
}
.rotaion_list {
width: 520px;
height: 390px;
overflow: hidden;
}
.calendar-date ._item,
.calendar-date ._item:hover {
background: #fff!important;
cursor: auto;
}
#calendar {
margin-top: 36px;
box-shadow: 0px 0px 3px 3px rgba(138, 138, 139, 0.2);
}
#calendar .calendar-date a {
display: block;
}
html,
body {
height: 100%;
}
</style>
JS:
<script src="../土耳其音频/JQuery-3.6.0/jquery-3.6.0.min.js"></script>
<!-- 播放器控制 -->
<script>
var mp3_Url = $(".aPlayer").attr("audiosrc"); // 获取 MP3url
var Audio_Box = new Audio(mp3_Url); // 创建音频
var audio_length; // 总时长
var audio_currentlength; // 当前时长
// 时间处理函数
function timeFormat(time) {
var h = Math.floor(time / 3600) < 10 ? '0' + Math.floor(time / 3600) : Math.floor(time / 3600);
var m = Math.floor((time / 60 % 60)) < 10 ? '0' + Math.floor((time / 60 % 60)) : Math.floor((time / 60 % 60));
var s = Math.floor((time % 60)) < 10 ? '0' + Math.floor((time % 60)) : Math.floor((time % 60));
var timeformat = h + ":" + m + ":" + s;
return timeformat;
}
// 获取起始时间以及结尾时间
function getCurTime(curt) {
// 当前时间
var audio_currentTime = timeFormat(curt);
$(".current-time").text(audio_currentTime);
}
getCurTime(Audio_Box.currentTime);
Audio_Box.ondurationchange = function getTimeLength() {
// 总的时间
audio_length = Audio_Box.duration;
audio_currentlength = Audio_Box.currentTime
var audio_lengths = timeFormat(audio_length);
$(".duration").text(audio_lengths);
}
// 播放
$(".jp-controls .jp-play").click(function(e) {
e.preventDefault();
Audio_Box.play();
$(".jp-play").hide();
$(".jp-pasue").show();
// 进度时间及进度条
progresstimer = setInterval(function() {
// 获取进度条
var play_Bar_Num = (Audio_Box.currentTime * 100 / audio_length) + "%";
$(".playBar").width(play_Bar_Num);
$(".jp-play-bas").css('left', play_Bar_Num);
// 进度条
getCurTime(Audio_Box.currentTime);
}, 100)
});
// 暂停
$(".jp-controls .jp-pasue").click(function(e) {
e.preventDefault();
clearInterval(progresstimer);
Audio_Box.pause();
$(".jp-pasue").hide();
$(".jp-play").show();
});
// 静音
$(".jp-volume-controls .jp-mute").click(function(e) {
e.preventDefault();
Audio_Box.muted = true;
$(".jp-mute").hide();
$(".jp-unmute").show();
});
// 开启声音
$(".jp-volume-controls .jp-unmute").click(function(e) {
e.preventDefault();
Audio_Box.muted = false;
$(".jp-unmute").hide();
$(".jp-mute").show();
});
// 音量进度条
function getVolumeBar(val) {
var width_Val = (val.toFixed(1) * 100) + '%';
$(".jp-volume-bar-value").css({
'width': width_Val,
'transition': '0.5s'
});
};
getVolumeBar(1)
// 控制音量
$(".jp-volume-bar").mousedown(function() {
// 鼠标点击位置
var x = event.clientX;
// 音量条到文档的距离
var num = $(".jp-volume-bar").offset().left;
var volume_Num = (x - num) / 60;
getVolumeBar(volume_Num);
// 音量
Audio_Box.volume = volume_Num.toFixed(1);
});
function getprogresscss(val) {
var width_Val = (val.toFixed(2) * 100) + '%'
$(".playBar").css({
'width': width_Val,
'transition': '0.5s'
});
$(".jp-play-bas").css({
'left': width_Val,
'transition': '0.5s'
});
};
// 进度条
$(".jp-progress").mousedown(function() {
// 鼠标点击位置
var progress_X = event.clientX;
// 音量条到文档的距离
var progress_Left = $(".jp-progress").offset().left;
// 进度条前进数值
var progress_Num = (progress_X - progress_Left) / 140;
var cur_Times = progress_Num.toFixed(2) * audio_length; // 点击获得的时间
Audio_Box.currentTime = cur_Times
getprogresscss(progress_Num)
})
</script>
<!-- 日历 -->
<script>
/*
* 用于记录日期,显示的时候,根据dateObj中的日期的年月显示
*/
var dateObj = (function() {
// 默认为当前系统时间
var now_date = new Date();
return {
getDate: function() {
return now_date;
},
setDate: function(date) {
now_date = date;
}
};
})();
showCalendarData();
/**
* 表格中显示数据,并设置类名
*/
function showCalendarData() {
// 所有天数
var all_days = 0;
$(".calendar-date").empty();
var year = dateObj.getDate().getFullYear(); // 获取年份
var month = dateObj.getDate().getMonth() + 1; // 获取月份
var dateStr = getDateStr(dateObj.getDate()); // 获取日期字符串
// console.log(dateStr) // 20220323
//得到每个月多少天
switch (month) {
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
all_days = 31
break;
case 4:
case 6:
case 9:
case 11:
all_days = 30
break;
default:
//判断闰年 得到二月份的天数
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
all_days = 29
} else {
all_days = 28
}
break;
}
// 设置标题栏中的的 年/月
var calendar_Title = $(".calendar .title")
var titleStr = dateStr.substr(0, 4) + "/" + dateStr.substr(4, 2);
calendar_Title.html(titleStr)
// 获取当前月有多少天,生成相应个数的li
//获取当前月份有多少天 生成相应个数的li
renderHtml(all_days);
var firstDay = new Date(year, month - 1, 1);
$(".calendar-date .item").each(function(i) {
// 获取当月所有天数
var allDay = new Date(year, month - 1, i + 2 - firstDay.getDate());
var allDay_Str = getDateStr(allDay);
// console.log(allDay_Str)
$(this).html(allDay.getDate()).attr('data', allDay_Str);
// console.log(allDay.getDate())
if (getDateStr(new Date()) === allDay_Str) {
$(this).attr('class', 'item item-curDay');
} else if (getDateStr(firstDay).substr(0, 6) === allDay_Str.substr(0, 6)) {
$(this).attr('class', 'item item-curMonth');
} else {
$(this).attr('class', '_item item')
}
});
// 今日及以后添加class
$("#calendar .calendar-date .item").each(function() {
if (Math.floor(getNowFormatDate()) < Math.floor($(this).attr('data'))) {
$(this).addClass('noData')
}
})
var firstDayWeek = new Date(year, month - 1, 1).getDay(); // 获取当前月的第一天是周几
renderHtmlPrev(firstDayWeek);
// console.log(firstDay)
clickDay()
}
// 上一月
$(".arrow-prev").click(function() {
// 获取当前日期
var now_date = dateObj.getDate();
dateObj.setDate(new Date(now_date.getFullYear(), now_date.getMonth() - 1, 1))
showCalendarData()
});
// 下一月
$(".arrow-next").click(function() {
// 获取当前日期
var now_date = dateObj.getDate();
dateObj.setDate(new Date(now_date.getFullYear(), now_date.getMonth() + 1, 1))
showCalendarData()
});
// 点击天
function clickDay() {
$(".calendar-date .item").click(function() {
if (!$(this).hasClass("_item")) {
var data_Str = $(this).attr('data'); // 获取点击 li 中的时间
var date = changingStr(addMark(data_Str));
// console.log(date); Date Tue Mar 01 2022 00:00:00 GMT+0800 (中国标准时间)
audioTitle(date.getDay());
// 获取点击的 li
var $curClick = $(".calendar-date").find('[data=' + data_Str + ']');
// dateObj.setDate(new Date(date.getFullYear(), date.getMonth(), 1));
if (!$(this).hasClass('item-curMonth')) {
showCalendar();
}
// 判断是否有 item-selected
if (!$curClick.hasClass('item-selected')) {
$(".calendar-date .item").removeClass('item-selected');
$curClick.addClass('item-selected');
}
var nowDate = $("#calendar .calendar-date .item-curDay").attr("data");
if (Math.floor(data_Str) < Math.floor(nowDate)) {
// console.log('noData');
} else if (Math.floor(data_Str) > Math.floor(nowDate)) {
$(".calendar-date .item").removeClass('item-selected');
} else if (Math.floor(data_Str) == Math.floor(nowDate)) {
// console.log('noData');
}
}
});
}
/*
* 渲染日期
*/
function renderHtml(allday) {
// 日期列表
var dar_Str = '';
// 一个月最多31天,所以一个月最多占6行表格 ps:li中数字测试用
for (var i = 1; i <= allday; i++) {
dar_Str += '<li class="item">' + i + '</li>';
};
$(".calendar-date").html(dar_Str)
}
/*
* 渲染日期前方空格
*/
function renderHtmlPrev(firstprev) {
var prevdar_Str = '';
for (var i = 0; i < firstprev; i++) {
prevdar_Str += '<li class="_item item"></li>'
}
$(".calendar-date").prepend(prevdar_Str)
}
/**
* 日期转化为字符串, 4位年+2位月+2位日 ps:20220323
*/
function getDateStr(date) {
var _year = date.getFullYear();
var _month = date.getMonth() + 1; // 月从0开始计数
var _d = date.getDate();
_month = (_month > 9) ? ("" + _month) : ("0" + _month);
_d = (_d > 9) ? ("" + _d) : ("0" + _d);
return _year + _month + _d;
}
/**
* 日期转化为字符串,获取前一日日期 4位年+2位月+2位日 ps:20220322
*/
function getNowFormatDate() {
var date = new Date();
var _year = date.getFullYear();
var _month = date.getMonth() + 1; // 月从0开始计数
var _d = date.getDate() - 1;
_month = (_month > 9) ? ("" + _month) : ("0" + _month);
_d = (_d > 9) ? ("" + _d) : ("0" + _d);
var current_Date = _year + _month + _d;
// console.log(current_Date)
return current_Date;
}
/**
* 字符串转日期
*/
function changingStr(dataStr) {
var fullDate = dataStr.split("-");
return new Date(fullDate[0], fullDate[1] - 1, fullDate[2]);
};
/**
* 给传进来的日期字符串加-
*/
function addMark(date) {
return date.substr(0, 4) + '-' + date.substr(4, 2) + '-' + date.substring(6);
};
/**
* 收音机标题
*/
function audioTitle(thisweek) {
var _weekStr = '';
switch (thisweek) {
case 0:
_weekStr = 'Pazar';
break;
case 1:
_weekStr = 'Pazartesi';
break;
case 2:
_weekStr = 'Salı';
break;
case 3:
_weekStr = 'Çarşamba';
break;
case 4:
_weekStr = 'Perşembe';
break;
case 5:
_weekStr = 'Cuma';
break;
case 6:
_weekStr = 'Cumartesi';
break;
}
$('.radio-wrap .title span').html(_weekStr);
}
</script>