Paul/Kico-Player-Docs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Init: 2023 Version

Browse Source 
从服务器拉取的最新版本
This commit is contained in:
Paul
2024-09-18 17:07:01 +08:00
commit 3027a7be4f
12 changed files with 3755 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/KPlayer.css
+284
View File
@@ -0,0 +1,284 @@
@charset "UTF-8";
/* ----
# Kico Player 0.9
# By: Dreamer-Paul
# Last Update: 2021.8.30
一个简洁强大的网页音乐播放器。
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
---- */
kplayer{
--kp-primary: #3498db;
--kp-secondly: #ffc670;
--kp-gray: #aaa;
display: block;
overflow: auto;
font-size: 14px;
line-height: 1.5em;
background: #fff;
border-radius: 4px;
position: relative;
box-shadow: 0 1px 5px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1);
}
kplayer *{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* - 面板 */
kplayer .kp-header{
height: 4em;
cursor: default;
overflow: hidden;
line-height: 1em;
user-select: none;
position: relative;
}
/* - 专辑 */
kplayer .kp-cover{
width: 4em;
height: 4em;
float: left;
margin-right: 1em;
vertical-align: middle;
transition: background .3s;
background: var(--kp-gray) url(data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QMqaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjUtYzAyMSA3OS4xNTQ5MTEsIDIwMTMvMTAvMjktMTE6NDc6MTYgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bXA6Q3JlYXRvclRvb2w9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTNERjEzRjQzMDQzMTFFOEI5NkQ5NTkwMTU2NDBFMzUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTNERjEzRjUzMDQzMTFFOEI5NkQ5NTkwMTU2NDBFMzUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1M0RGMTNGMjMwNDMxMUU4Qjk2RDk1OTAxNTY0MEUzNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1M0RGMTNGMzMwNDMxMUU4Qjk2RDk1OTAxNTY0MEUzNSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv/uACZBZG9iZQBkwAAAAAEDABUEAwYKDQAABu4AAAdjAAAJgAAAC1D/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) center/cover;
}
/* - 时间 */
kplayer .kp-time{
left: 0;
width: 4em;
opacity: 0;
color: #fff;
display: block;
line-height: 4em;
position: absolute;
text-align: center;
transition: opacity .3s;
background: rgba(0, 0, 0, .5);
border-top-left-radius: 4px;
}
kplayer .kp-header:hover .kp-time{
opacity: 1;
}
/* - 信息 */
kplayer .kp-info{
margin: .6em 6.5em .5em 5em;
}
kplayer .kico-title, kplayer .kico-artist{
display: block;
overflow: hidden;
white-space: nowrap;
padding-bottom: .5em;
text-overflow: ellipsis;
}
kplayer .kico-artist{
color: #aaa;
color: var(--kp-gray);
font-size: .85em;
}
/* - 按钮 */
kplayer .kp-controls{
top: 0;
left: 4em;
right: 0;
bottom: 0;
opacity: 0;
padding: .5em;
background: #fff;
position: absolute;
transition: opacity .3s;
}
kplayer .kp-header:hover .kp-controls{
opacity: 1;
}
kplayer .control-item{
color: #3498db;
color: var(--kp-primary);
cursor: pointer;
display: inline-block;
}
kplayer .control-item svg{
width: 2.5em;
height: 2.5em;
}
/* - 设置 */
kplayer .kp-settings{
top: .75em;
right: .5em;
position: absolute;
}
kplayer .setting-item{
width: 2em;
color: #aaa;
color: var(--kp-gray);
cursor: pointer;
line-height: 2em;
text-align: center;
display: inline-block;
}
kplayer .setting-item svg{
width: 1.5em;
height: 1.5em;
vertical-align: middle;
}
/* - 进度条 */
kplayer .kp-bar{
left: 4em;
right: 0;
bottom: 0;
height: .4em;
cursor: pointer;
position: absolute;
background: #efefef;
}
kplayer .kp-bar .loaded,
kplayer .kp-bar .played{
top: 0;
height: .4em;
max-width: 100%;
position: absolute;
}
kplayer .kp-bar .loaded{
background: #e5e5e5;
}
kplayer .kp-bar .played{
background-color: #ffc670;
background-color: var(--kp-secondly);
}
/* 下拉载入
-------------------------------- */
kplayer .kp-drop{
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
color: #fff;
visibility: hidden;
position: absolute;
pointer-events: none;
background: rgba(0, 0, 0, .3);
transition: opacity .3s, visibility .3s;
}
kplayer .kp-drop.active{
opacity: 1;
visibility: visible;
}
kplayer .kp-drop span{
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 1em;
margin: auto;
display: block;
font-size: 2em;
line-height: 1em;
text-align: center;
position: absolute;
}
/* 播放列表
-------------------------------- */
kplayer .kp-list{
max-height: 0;
overflow: auto;
list-style: none;
user-select: none;
transition: max-height .3s;
border-bottom: 1px solid #eee;
}
kplayer .kp-list.show{
max-height: 15em;
max-height: 50vh;
}
kplayer .kp-list::-webkit-scrollbar{ width: 5px }
kplayer .kp-list::-webkit-scrollbar-thumb{
background: #eee;
}
kplayer .kp-list::-webkit-scrollbar-thumb:hover{
background-color: #3498db;
background-color: var(--kp-primary);
}
kplayer .list-item{
cursor: pointer;
overflow: hidden;
padding: .75em 1em;
position: relative;
white-space: nowrap;
text-overflow: ellipsis;
transition: background .3s, padding .3s;
}
kplayer .list-item.current{
padding-left: 1.5em;
}
kplayer .list-item.current:before{
content: '';
top: 1em;
left: -.5em;
width: 1em;
height: 1em;
display: block;
position: absolute;
background-color: #ffc670;
background-color: var(--kp-secondly);
transform: rotate(45deg);
}
kplayer .list-item:nth-child(1n){
background: rgba(0, 0, 0, .02);
}
kplayer .list-item:nth-child(2n){
background: #fff;
}
kplayer .list-item:hover{
background: rgba(0, 0, 0, .05);
}
kplayer .item-number, kplayer .item-artist{
opacity: .6;
}
kplayer .item-number{
margin-right: .75em;
}
kplayer .item-title:after{
content: '-';
margin: 0 .25em;
}
/* 歌词
-------------------------------- */
kplayer .kp-lyrics{
color: #666;
text-align: center;
}
kplayer .kp-lyrics span{
padding: 1em;
display: block;
overflow: hidden;
line-height: 1em;
white-space: nowrap;
text-overflow: ellipsis;
}
kplayer .kp-lyrics span:empty:after{
content: "Music...";
}
static/KPlayer.js
+602
View File
@@ -0,0 +1,602 @@
/* ----
# KPlayer 0.9
# By: Dreamer-Paul
# Last Update: 2023.5.22
一个简洁强大的网页音乐播放器。
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
---- */
var KPlayer = function KPlayer (settings) {
var that = this;
// 状态记录
var current = {
id: 0,
last_id: 0,
playlist: [],
randlist: [],
lyric: [],
lyric_index: 0,
play_mode: 0, // 默认、循环、随机模式 normal(0) loop(1) random(2)
page_title: document.title
};
var icons = {
left: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="currentColor"><path d="M13,10c1.1,0,2,1.35,2,3v3.7l10.495-5.772C27.423,9.867,29,10.8,29,13v14c0,2.2-1.577,3.133-3.505,2.072L15,23.3V27c0,1.65-0.9,3-2,3s-2-1.35-2-3V13C11,11.35,11.9,10,13,10z"/></svg>',
right: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="currentColor"><path d="M27,10c-1.1,0-2,1.35-2,3v3.7l-10.495-5.772C12.577,9.867,11,10.8,11,13v14c0,2.2,1.577,3.133,3.505,2.072L25,23.3V27c0,1.65,0.9,3,2,3s2-1.35,2-3V13C29,11.35,28.1,10,27,10z"/></svg>',
play: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="currentColor"><path d="M20,0C8.954,0,0,8.954,0,20c0,11.046,8.954,20,20,20s20-8.954,20-20C40,8.954,31.046,0,20,0z M28.495,21.928l-12.99,7.145C13.577,30.133,12,29.2,12,27V13c0-2.2,1.577-3.133,3.505-2.072l12.99,7.145C30.423,19.133,30.423,20.867,28.495,21.928z"/></svg>',
pause: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="currentColor"><path d="M20,0C8.954,0,0,8.954,0,20c0,11.046,8.954,20,20,20s20-8.954,20-20C40,8.954,31.046,0,20,0z M17,27c0,1.65-0.9,3-2,3s-2-1.35-2-3V13c0-1.65,0.9-3,2-3s2,1.35,2,3V27z M27,27c0,1.65-0.9,3-2,3s-2-1.35-2-3V13c0-1.65,0.9-3,2-3s2,1.35,2,3V27z"/></svg>',
none: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M18.164,24.535c-0.259,0-0.656-0.078-1.076-0.451l-4.13-3.673C12.729,20.208,12.182,20,11.875,20H10.5c-1.103,0-2-0.897-2-2v-8c0-1.103,0.897-2,2-2h1.375c0.307,0,0.854-0.208,1.083-0.412l4.13-3.671c0.42-0.374,0.817-0.452,1.076-0.452C18.828,3.465,19.5,3.992,19.5,5v18C19.5,24.008,18.828,24.535,18.164,24.535z M10.5,10v8h1.375c0.8,0,1.814,0.386,2.412,0.916l3.213,2.856V6.228l-3.213,2.855C13.689,9.614,12.675,10,11.875,10H10.5z"/></svg>',
low: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M19.53,17.694l-0.765-1.848c0.494-0.205,0.878-0.589,1.083-1.081c0.422-1.019-0.063-2.191-1.082-2.613l0.765-1.848c2.037,0.843,3.008,3.188,2.164,5.227C21.287,16.518,20.518,17.285,19.53,17.694z"/><path d="M15.664,24.535c-0.259,0-0.656-0.078-1.076-0.451l-4.13-3.673C10.229,20.208,9.682,20,9.375,20H8c-1.103,0-2-0.897-2-2v-8c0-1.103,0.897-2,2-2h1.375c0.307,0,0.854-0.208,1.083-0.412l4.13-3.671c0.42-0.374,0.817-0.452,1.076-0.452C16.328,3.465,17,3.992,17,5v18C17,24.008,16.328,24.535,15.664,24.535z M8,10v8h1.375c0.8,0,1.814,0.386,2.412,0.916L15,21.772V6.228l-3.213,2.855C11.189,9.614,10.175,10,9.375,10H8z"/></svg>',
mid: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M19.061,21.388l-0.766-1.848c1.482-0.614,2.637-1.767,3.248-3.244c0.612-1.478,0.611-3.108-0.003-4.591c-0.614-1.482-1.767-2.636-3.244-3.249l0.766-1.848c1.971,0.816,3.508,2.354,4.326,4.331c0.818,1.977,0.819,4.15,0.003,6.122C22.575,19.032,21.037,20.568,19.061,21.388z"/><path d="M17.53,17.694l-0.765-1.848c0.494-0.205,0.878-0.589,1.083-1.081c0.422-1.019-0.063-2.191-1.082-2.613l0.765-1.848c2.037,0.843,3.008,3.188,2.164,5.227C19.287,16.518,18.518,17.285,17.53,17.694z"/><path d="M13.664,24.535c-0.259,0-0.656-0.078-1.076-0.451l-4.13-3.673C8.229,20.208,7.682,20,7.375,20H6c-1.103,0-2-0.897-2-2v-8c0-1.103,0.897-2,2-2h1.375c0.307,0,0.854-0.208,1.083-0.412l4.13-3.671c0.42-0.374,0.817-0.452,1.076-0.452C14.328,3.465,15,3.992,15,5v18C15,24.008,14.328,24.535,13.664,24.535z M6,10v8h1.375c0.8,0,1.814,0.386,2.412,0.916L13,21.772V6.228L9.787,9.083C9.189,9.614,8.175,10,7.375,10H6z"/></svg>',
max: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M18.593,25.086l-0.766-1.848c2.467-1.021,4.39-2.943,5.412-5.411c2.109-5.095-0.318-10.956-5.412-13.066l0.766-1.848c6.112,2.532,9.025,9.565,6.494,15.679C23.859,21.554,21.553,23.859,18.593,25.086z"/><path d="M17.061,21.388l-0.766-1.848c1.482-0.614,2.637-1.767,3.248-3.244c0.612-1.478,0.611-3.108-0.003-4.591c-0.614-1.482-1.767-2.636-3.244-3.249l0.766-1.848c1.971,0.816,3.508,2.354,4.326,4.331c0.818,1.977,0.819,4.15,0.003,6.122C20.575,19.032,19.037,20.568,17.061,21.388z"/><path d="M15.53,17.694l-0.765-1.848c0.494-0.205,0.878-0.589,1.083-1.081c0.422-1.019-0.063-2.191-1.082-2.613l0.765-1.848c2.037,0.843,3.008,3.188,2.164,5.227C17.287,16.518,16.518,17.285,15.53,17.694z"/><path d="M11.664,24.535c-0.259,0-0.656-0.078-1.076-0.451l-4.13-3.673C6.229,20.208,5.682,20,5.375,20H4c-1.103,0-2-0.897-2-2v-8c0-1.103,0.897-2,2-2h1.375c0.307,0,0.854-0.208,1.083-0.412l4.13-3.671c0.42-0.374,0.817-0.452,1.076-0.452C12.328,3.465,13,3.992,13,5v18C13,24.008,12.328,24.535,11.664,24.535z M4,10v8h1.375c0.8,0,1.814,0.386,2.412,0.916L11,21.772V6.228L7.787,9.083C7.189,9.614,6.175,10,5.375,10H4z"/></svg>',
loop_all: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M9.2,20.4C6.7,19.3,5,16.8,5,14c0-3.9,3.1-7,7-7h1.6l-1.8,1.8c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l3.5-3.5c0.4-0.4,0.4-1,0-1.4l-3.5-3.5c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4L13.6,5H12c-5,0-9,4-9,9c0,3.6,2.1,6.8,5.4,8.3c0.1,0.1,0.3,0.1,0.4,0.1c0.4,0,0.8-0.2,0.9-0.6C10,21.2,9.7,20.6,9.2,20.4z"/><path d="M25,14c0-3.6-2.2-6.9-5.5-8.3c-0.5-0.2-1.1,0-1.3,0.5c-0.2,0.5,0,1.1,0.5,1.3C21.3,8.6,23,11.2,23,14c0,3.9-3.1,7-7,7h-1.6l1.8-1.8c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-3.5,3.5c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l3.5,3.5c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L14.4,23H16C21,23,25,19,25,14z"/></svg>',
loop_single: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M9.2,20.4C6.7,19.3,5,16.8,5,14c0-3.9,3.1-7,7-7h1.6l-1.8,1.8c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l3.5-3.5c0.4-0.4,0.4-1,0-1.4l-3.5-3.5c-0.4-0.4-1-0.4-1.4,0c-0.4,0.4-0.4,1,0,1.4L13.6,5H12c-5,0-9,4-9,9c0,3.6,2.1,6.8,5.4,8.3c0.1,0.1,0.3,0.1,0.4,0.1c0.4,0,0.8-0.2,0.9-0.6C10,21.2,9.7,20.6,9.2,20.4z"/><path d="M25,14c0-3.6-2.2-6.9-5.5-8.3c-0.5-0.2-1.1,0-1.3,0.5c-0.2,0.5,0,1.1,0.5,1.3C21.3,8.6,23,11.2,23,14c0,3.9-3.1,7-7,7h-1.6l1.8-1.8c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0l-3.5,3.5c-0.1,0.1-0.2,0.2-0.2,0.3c-0.1,0.2-0.1,0.5,0,0.8c0.1,0.1,0.1,0.2,0.2,0.3l3.5,3.5c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3c0.4-0.4,0.4-1,0-1.4L14.4,23H16C21,23,25,19,25,14z"/><path d="M14,17c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1s1,0.4,1,1v4C15,16.6,14.6,17,14,17z"/></svg>',
rand: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M21.334,13.167c-0.305,0-0.604-0.138-0.801-0.4c-0.332-0.442-0.242-1.069,0.2-1.4l2.6-1.95l-2.6-1.95c-0.442-0.331-0.532-0.958-0.2-1.4c0.331-0.441,0.958-0.532,1.399-0.2l3.667,2.75c0.252,0.188,0.4,0.485,0.4,0.8s-0.148,0.611-0.4,0.8l-3.667,2.75C21.753,13.102,21.543,13.167,21.334,13.167z"/><path d="M3,20.5c-0.552,0-1-0.447-1-1s0.448-1,1-1c3.659,0,7.084-1.888,9.165-5.05c2.748-4.178,6.63-5.034,11.613-5.034c0.553,0,1,0.448,1,1s-0.447,1-1,1c-4.459,0-7.678,0.691-9.942,4.133C11.384,18.275,7.334,20.5,3,20.5z"/><path d="M21.334,22.333c-0.305,0-0.604-0.138-0.801-0.4c-0.332-0.441-0.242-1.068,0.2-1.399l2.6-1.95l-2.6-1.95c-0.442-0.331-0.532-0.958-0.2-1.399c0.331-0.442,0.958-0.532,1.399-0.2l3.667,2.75c0.252,0.188,0.4,0.485,0.4,0.8s-0.148,0.611-0.4,0.8l-3.667,2.75C21.753,22.268,21.543,22.333,21.334,22.333z"/><path d="M23.777,19.583c-4.983,0-8.865-0.856-11.613-5.033C10.084,11.388,6.659,9.5,3,9.5c-0.552,0-1-0.448-1-1s0.448-1,1-1c4.334,0,8.384,2.225,10.835,5.95c2.264,3.441,5.482,4.133,9.942,4.133c0.553,0,1,0.447,1,1S24.33,19.583,23.777,19.583z"/></svg>',
list: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor"><path d="M25,8H3C2.448,8,2,7.552,2,7s0.448-1,1-1h22c0.553,0,1,0.448,1,1S25.553,8,25,8z"/><path d="M25,15H3c-0.552,0-1-0.448-1-1s0.448-1,1-1h22c0.553,0,1,0.448,1,1S25.553,15,25,15z"/><path d="M25,22H3c-0.552,0-1-0.447-1-1s0.448-1,1-1h22c0.553,0,1,0.447,1,1S25.553,22,25,22z"/></svg>'
};
// 小工具
var tools = {
// 拖拽文件名称识别
name: function (filename) {
filename = filename.replace(/\.ogg|\.mp3|\.wav|\.mp4?/, "");
var sp = filename.split(/\s\-\s|\s\–\s/);
return {title: sp[1], artist: sp[0]};
},
// 快捷创建对象
create: function (tag, set) {
var obj = document.createElement(tag);
if(!set) return obj;
if(set.class) obj.className = set.class;
if(set.text) obj.innerText = set.text;
if(set.html) obj.innerHTML = set.html;
return obj;
},
// 快捷添加对象
append: function (obj, child) {
for(var i = 0; i < child.length; i++){
obj.appendChild(child[i]);
}
}
};
// 元素模块
var elements = {
container: tools.create("kplayer"),
player: document.createElement("audio"),
buttons: { // 操作按钮
toggle: tools.create("div", { class: "control-item kico-toggle", html: icons.play }),
prev: tools.create("div", { class: "control-item kico-prev", html: icons.left }),
next: tools.create("div", { class: "control-item kico-next", html: icons.right }),
mode: tools.create("div", { class: "setting-item kico-mode", html: icons.loop_all }),
list: tools.create("div", { class: "setting-item kico-list", html: icons.list }),
volume: tools.create("div", { class: "setting-item kico-volume", html: icons.max })
},
details: { // 歌曲详情
title: tools.create("span", { class: "kico-title", text: "欢迎使用 Kico Player" }),
artist: tools.create("span", { class: "kico-artist", text: "奇趣保罗" }),
cover: tools.create("div", { class: "kp-cover" }),
time: tools.create("div", { class: "kp-time", text: "00:00" })
},
bar: { // 播放进度条
wrap: tools.create("div", { class: "kp-bar" }),
loaded: tools.create("div", { class: "loaded" }),
played: tools.create("div", { class: "played" })
},
playlist: tools.create("div", { class: "kp-list" }),
lyric: tools.create("span", { text: "欢迎使用 Kico Player" }),
list_items: []
};
// 事件
var events = {
onPlay: () => {
if (!interval) interval = setInterval(interval_fc, 500);
elements.buttons.toggle.innerHTML = icons.pause;
actions.title_change(true);
},
onPause: () => {
interval = clearInterval(interval);
elements.buttons.toggle.innerHTML = icons.play;
actions.title_change(false);
},
onProgress: () => {
const player = elements.player;
const percentage = player.buffered.length ? (
player.buffered.end(player.buffered.length - 1) / player.duration
) : 0;
elements.bar.loaded.style.width = percentage * 100 + "%";
},
onError: () => {
interval = clearInterval(interval);
elements.buttons.toggle.innerHTML = icons.play;
actions.title_change(false);
elements.details.title.innerText = ":(";
elements.details.artist.innerText = "发生了错误";
},
onEnd: () => {
// 列表和随机列表循环
if(current.play_mode === 0 || current.play_mode === 2){
this.next();
}
// 单曲循环
else if(current.play_mode === 1){
current.lyric_index = 0;
this.play();
elements.lyric.innerText = current.playlist[current.id].title + " (" + current.playlist[current.id].artist + ")";
}
}
}
var wrapper = {
wrap: tools.create("div", { class: "kp-header" }),
info: tools.create("div", { class: "kp-info" }),
ctrl: tools.create("div", { class: "kp-controls" }),
sets: tools.create("div", { class: "kp-settings" }),
lyric: tools.create("div", { class: "kp-lyrics" }),
drop: tools.create("div", { class: "kp-drop", html: "<span>释放鼠标以添加歌曲</span>" })
};
var interval;
var interval_fc = function () {
actions.update_time();
actions.update_bar();
actions.update_lyric_playing();
};
// 构造模块
var build = {
elements: function () {
// 歌手歌名
tools.append(wrapper.info, [elements.details.title, elements.details.artist]);
// 控制按钮
tools.append(wrapper.ctrl, [elements.buttons.prev, elements.buttons.toggle, elements.buttons.next]);
// 设置按钮
tools.append(wrapper.sets, [elements.buttons.volume, elements.buttons.mode, elements.buttons.list]);
// 整体框架
tools.append(wrapper.wrap, [elements.details.cover, elements.details.time, wrapper.info, wrapper.ctrl, wrapper.sets, elements.bar.wrap]);
wrapper.lyric.appendChild(elements.lyric);
tools.append(elements.container, [wrapper.wrap, elements.playlist, wrapper.lyric, wrapper.drop]);
settings.container.appendChild(elements.container); // 总添加
// 拖动播放
elements.container.ondragenter = function (e) {
e.preventDefault();
wrapper.drop.classList.add("active");
};
elements.container.ondragover = function (e) {
e.preventDefault();
wrapper.drop.classList.add("active");
};
elements.container.ondrag = function (e) {
e.preventDefault();
wrapper.drop.classList.add("active");
};
elements.container.ondragleave = function (e) {
e.preventDefault();
wrapper.drop.classList.remove("active");
};
elements.container.ondrop = function (e) {
e.preventDefault();
wrapper.drop.classList.remove("active");
var arr = [];
for(var i = 0; i < e.dataTransfer.items.length; i++){
var s = e.dataTransfer.items[i].getAsFile();
if (window.createObjectURL) {
url = window.createObjectURL(s)
}
else if (window.createBlobURL) {
url = window.createBlobURL(s)
}
else if (window.URL && window.URL.createObjectURL) {
url = window.URL.createObjectURL(s)
}
else if (window.webkitURL && window.webkitURL.createObjectURL) {
url = window.webkitURL.createObjectURL(s)
}
var n = tools.name(s.name);
arr.push({
title: n.title,
artist: n.artist,
link: url
});
}
that.add(arr);
that.jump(current.playlist.length - 1);
};
// 播放器
elements.player.volume = 1;
elements.player.addEventListener("play", events.onPlay);
elements.player.addEventListener("pause", events.onPause);
elements.player.addEventListener("progress", events.onProgress);
elements.player.addEventListener("error", events.onError);
elements.player.addEventListener("ended", events.onEnd);
// 按钮们
elements.buttons.toggle.addEventListener("click", that.toggle);
elements.buttons.prev.addEventListener("click", that.prev);
elements.buttons.next.addEventListener("click", that.next);
elements.buttons.mode.addEventListener("click", that.mode);
elements.buttons.list.addEventListener("click", that.toggle_list);
elements.buttons.volume.addEventListener("click", that.toggle_volume);
// 进度条
elements.bar.wrap.appendChild(elements.bar.loaded);
elements.bar.wrap.appendChild(elements.bar.played);
elements.bar.wrap.addEventListener("click", function (t) {
if (!elements.player.currentTime) return;
elements.player.currentTime = (t.offsetX / elements.bar.wrap.clientWidth) * elements.player.duration;
actions.update_bar();
actions.update_time();
current.lyric.length && actions.update_lyric();
});
},
playlist: function (item) {
function add(s) {
current.playlist.push(s);
current.randlist.push(s);
var id = current.playlist.length - 1;
var li = tools.create("div", { class: "list-item" });
li.innerHTML = "<span class='item-number'>" + (id + 1) +
"</span><span class='item-title'>" + current.playlist[id].title +
"</span><span class='item-artist'>" + current.playlist[id].artist + "</span>";
li.onclick = function () {
if(current.id === id){
that.toggle();
}
else {
current.id = id;
that.jump(current.id);
}
};
elements.playlist.appendChild(li);
elements.list_items.push(li);
}
item.forEach(function (t) {
add(t);
});
},
randlist: function () {
for(var i = 0; i < current.randlist.length - 1; i++){
i++;
var a = calc.random(0, current.randlist.length - 1);
var b = calc.random(0, current.randlist.length - 1);
var cache = current.randlist[a];
current.randlist[a] = current.randlist[b];
current.randlist[b] = cache;
}
},
lyric: function (lyric, sub_lyric) {
if (!lyric) {
current.lyric = [];
elements.lyric.innerText = "纯音乐，请欣赏...";
return;
}
elements.lyric.innerText = `${current.playlist[current.id].title} (${current.playlist[current.id].artist})`;
var time, text, sub_text;
// var text = lyric.match(/\[[0-9]{2,}:[0-9]{2}\.[0-9]{2,}\](\S| )+/g).replace(/\[[0-9]{2,}:[0-9]{2}\.[0-9]{2,}\]/g);
time = lyric.match(/\d{2,}:\d{2,}.\d{1,4}/g);
text = lyric.match(/\d{1}\]+.*/g);
if(sub_lyric) sub_text = sub_lyric.match(/\d{1}\]+.*/g);
if(settings.debug) console.log(time, text, sub_text);
// 时间和歌词数量解析结果对的上
if (time && (time.length === text.length)) {
current.lyric = time.map((item, index) => {
const _range = item.match(/\d+/g);
const min = parseInt(_range[0] * 60);
const sec = parseInt(_range[1]);
const ms = parseFloat(_range[2].substr(0, 2) / 60);
const _lyric = {
time: min + sec + ms,
text: text[index].substr(2)
}
if (sub_text && text.length === sub_text.length) {
_lyric.sub_text = sub_text[index].substr(2);
}
return _lyric;
});
if(settings.debug) console.log(current.lyric);
}
else {
current.lyric = [{
time: 0,
text: "当前歌词不支持滚动"
}];
}
}
};
// 播放与暂停切换
this.play = function () {
elements.player.src && elements.player.play();
};
this.pause = function () {
elements.player.src && elements.player.pause();
};
this.toggle = function () {
if(elements.player.src){
elements.player.paused ? elements.player.play() : elements.player.pause();
}
else{
that.jump(current.id);
}
};
this.jump = function (id) {
if(id === undefined) return;
// 更新信息
current.id = id;
current.lyric_index = 0;
elements.details.title.innerText = current.playlist[current.id].title;
elements.details.artist.innerText = current.playlist[current.id].artist;
elements.details.cover.style.backgroundImage = current.playlist[current.id].cover ? "url('" + current.playlist[current.id].cover + "')" : "";
elements.player.src = current.playlist[current.id].link;
elements.player.play();
if("mediaSession" in navigator){
var _meta = {
title: current.playlist[current.id].title,
artist: current.playlist[current.id].artist,
};
if(current.playlist[current.id].album) _meta.album = current.playlist[current.id].album;
if(current.playlist[current.id].cover) _meta.artwork = [{ src: current.playlist[current.id].cover }]
navigator.mediaSession.metadata = new MediaMetadata(_meta);
navigator.mediaSession.setActionHandler("play", that.play);
navigator.mediaSession.setActionHandler("pause", that.pause);
navigator.mediaSession.setActionHandler("previoustrack", that.prev);
navigator.mediaSession.setActionHandler("nexttrack", that.next);
}
// 上次播放记录
if(elements.list_items[current.last_id]) elements.list_items[current.last_id].classList.remove("current");
elements.list_items[current.id].classList.add("current");
current.last_id = current.id;
// 如果有歌词则处理歌词
build.lyric(current.playlist[current.id].lyric, current.playlist[current.id].sub_lyric);
if(settings.debug) console.log("当前 ID：" + current.id);
};
// 上一首
this.prev = function () {
if(current.play_mode === 0 || current.play_mode === 1) {
current.id > 0 ? current.id-- : current.id = current.playlist.length - 1;
that.jump(current.id);
}
else if(current.play_mode === 2){
var a = current.randlist.indexOf(current.playlist[current.id]);
a === 0 ? current.id = current.randlist.length - 1 : current.id = current.playlist.indexOf(current.randlist[a - 1]);
that.jump(current.id);
}
};
// 下一首
this.next = function () {
current.lyric_index = 0;
if(current.play_mode === 0 || current.play_mode === 1){
current.id < current.playlist.length-1 ? current.id++ : current.id = 0;
that.jump(current.id);
}
else if(current.play_mode === 2){
var a = current.randlist.indexOf(current.playlist[current.id]);
a === current.randlist.length - 1 ? current.id = current.playlist.indexOf(current.randlist[0]) : current.id = current.playlist.indexOf(current.randlist[a + 1]);
that.jump(current.id);
}
};
// 播放模式
this.mode = function () {
var btn = elements.buttons.mode;
switch (current.play_mode){
case 0: current.play_mode = 1; btn.innerHTML = icons.loop_single; break;
case 1: current.play_mode = 2; btn.innerHTML = icons.rand; build.randlist(); break;
case 2: current.play_mode = 0; btn.innerHTML = icons.loop_all; break;
}
if(settings.debug) console.log("当前播放模式：" + current.play_mode);
};
// 添加歌曲
this.add = function (item) {
build.playlist(item);
};
// 移除歌曲
this.remove = function () {
if(current.playlist.length > 0){
if(current.randlist){
var del = current.randlist.indexOf(current.playlist[current.playlist.length - 1]);
current.randlist.splice(del, 1);
}
elements.playlist.removeChild(elements.list_items[elements.list_items.length - 1]);
current.playlist.pop();
elements.list_items.pop();
}
};
// 播放列表切换显示
this.toggle_list = function () {
elements.playlist.classList.toggle("show");
};
// 切换音量
this.toggle_volume = function () {
var btn = elements.buttons.volume;
var player = elements.player;
switch (player.volume){
case 1: player.volume = 0.75; btn.innerHTML = icons.mid; break;
case 0.75: player.volume = 0.50; btn.innerHTML = icons.low; break;
case 0.50: player.volume = 0.25; btn.innerHTML = icons.none; break;
case 0.25: player.volume = 1; btn.innerHTML = icons.max; break;
}
};
// 卸载播放器
this.destroy = function () {
events.onPause();
elements.player.pause();
elements.player.removeEventListener("play", events.onPlay);
elements.player.removeEventListener("pause", events.onPause);
elements.player.removeEventListener("progress", events.onProgress);
elements.player.removeEventListener("error", events.onError);
elements.player.removeEventListener("ended", events.onEnd);
elements.buttons.toggle.removeEventListener("click", that.toggle);
elements.buttons.prev.removeEventListener("click", that.prev);
elements.buttons.next.removeEventListener("click", that.next);
elements.buttons.mode.removeEventListener("click", that.mode);
elements.buttons.list.removeEventListener("click", that.toggle_list);
elements.buttons.volume.removeEventListener("click", that.toggle_volume);
elements.player = undefined;
elements.buttons = undefined;
elements.container.remove();
}
// 事件模块
var actions = {
// 拖拽进度条更新歌词
update_lyric: function () {
var num = 0;
current.lyric.forEach(function (t, index) {
if(elements.player.currentTime > t.time){
num = index;
return false;
}
});
current.lyric_index = num;
if(current.lyric[num].sub_text){
elements.lyric.innerHTML = current.lyric[num].text.toString() + "<br><br>" + current.lyric[num].sub_text.toString();
}
else{
elements.lyric.innerText = current.lyric[num].text.toString();
}
},
// 播放过程中更新歌词
update_lyric_playing: function () {
if(!current.lyric.length) return;
if(current.lyric[current.lyric_index] && elements.player.currentTime > current.lyric[current.lyric_index].time){
elements.lyric.innerText = current.lyric[current.lyric_index].text;
if(current.lyric[current.lyric_index].sub_text){
elements.lyric.innerHTML = current.lyric[current.lyric_index].text + "<br><br>" + current.lyric[current.lyric_index].sub_text;
}
else{
elements.lyric.innerText = current.lyric[current.lyric_index].text;
}
current.lyric_index++;
}
},
update_time: function () {
elements.details.time.innerText = calc.sec_time(elements.player.currentTime);
},
update_bar: function () {
elements.bar.played.style.width = (elements.player.currentTime / elements.player.duration) * 100 + "%";
},
title_change: function (stat) {
settings.title_change && current.playlist[current.id] && stat === true ? document.title = "▶ " + current.playlist[current.id].title + " - " + current.page_title : document.title = current.page_title;
}
};
// 计算函数
var calc = {
add_zero: function (num) {
return num < 10 ? "0" + num : num;
},
sec_time: function (second) {
if(isNaN(second)){
return "00:00";
}
else{
var min = parseInt(second / 60);
var sec = parseInt(second - min * 60);
var hours = parseInt(min / 60);
var minAdjust = parseInt(second / 60 - 60 * parseInt(second / 60 / 60));
return second >= 3600 ? `${calc.add_zero(hours)}:${calc.add_zero(minAdjust)}:${calc.add_zero(sec)}` : `${calc.add_zero(min)}:${calc.add_zero(sec)}`;
}
},
random: function (min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
};
// 执行函数
(function () {
build.elements();
build.playlist(settings.playlist);
if(settings.show_list === true){
that.toggle_list();
}
if(settings.debug){
console.log("MP3 兼容情况：" + elements.player.canPlayType("audio/mp3"));
console.log("OGG 兼容情况：" + elements.player.canPlayType("audio/ogg"));
console.log("WAV 兼容情况：" + elements.player.canPlayType("audio/wav"));
}
var user_agent = navigator.userAgent.toLowerCase().match(/mobile/g);
if(settings.autoplay === true && user_agent === null) that.jump(current.id);
})();
};
console.log("%c Kico Player %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #3498db;","margin: 1em 0; padding: 5px 0; background: #efefef;");
static/doc.css
Executable
+327
View File
@@ -0,0 +1,327 @@
/* ----
# Kico Player Docs
# By: Dreamer-Paul
# Last Update: 2021.9.5
---- */
/* 0 - 全局
-------------------------------- */
:root{
--light-blue: #57c4fd;
--darker-gray: #666;
}
body{
margin-left: 3.5em;
}
body.has-bar{
margin-left: 15.5em;
}
@media screen and (max-width: 600px){
body, body.has-bar{
margin-top: 3.5em;
margin-left: 0;
}
}
h1, h2, h3{ font-weight: lighter }
h4, h5, h6{ font-weight: normal }
.btn.customed{ border-radius: 3em }
.btn.blue.customed{
background: #57c4fd;
box-shadow: 0 4px #41a5cd;
transition: background .3s, box-shadow .3s, transform .3s;
}
.btn.blue.customed:active{
box-shadow: none;
background: #41a5cd;
transform: translateY(4px);
}
.mb-2{ margin-bottom: 2em !important }
/* 1 - 页眉
-------------------------------- */
.sidebar{
top: 0;
left: 0;
bottom: 0;
z-index: 3;
color: #fff;
position: fixed;
background-color: #57c4fd;
background-color: var(--light-blue);
}
.sidebar img, .sidebar svg{
vertical-align: top;
}
.sidebar .header{
padding: 1em;
cursor: pointer;
background: #3fb2ed;
}
.sidebar .header img{
width: 1.5em;
}
.sidebar .title{
display: none;
margin-left: .25em;
}
.sidebar .menu a{
color: #fff;
padding: 1em;
display: block;
position: relative;
}
.sidebar .menu a:hover svg{
transform: scale(1.1)
}
.sidebar .menu svg{
fill: #fff;
width: 1.5em;
}
.sidebar .menu a:before, .sidebar .menu a:after{
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.sidebar .menu a:before{
left: 3em;
top: 1.25em;
content: '';
position: absolute;
border: .5em solid transparent;
border-right-color: rgba(0, 0, 0, .6);
}
.sidebar .menu a:after{
top: .5em;
left: 4em;
padding: .5em 1em;
position: absolute;
white-space: nowrap;
border-radius: .5em;
content: attr(content);
background: rgba(0, 0, 0, .6);
}
.sidebar .menu a:hover:before, .sidebar .menu a:hover:after{
opacity: 1;
visibility: visible;
}
@media screen and (max-width: 600px){
.sidebar{
right: 0;
bottom: auto;
}
.sidebar .header{ float: left }
.sidebar .title{ display: inline-block }
.sidebar .menu{ float: right }
.sidebar .menu a{ float: left }
.sidebar .menu a:before{
top: 3em;
left: 1.25em;
border-color: transparent;
border-bottom-color: rgba(0, 0, 0, .6);
}
.sidebar .menu a:after{
top: 4em;
left: 0;
}
}
.sub-sidebar{
top: 0;
left: 3.5em;
bottom: 0;
width: 12em;
padding: 1em;
z-index: 1;
position: fixed;
overflow-y: auto;
border-right: 1px solid #eee;
}
.sub-sidebar > ul{
margin: 0;
list-style: none;
}
.sub-sidebar > ul > li{
margin-bottom: 2em;
}
.sub-sidebar > ul > li > ul a{
color: #555;
font-weight: lighter;
}
.sub-sidebar a{
color: inherit;
line-height: 2em;
}
@media screen and (max-width: 600px){
.sub-sidebar{
left: -12em;
top: 3.5em;
background: #fff;
border-right: none;
transition: transform .3s;
}
.sub-sidebar.active{
outline: 50em solid rgba(0, 0, 0, .5);
transform: translateX(100%);
}
}
/* 2 - 主体内容
-------------------------------- */
main .ks-title{
padding: 1em;
text-align: center;
margin-bottom: 2em;
border-bottom: 1px solid #eee;
}
main .ks-title h2{ color: #666; font-size: 1.25em }
main .ks-content{
margin-bottom: 2em;
padding-bottom: 1em;
}
main .ks-content section{ margin-bottom: 5em }
main .ks-content section:last-child{ margin-bottom: 0 }
main .ks-content section > *{ margin-bottom: 1em }
main .ks-content section > *:last-child{ margin-bottom: 0 }
main .ks-content h1{
color: #666;
color: var(--darker-gray);
font-size: 1.5em;
position: relative;
margin-bottom: 1.5em;
padding-bottom: .5em;
display: inline-block;
scroll-margin-top: 5em;
}
main .ks-content h1:before{
content: "";
left: 0;
bottom: 0;
z-index: -1;
width: 1.5em;
position: absolute;
border-radius: 1em;
border-bottom: .25em solid var(--yellow);
}
main .ks-content h2:before{
content: "#";
color: var(--light-blue);
margin-right: .5em;
}
main .ks-content iframe{
width: 100%;
height: 15em;
}
main .more-product{
padding: 1.5em;
border-radius: 1em;
background: #fafafa;
}
main .more-product + .more-product{ margin-top: 1em }
main .more-product h4{
color: #666;
color: var(--darker-gray);
}
.show-notice .ks-notice{
animation: none;
margin: 0 0 1em 0;
}
.doc-show-column{
color: #fff;
padding: 1em;
background: #3fb2ed;
border-radius: .5em;
}
/* 3 - 页尾
-------------------------------- */
footer{
color: #666;
padding: 1em 0;
text-align: center;
border-top: 1px solid #eee;
}
/* 返回页首 */
footer .to-top{
z-index: 1;
color: #fff;
width: 2em;
right: 1em;
bottom: -2em;
display: block;
position: fixed;
border-radius: 50%;
text-align: center;
background: rgba(0, 0, 0, .2);
transition: background .3s, bottom .3s;
}
footer .to-top.active{
bottom: .85em;
}
footer .to-top:hover {
color: #fff;
background: #ffc670;
}
footer .to-top:before{
content: "\f106";
font: 1em/2em "FontAwesome";
}
/* 4 - 附加
-------------------------------- */
.gt-container .gt-meta{ z-index: auto !important }
.gt-comment-text, .gt-header-controls-tip{ display: none }
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata{ color: slategray }
.token.punctuation{ color: #f8f8f2 }
.token.namespace { opacity: .7 }
.token.property, .token.tag, .token.function-name, .token.constant, .token.symbol, .token.deleted{ color: #f92672 }
.token.boolean, .token.number { color: #ae81ff }
.token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted{ color: #a6e22e }
.token.operator, .token.entity, .token.url, .token.variable{ color: #f8f8f2 }
.token.atrule, .token.attr-value, .token.class-name{ color: #e6db74 }
.token.keyword { color: #66d9ef }
.token.regex, .token.important{ color: #fd971f }
.language-css .token.string, .style .token.string { color: #28b9be }
.token.important, .token.bold { font-weight: bold }
.token.italic { font-style: italic }
.token.entity { cursor: help }
.token.important { font-weight: normal }
static/doc.js
+13
View File
@@ -0,0 +1,13 @@
/* ----
# Kico Player Docs
# By: Dreamer-Paul
# Last Update: 2021.9.5
---- */
var app = function () {
}
app();
static/icon-192.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

static/icon-32.png
Executable
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 609 B

static/kico.css
Executable
+1429
View File
File diff suppressed because it is too large Load Diff
static/kico.js
Executable
+346
View File
@@ -0,0 +1,346 @@
/* ----
# Kico Style 2.1
# By: Dreamer-Paul
# Last Update: 2018.12.25
一个简洁、有趣的开源响应式框架，仅包含基础样式，需按照一定规则进行二次开发。
欢迎你加入缤奇，和我们一起改变世界。
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
---- */
function Kico_Style () {
var kico = {};
var that = this;
// 批量执行
this.forEach = function (data, fn) {
for(var i = 0; i < data.length; i++){
fn(data[i], i, data);
}
};
// 对象创建
this.create = function (tag, prop) {
var obj = document.createElement(tag);
if(prop){
if(prop.id) obj.id = prop.id;
if(prop.href) obj.href = prop.href;
if(prop.class) obj.className = prop.class;
if(prop.text) obj.innerText = prop.text;
if(prop.html) obj.innerHTML = prop.html;
if(prop.child){
if(prop.child.constructor === Array){
that.forEach(prop.child, function (i) {
obj.appendChild(i);
});
}
else{
obj.appendChild(prop.child);
}
}
}
return obj;
};
// 对象选择
this.select = function (obj) {
if(typeof obj === 'object'){
return obj;
}
else if(typeof obj === 'string'){
return document.querySelector(obj);
}
};
this.selectAll = function (obj) {
if(typeof obj === 'object'){
return obj;
}
else if(typeof obj === 'string'){
return document.querySelectorAll(obj);
}
};
// 弹窗
kico.notice_list = this.create("div", {class: "ks-notice-list"});
this.notice = function (content, attr) {
var item = that.create("div", {class: "ks-notice"});
item.innerHTML += "<span class='content'>" + content + "</span>";
kico.notice_list.appendChild(item);
if(!document.querySelector("body > .ks-notice-list")) document.body.appendChild(kico.notice_list);
if(attr && attr.time){
setTimeout(notice_remove, attr.time);
}
else{
var close = this.create("span", {class: "close"});
close.addEventListener("click", function () {
notice_remove();
});
item.classList.add("dismiss");
item.appendChild(close);
}
if(attr && attr.color){item.classList.add(attr.color);}
function notice_remove() {
item.classList.add("remove");
setTimeout(function () {
try{
kico.notice_list.removeChild(item);
item = null;
}
catch(err) {}
if(document.querySelector("body > .ks-notice-list") && kico.notice_list.childNodes.length === 0){
document.body.removeChild(kico.notice_list);
}
}, 300);
}
};
// 遮罩
kico.overlay = this.create("div", {class: "ks-overlay"});
this.overlay = function (attr) {
document.body.appendChild(kico.overlay);
if(attr && attr.time){
setTimeout(overlay_remove, attr.time);
}
else{
kico.overlay.onclick = function (){ overlay_remove() };
}
if(attr && attr.code){
kico.overlay.onclick = function (){ overlay_remove(); attr.code() }
}
function overlay_remove() {
kico.overlay.onclick = null;
kico.overlay.classList.add("remove");
setTimeout(function () {
if(document.querySelector("body > .ks-overlay")){
kico.overlay.classList.remove("remove");
document.body.removeChild(kico.overlay);
}
}, 300);
}
};
// 图片缩放
kico.image_box = [];
kico.image_box.img = this.create("img");
kico.image_box.prev = this.create("div", {class: "ks-prev"});
kico.image_box.next = this.create("div", {class: "ks-next"});
kico.image_box.ball = this.create("div", {class: "ks-ball"});
kico.image_box.wrap = this.create("div", {class: "ks-image", child: [
kico.image_box.img, kico.image_box.prev, kico.image_box.next, kico.image_box.ball
]});
this.image = function (selector) {
var current = 0;
var get_images = this.selectAll(selector);
// 设置图片
function set_image(img) {
if(img.getAttribute("ks-original") !== null){
kico.image_box.img.src = img.getAttribute("ks-original");
}
else if(img.src){
kico.image_box.img.src = img.src;
}
kico.image_box.ball.classList.add("loading");
}
// 设置按钮
function set_buttons(c) {
function l(){
if(current - 1 >= 0) current--;
set_image(get_images[current]);
}
function r(){
if(current + 1 < get_images.length) current++;
set_image(get_images[current]);
}
kico.image_box.prev.onclick = l;
kico.image_box.next.onclick = r;
}
// 循环内单条设定
function set_item(obj, num) {
var scale = 1;
var locationX, locationY;
obj.setAttribute("ks-image", "active");
/*kico.image_single.onmousewheel = function () {
console.log(event);
if(event.wheelDelta > 0 || event.deltaY < 0){
if(scale > 1){
scale = scale - 0.1;
}
}
else{
if(scale >= 1){
scale = scale + 0.1;
}
}
/*if(event.offsetX / window.innerWidth > 0.5){
//locationX = "right";
locationX = parseInt((event.offsetX / window.innerWidth) * 100) + "%";
console.log("kuan" + window.innerWidth);
console.log(event.offsetX);
//console.log(window.innerWidth / );
}
else{
locationX = parseInt((event.offsetX / window.innerWidth) * 100) + "%";
//locationX = "left";
}*/
/*locationX = (event.offsetX / window.innerWidth) * 100 + "%";
locationY = (event.offsetY / window.innerHeight) * 100 + "%";
//event.offsetY / window.innerHeight > 0.5 ? locationY = "bottom" : locationY = "top";
kico.image_single.style.transform = "scale(" + scale + ")";
kico.image_single.style.transformOrigin = locationX + " " + locationY;
};*/
function single_click(){
/*scale = 1;
locationX = "50%";
locationY = "50%";*/
current = num;
console.log("现在选中了" + current);
//kico.image_single.style.transform = "scale(" + scale + ")";
//kico.image_single.style.transformOrigin = locationX + " " + locationY;
set_image(obj);
set_buttons(num);
if(!document.body.contains(kico.image_box.wrap)) {
document.body.appendChild(kico.image_box.wrap);
}
}
obj.onclick = single_click;
}
this.forEach(get_images, function (i, j) {
if(i.src || i.getAttribute("ks-original")){
set_item(i, j);
}
});
kico.image_box.img.onclick = function () {
kico.image_box.wrap.classList.add("remove");
setTimeout(function () {
try{
document.body.removeChild(kico.image_box.wrap);
kico.image_box.wrap.classList.remove("remove");
}
catch (err){}
}, 300);
};
kico.image_box.img.onload = function () {
kico.image_box.ball.classList.remove("loading");
}
};
// AJAX 组件
this.ajax = function (prop) {
if(!prop.url){
prop.url = document.location.origin + document.location.pathname;
}
function test_crossDomain() {
var a = document.createElement("a");
a.href = window.location.hostname;
return a.hostname === prop.url ? true : false;
}
if(prop.method === "POST"){
var data = new FormData();
for(var pk in prop.data){
data.append(pk, prop.data[pk]);
}
}
else if(prop.method === "GET"){
var url = prop.url + "?";
for(var k in prop.data){
url += k + "=" + prop.data[k] + "&";
}
prop.url = url.substr(0, url.length - 1);
}
var request = new XMLHttpRequest();
request.open(prop.method, prop.url);
if(prop.crossDomain){ request.setRequestHeader("X-Requested-With", "XMLHttpRequest"); }
if(prop.header){
for(var i in prop.header){
request.setRequestHeader(prop.header[i][0], prop.header[i][1]);
}
}
request.send(data);
request.onreadystatechange = function () {
if(request.readyState === 4){
if(request.status === 200 || request.status === 304){
prop.success ? prop.success(request) : console.log(prop.method + " 请求发送成功");
}
else{
prop.failed ? prop.failed(request) : console.log(prop.method + " 请求发送失败");
}
}
};
};
// 返回页头
this.scrollTop = function () {
function to_top(){
if(window.scrollY !== 0){
window.scrollTo(0, window.scrollY * 0.9);
requestAnimationFrame(to_top);
}
else{
cancelAnimationFrame(this);
}
}
window.requestAnimationFrame(to_top);
};
// Show Version
console.log("%c Kico Style %c https://paugram.com ","color: #fff; margin: 1em 0; padding: 5px 0; background: #3498db;","margin: 1em 0; padding: 5px 0; background: #efefef;");
}
var ks = new Kico_Style();
static/kico.svg
Executable
+19
View File
@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40" xml:space="preserve">
<ellipse fill="#F7C170" cx="20" cy="35.5" rx="20" ry="4.5"/>
<g opacity="0.2">
<path d="M8.066,8.429c0,0,3.92,5.305,3.872,11.618S8,35.799,8,35.799h8.679l-1.297-7.725l10.948,6.994l4.803-6.217
c0,0-13.502-1.666-13.485-8.636c0.017-6.969,15.922-6.906,15.922-6.906l-5.725-7.771l-11.165,6.994l-2.952-7.878L8.066,8.429z"/>
</g>
<g>
<path fill="#FFFFFF" d="M6.066,8.429c0,0,3.92,5.305,3.872,11.618S6,35.799,6,35.799h8.679l-1.297-7.725l10.948,6.994
l4.803-6.217c0,0-13.502-1.666-13.485-8.636c0.017-6.969,15.922-6.906,15.922-6.906l-5.725-7.771l-11.165,6.994l-2.952-7.878
L6.066,8.429z"/>
</g>
<g opacity="0.2">
<circle cx="19.635" cy="4.117" r="4.117"/>
</g>
<g>
<circle fill="#FFFFFF" cx="17.635" cy="4.117" r="4.117"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 938 B