LLWiki正在建设中,欢迎加入我们!
“Widget:Lyrics”的版本间差异
跳转到导航
跳转到搜索
小 |
小 |
||
第1行: | 第1行: | ||
<noinclude>{{doc|content={{tl|Lyrics}}。}}</noinclude><includeonly><!--{if !isset($wgLyrics) || !$wgLyrics}--><!--{assign var="wgLyrics" value=true scope="global"}--> |
<noinclude>{{doc|content={{tl|Lyrics}}。}}</noinclude><includeonly><!--{if !isset($wgLyrics) || !$wgLyrics}--><!--{assign var="wgLyrics" value=true scope="global"}--><script> |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
</style><script> |
|||
//</includeonly>Javascript脚本:<pre lang=js> |
//</includeonly>Javascript脚本:<pre lang=js> |
||
window.addEventListener('load', function () { |
window.addEventListener('load', function () { |
||
第38行: | 第22行: | ||
document.getElementsByClassName("Lyrics_box")[0].innerHTML=lyrics_result; |
document.getElementsByClassName("Lyrics_box")[0].innerHTML=lyrics_result; |
||
}); |
}); |
||
//</pre |
//</pre> |
||
< |
<includeonly> |
||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
⚫ | |||
</style><!--{/if}--></includeonly> |
2020年8月10日 (一) 13:37的版本
Javascript脚本:
window.addEventListener('load', function () {
//get the lyrics
var lyrics_original_s=document.getElementsByClassName("lyrics_original")[0].innerHTML;
var lyrics_translated_s=document.getElementsByClassName("lyrics_translated")[0].innerHTML;
//replace <p> to \n
lyrics_original_s=lyrics_original_s.replace(/<p>/g,"").replace(/<\/p>/g,"\n").replace(/<br>/g,"").trim().split("\n");
lyrics_translated_s=lyrics_translated_s.replace(/<p>/g,"").replace(/<\/p>/g,"\n").replace(/<br>/g,"").trim().split("\n");
//arrange lyrics and put into page
var lyrics_result=""
for(var i=0;i<Math.max(lyrics_original_s.length,lyrics_translated_s.length);i++){
if(lyrics_original_s[i]==undefined)lyrics_original_s[i]="";
if(lyrics_translated_s[i]==undefined)lyrics_translated_s[i]="";
lyrics_original_s[i]=lyrics_original_s[i].replace(/{([^,]+?)}(.+?)(?=$|{)/g,"<span style=\"color:$1;\">$2</span>");
lyrics_original_s[i]=lyrics_original_s[i].replace(/{(.+?)}(.+?)(?=$|{)/g,"<span style=\"background:-webkit-linear-gradient(left,$1);-webkit-background-clip:text;background-clip:text;\"><span style=\"-webkit-text-fill-color:transparent;text-fill-color:transparent\">$2</span></span>");
lyrics_original_s[i]=lyrics_original_s[i].replace(/{}/g,"");
lyrics_result+="<div lang=\"ja\" class=\"Lyrics_original\">"+lyrics_original_s[i]+"</div><div class=\"Lyrics_translated\">"+lyrics_translated_s[i]+"</div>";
}
document.getElementsByClassName("Lyrics_box")[0].innerHTML=lyrics_result;
});
//
CSS样式表:
*/
.Lyrics_box {
width: 100%;
max-width: 1080px;
display: inline-block;
}
.Lyrics_box .Lyrics_original,
.Lyrics_box .Lyrics_translated {
width: 49.85%;
min-width: 480px;
display: inline-block;
white-space: pre-wrap;
}
/*