Skip to content

Commit

Permalink
finish
Browse files Browse the repository at this point in the history
  • Loading branch information
@suxun1202
suxun1202 committed Sep 16, 2017
1 parent 9509723 commit 4aab070
Show file tree
Hide file tree
Showing 5 changed files with 188 additions and 129 deletions.
5 changes: 4 additions & 1 deletion index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -487,6 +487,8 @@
font-size: 26.4099px;
width: 1em; height: 1em;
fill: #aaa;
position: relative;
z-index: 15;
}
.searchHistoryContent{
line-height: 45px;
Expand All @@ -513,7 +515,8 @@
transform-origin: 0 0 ;
top: 0;
left: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1)
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
z-index:-1
}
.upperline{
position:relative;
Expand Down
56 changes: 4 additions & 52 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,12 +63,12 @@
</div>
<div class="tabs">
<ul>
<li>
<li class="active">
<div class="wrap">
<span>推荐音乐</span>
</div>
</li>
<li class="active">
<li>
<div class="wrap">
<span>热歌榜</span>
</div>
Expand All @@ -83,7 +83,7 @@
</div>
<div class="tab-contents">
<ol>
<li class="page1">
<li class="page1 active">
<div class="recommendedSongs">
<h2 class="title">推荐歌单</h2>
<div class="albums">
Expand Down Expand Up @@ -211,7 +211,7 @@ <h2 class="title">最新音乐</h2>
<p class="copyright">网易公司版权所有©1997-2017 杭州乐读科技有限公司运营</p>
</div>
</li>
<li class="page2 active">
<li class="page2">
<div class="banner">
<div class="bannerCover">
<div class="hotSpirit">
Expand Down Expand Up @@ -280,54 +280,6 @@ <h3>热门搜索</h3>
</div>
</div>
<ul class="history">
<li>
<div class="clock">
<svg class="icon icon-clock">
<use xlink:href="#icon-clock"></use>
</svg>
</div>
<div class="searchHistoryContent">
<span>薛之谦</span>

<div class="close">
<svg class="icon icon-close">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>

</li>
<li>
<div class="clock">
<svg class="icon icon-clock">
<use xlink:href="#icon-clock"></use>
</svg>
</div>
<div class="searchHistoryContent">
<span>暧昧</span>
<div class="close">
<svg class="icon icon-close">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>
<li>
<div class="clock">
<svg class="icon icon-clock">
<use xlink:href="#icon-clock"></use>
</svg>
</div>
<div class="searchHistoryContent">
<span>暧昧</span>
<div class="close">
<svg class="icon icon-close">
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>

</li>
</ul>
</div>
</li>
Expand Down
84 changes: 83 additions & 1 deletion scripts/logic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,8 @@ $('input#query').on('input', function (e) {
var $input = $(e.currentTarget)
var value = $input.val()
if (value.trim() === '') {
$('.inputValue').html('')
$('.searchTip').empty();
return;
} else {
$('.inputValue').html(`搜索"${value}"`)
Expand Down Expand Up @@ -177,4 +179,84 @@ $('.searchTip').on('click', 'li', function (e) {
if (result[index].attributes.highquality) {
$('.searchResultDetail li').find('.singer').prepend(liSQ)
}
})
$('input#query').val($(e.currentTarget).find('.searchResult').text().trim())
historyObject[$('input#query').val()] = {
haveSearched:true,
info:result[index]
};
initializeHistoryObject()
})
function initializeHistoryObject(){
$('.hotAndHistory .history').children().remove()
let keyArray = Object.keys(historyObject).reverse();
if(keyArray.length>5){
keyArray = keyArray.slice(0,6)
}
keyArray.map(function(ele){
if(historyObject[ele].haveSearched) {
let li = `
<li data='${ele}'>
<div class="clock">
<svg class="icon icon-clock">
<use xlink:href="#icon-clock"></use>
</svg>
</div>
<div class="searchHistoryContent">
<span>${ele}</span>
<div class="close">
<svg class="icon icon-close" data='${ele}'>
<use xlink:href="#icon-close"></use>
</svg>
</div>
</div>
</li>
`
$('.hotAndHistory .history').append(li)
}
})
}

$('.hotAndHistory .history').on('click','.icon-close',function(e){
e.stopPropagation()
let key = $(e.currentTarget).attr('data')
historyObject[key].haveSearched = false;
$(e.currentTarget).parent().parent().parent().remove()
})
$('.hotAndHistory .history ').on('click', 'li',function(e){
let key = $(e.currentTarget).attr('data')
let songInfo = historyObject[key].info
showSearchResultPageN(2)
$('.searchResultDetail ol').empty();
let li = `
<li>
<a href="./song.html?id=${songInfo.id}">
<div class="songInfo">
<div class="songName">
<p>${songInfo.attributes.name}</p>
</div>
<div class="singer">
${songInfo.attributes.singer}-${songInfo.attributes.album}
</div>
</div>
<div class="play">
<svg class="icon">
<use xlink:href="#icon-play"></use>
</svg>
</div>
</a>
</li>
`
$('.searchResultDetail ol').append(li);
let liSQ = `
<svg class="icon">
<use xlink:href="#icon-SQ"></use>
</svg>
`;
if (songInfo.attributes.highquality) {
$('.searchResultDetail li').find('.singer').prepend(liSQ)
}

})
// $('body').on('click',function(e){
// console.log(e.target)
// })
46 changes: 27 additions & 19 deletions scripts/song.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,6 @@ function parseLyric(lyric) {
img.src = coverImgURL;
document.querySelector('.circle').appendChild(img)
$(img).attr('class', 'cover')
lrcObj = parseLyric(lyric)
var paddingBottom = parseInt($('.lyricScroll p').css('padding-bottom'))
var height = $('.lyricScroll p').height() + paddingBottom;
var video = document.createElement('video')
Expand All @@ -73,29 +72,38 @@ function parseLyric(lyric) {
transform: 'translateY(0)'
})
})
$('video')[0].addEventListener('timeupdate', function (e) {
var crtTime = parseInt($('video')[0].currentTime);
if (lrcObj[crtTime]) {
let index = Object.keys(lrcObj).indexOf(crtTime.toString()) - 1;
// index = index < 0 ? 0 : index;
if (index < 0) {
index = 0;
$('.lyricScroll').css({
transform: 'translateY(' + (-height * index) + 'px)'
})
$('.lyricScroll p').eq(index).addClass('highLight').siblings('.highLight').removeClass('highLight')
} else {
$('.lyricScroll').css({
transform: 'translateY(' + (-height * index) + 'px)'
})
$('.lyricScroll p').eq(index + 1).addClass('highLight').siblings('.highLight').removeClass('highLight')
if (lyric) {
lrcObj = parseLyric(lyric)
$('video')[0].addEventListener('timeupdate', function (e) {
var crtTime = parseInt($('video')[0].currentTime);
if (lrcObj[crtTime]) {
let index = Object.keys(lrcObj).indexOf(crtTime.toString()) - 1;
// index = index < 0 ? 0 : index;
if (index < 0) {
index = 0;
$('.lyricScroll').css({
transform: 'translateY(' + (-height * index) + 'px)'
})
$('.lyricScroll p').eq(index).addClass('highLight').siblings('.highLight').removeClass('highLight')
} else {
$('.lyricScroll').css({
transform: 'translateY(' + (-height * index) + 'px)'
})
$('.lyricScroll p').eq(index + 1).addClass('highLight').siblings('.highLight').removeClass('highLight')
}
}
}
})
})
} else {
let li = `
<p class='pure'>纯音乐，无歌词</p>
`
$('.lyricScroll').append(li)
}
})
})()
$('svg.play').on('click', function (e) {
$('video')[0].play()
// $('video').play()
$('.circle').removeClass('pause').addClass('playing')
$('svg.play').addClass('hide')
})
Expand Down
Loading

0 comments on commit 4aab070

Please sign in to comment.