├── README.md
├── applyContentTimer.js
├── index.html
├── main.js
├── nugget.png
├── recordTest.js
├── resize.js
├── rgbeditor.js
├── style.css
└── test.mp4


/README.md:
--------------------------------------------------------------------------------
1 | # Nugget speens on H5 / 旋转鸡块 H5
2 | ## English
3 |   Use custom images, string or HTML codes to create the same effect in the browser as a chicken nugget spin.
4 |   [Experience link](https://bugteas-nugget-speens-h5.netlify.app/)    [Github pages](http://BUGTeas.github.io/nugget_speens_h5/index.html)
5 | ## 中文
6 |   使用自定义图像、字符串或 HTML 代码在浏览器中创建与鸡块旋转相同的效果。
7 |   [体验链接](https://bugteas-nugget-speens-h5.netlify.app/)    [Github pages](http://BUGTeas.github.io/nugget_speens_h5/index.html)
8 | 


--------------------------------------------------------------------------------
/applyContentTimer.js:
--------------------------------------------------------------------------------
  1 | //切换图片/视频/文本模式
  2 | function showmode(name){
  3 |     if(name=="txtopt_sw") applytext();
  4 |     else if(name=="htmlopt_sw") applyhtml();
  5 |     else applyimgvid(name.substring(0,3));
  6 |     var optList = sID("option").getElementsByClassName("optsw");
  7 |     for(i=0;i<optList.length;i++){
  8 |         sID(optList[i].id.split("_")[0]).style.display = "none";
  9 |         sID(optList[i].id).style = "border-bottom:3px solid rgba(0,0,0,0)";
 10 |     }
 11 |     sID(name.split("_")[0]).style.display = "block";
 12 |     sID(name).style = "font-weight:bold;border-bottom:3px solid royalblue";
 13 | }
 14 | 
 15 | //加载用户文件
 16 | function fileget(mode){
 17 |     var file = anyimg.files[0];
 18 |     function al(word){alert("请确保文件为" + word + "类型,否则将无法显示");}
 19 |     if(imgOrVid=="img"){
 20 |         if(!/image\/\w+/.test(file.type)) al("图片")
 21 |         imgSrc = URL.createObjectURL(file);
 22 |     }else if(imgOrVid=="vid"){
 23 |         if(!/video\/\w+/.test(file.type)) al("视频");
 24 |         vidSrc = URL.createObjectURL(file);
 25 |     }
 26 |     applyimgvid(imgOrVid);
 27 | }
 28 | 
 29 | //应用图片/视频
 30 | function applyimgvid(mode){
 31 |     if(mode=="img") var element = "<img src='" + imgSrc + "' id='showimg'/>";
 32 |     if(mode=="vid") var element = "<video style='background-color:rgba(95,95,95,0.7)' id='showvid' loop onclick='this.play()'><source src='" + vidSrc + "'></video>";
 33 |     sID("rotationbox").innerHTML = element;
 34 |     setTimeout("if(cID('showvid')) sID('showvid').play()",500);
 35 |     resizeImgVid(mode);
 36 |     //用户导入文件
 37 |     if(window.FileReader){
 38 |         imgOrVid = mode;
 39 |         anyimg = sID(mode + "FileInput");
 40 |         anyimg.addEventListener('change',fileget,false);
 41 |     }else sID(mode + "opt_user").innerHTML = "您的浏览器不支持自定义文件。";
 42 | }
 43 | 
 44 | //调整图片/视频宽度
 45 | function resizeImgVid(mode,range){
 46 |     var rge = sID(mode + "WidthRange");
 47 |     var ipt = sID(mode + "WidthInput");
 48 |     if(range=="range") ipt.value = rge.value;
 49 |     else rge.value = ipt.value;
 50 |     sID("show" + mode).style.width = (ipt.value / deviceDPR) + "px";
 51 | }
 52 | 
 53 | //应用文字
 54 | function applytext(mode){
 55 |     if(sID("showimg")) sID("showimg").remove();
 56 |     var sizeInput = sID("textsizeinput");
 57 |     var sizeRange = sID("textsizerange");
 58 |     var txtInput = sID("inputtext");
 59 |     var txtw = document.getElementsByName("txtweight");
 60 |     for(i=0;i<txtw.length;i++){
 61 |         if(txtw[i].checked) var txtw = txtw[i].value;
 62 |     }
 63 |     var iptvl = txtInput.value.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\r\n/g, '<br/>').replace(/\n/g, '<br/>').replace(/\s/g, '&nbsp;');
 64 |     console.log("文本模式，输出内容为 “" + iptvl + "”");
 65 |     if(sID("showtext")) sID("showtext").innerHTML = iptvl;
 66 |     else sID("rotationbox").innerHTML = "<div id='showtext'>" + iptvl + "</div>";
 67 |     var txtSet = sID("showtext");
 68 |     if(mode=="sizerange") sizeInput.value = sizeRange.value;
 69 |     else sizeRange.value = sizeInput.value;
 70 |     if(txtSet.style.color=="") var txtColor = "#000";
 71 |     else var txtColor = txtSet.style.color;
 72 |     if(txtSet.style.backgroundColor=="") var txtBg = "rgba(17,69,20,0)";
 73 |     else var txtBg = txtSet.style.backgroundColor;
 74 |     paddingSet = sizeInput.value / 4 / deviceDPR;
 75 |     txtSet.style = "white-space:nowrap;text-align:center;float:left;font-size:" + (sizeInput.value / deviceDPR) + "px;font-weight:" + txtw + ";padding:" + paddingSet + "px;border-radius:" + paddingSet + "px;color:" + txtColor + ";background-color:" + txtBg;
 76 | }
 77 | 
 78 | //应用代码
 79 | function applyhtml(mode){
 80 |     if(sID("showimg")) sID("showimg").remove();
 81 |     var txtInput = sID("inputhtml");
 82 |     var iptvl = txtInput.value;
 83 |     console.log("代码模式，输出内容为 “" + iptvl + "”");
 84 |     if(sID("showhtml")) sID("showhtml").innerHTML = iptvl;
 85 |     else sID("rotationbox").innerHTML = "<div id='showhtml' style='white-space:nowrap;float:left'>" + iptvl + "</div>";
 86 | }
 87 | 
 88 | //计时器拖拽调整位置
 89 | var moveit = document.getElementById("timer");
 90 | moveit.style.top = moveit.style.left = "10px";
 91 | //鼠标
 92 | moveit.onmousedown = function(event){
 93 |     clickReaction = "none";
 94 |     moveX = event.clientX - moveit.offsetLeft;
 95 |     moveY = event.clientY - moveit.offsetTop;
 96 |     document.onmousemove = function(event){
 97 |         moveit.style.top = event.clientY - moveY + "px";
 98 |         moveit.style.left = event.clientX - moveX + "px";
 99 |     }
100 |     document.onmouseup = function(){
101 |         document.onmousemove = false;
102 |     }
103 |     return false;
104 | }
105 | //触摸
106 | moveit.ontouchstart = function(event){
107 |     clickReaction = "none";
108 |     moveX = event.targetTouches[0].pageX - moveit.offsetLeft;
109 |     moveY = event.targetTouches[0].pageY - moveit.offsetTop;
110 |     document.ontouchmove = function(event){
111 |         moveit.style.left = event.targetTouches[0].pageX - moveX + "px";
112 |         moveit.style.top = event.targetTouches[0].pageY - moveY + "px";
113 |     }
114 |     document.ontouchend = function(){
115 |         document.ontouchmove = false;
116 |     }
117 |     return false;
118 | }
119 | 
120 | //应用计时器样式
121 | function timer_optapply(mode){
122 |     var sizeInput = document.getElementById("timersizeinput");
123 |     var sizeRange = document.getElementById("timersizerange");
124 |     var timer = document.getElementById("timer");
125 |     var weight = document.getElementsByName("timerweight");
126 |     for(var i=0;i<weight.length;i++){
127 |         if(weight[i].checked) timer.style.fontWeight = weight[i].value;
128 |     }
129 |     if(sID("timer_enabled").checked) timer.style.display = "block";
130 |     else{timer.style.display = "none";timework = "disabled"}
131 |     if(mode=="sizerange") sizeInput.value = sizeRange.value;
132 |     else sizeRange.value = sizeInput.value;
133 |     timer.style.fontSize = (sizeInput.value / deviceDPR) + "px";
134 |     timer.style.padding = timer.style.borderRadius = (sizeInput.value / 5 / deviceDPR) + "px";
135 |     var weight = document.getElementsByName("timerformat");
136 |     for(var i=0;i<weight.length;i++){
137 |         if(weight[i].checked) timerFormat = weight[i].value.split("_");
138 |     }
139 |     document.getElementById("timer").innerHTML = "11:45:14";
140 |     if(timerFormat.length==4) document.getElementById("timer").innerHTML += ":19";
141 | }
142 | 
143 | //刷新计时器显示
144 | function timerRun(hcnt,mcnt,scnt){
145 |     if(timework=="enabled"){
146 |         var hournum,minutenum,secondnum,msnum,optHead,optEnd;
147 |         var timeNum = new Date().getTime() - startTime;
148 |         if(timerFormat[timerFormat.length - 1]=="ms"){
149 |             msnum = Number.parseInt(timeNum / 10 - scnt * 100);
150 |             if(msnum>=100){
151 |                 scnt++;
152 |                 msnum = 0;
153 |             }
154 |         }
155 |         secondnum = Number.parseInt(timeNum / 1000 - mcnt * 60);
156 |         if(secondnum>=60){
157 |             mcnt++;
158 |             secondnum = 0;
159 |         }
160 |         if(timerFormat[0]=="h"){
161 |             minutenum = Number.parseInt(timeNum / 60000 - hcnt * 60);
162 |             if(minutenum>=60){
163 |                 hcnt++;
164 |                 minutenum = 0;
165 |             }
166 |             hournum = Number.parseInt(timeNum / 3600000);
167 |         }
168 |         else minutenum = Number.parseInt(timeNum / 60000);
169 |         if(String(hournum).length==1) hournum = "0" + hournum;
170 |         if(String(minutenum).length==1) minutenum = "0" + minutenum;
171 |         if(String(secondnum).length==1) secondnum = "0" + secondnum;
172 |         if(String(msnum).length==1) msnum = "0" + msnum;
173 |         optHead = optEnd = "";
174 |         if(timerFormat[0]=="h") optHead = hournum + ":";
175 |         if(timerFormat[timerFormat.length - 1]=="ms") optEnd = ":" + msnum;
176 |         document.getElementById("timer").innerHTML = optHead + minutenum + ":" + secondnum + optEnd;
177 |         setTimeout(function(){timerRun(hcnt,mcnt,scnt)},0);
178 |     }
179 | }
180 |             
181 | //初始化计时器
182 | var readyTimeMode = 0;
183 | function loadtime(timeMode,mode,showmode){
184 |     var timer = document.getElementById("timer");
185 |     var optUI = document.getElementById('option');
186 |     if(mode!="noreset"){
187 |         timework = "disabled";
188 |         readyCntdn = 3;
189 |         showmode = timer.style.display;
190 |         readyTimeMode++;
191 |         var timeMode = readyTimeMode;
192 |     }
193 |     if(readyCntdn==0){
194 |         if(showmode!="none"){
195 |             timework = "enabled";
196 |             startTime = new Date().getTime();
197 |             timerRun(0,0,0);
198 |         }else{
199 |             timer.innerHTML = "11:45:14";
200 |             if(timerFormat.length==4) timer.innerHTML += ":19";
201 |             timer.style.display = "none";
202 |         }
203 |         if(document.getElementById('showvid')){
204 |             var vid = document.getElementById('showvid');
205 |             vid.currentTime = 0;
206 |             vid.play();
207 |         }
208 |         if(recorderWork&&sID("record_enabled").checked==true){
209 |             console.log("开始录制");
210 |             recStatus = true;
211 |             playCanvas(ctx);
212 |             setTimeout("recStart.click()",100);
213 |         }
214 |     }
215 |     else{
216 |         timer.style.display = "block";
217 |         if(timer.style.display!="none") timer.innerHTML = readyCntdn + " 秒后开始";
218 |         readyCntdn = readyCntdn - 1;
219 |         setTimeout(function(){
220 |             if(timeMode==readyTimeMode&&optUI.style.display=="none") loadtime(timeMode,'noreset',showmode);
221 |             else if(timerFormat.length==4) timer.innerHTML = "11:45:14:19";
222 |             else timer.innerHTML = "11:45:14";
223 |             if(optUI.style.display!="none") timer.style.display = showmode;
224 |         },1000);
225 |     }
226 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |     <head>
  4 |         <meta charset="UTF-8">
  5 |         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=10"/>
  6 |         <title>万物皆可旋转 (2023-01-03更新)</title>
  7 |         <link rel="shortcut icon" href="./nugget.png"/>
  8 |         <link rel="stylesheet" href="./style.css?20230103"/>
  9 |         <style id="animationset"></style>
 10 |     </head>
 11 |     <body id="body">
 12 |         
 13 |         <!--页面加载过程遮罩-->
 14 |         <div id="loadingMask" style="position:absolute;z-index:5;top:0px;left:0px;width:100%;height:100%;padding:30px;font-size:40px;font-weight:lighter;color:#888;background-color:#fff;">请稍候...</div>
 15 | 
 16 |         <div id="mainbox" style="background:#fff">
 17 |             <!--顶部上下晃动-->
 18 |             <div id="headbox"></div>
 19 |             <!--旋转物体-->
 20 |             <div id="rotationbox"></div>
 21 |             <!--阴影-->
 22 |             <div id="shadowbox"></div>
 23 |             <!--计时器-->
 24 |             <div id="timer" style="background:rgba(17,69,20,0);color:rgba(0,0,0,1)">11:45:14</div>
 25 |         </div>
 26 | 
 27 |         <!--实验性：录屏内容临时截取至此-->
 28 |         <canvas id="canv" height=480 width=640 style="display:none"></canvas>
 29 | 
 30 |         <!--下滑打开选项提示-->
 31 |         <div id="tips" style="position:absolute;top:0px;left:0px;width:100%;height:100px;display:none;text-align:center;background:linear-gradient(180deg,#888 20%,rgba(0,0,0,0));color:#fff;font-size:16px;padding-top:5px">▼ 向下滑动或按“O”键进入选项&nbsp;&nbsp;<span style="text-decoration:underline;user-select:none;" onclick="sID('tips').remove();">关闭提示</span></div>
 32 | 
 33 |         <!--用户选项-->
 34 |         <div id="option">
 35 | 
 36 |             <!--切换选项卡-->
 37 |             <div class="optsw" id="imgopt_sw" onclick="showmode(this.id)">图片</div>
 38 |             <div class="optsw" id="vidopt_sw" onclick="showmode(this.id)">视频</div>
 39 |             <div class="optsw" id="txtopt_sw" onclick="showmode(this.id)">文本</div>
 40 |             <div class="optsw" id="htmlopt_sw" onclick="showmode(this.id)">HTML</div>
 41 | 
 42 |             <!--文字设置界面-->
 43 |             <div id="txtopt">
 44 |                 <!--<p style='margin-bottom:5px'>如需换行，请使用“&lt;br&gt;”</p>-->
 45 |                 <p style='margin-bottom:5px'>此功能已更新，支持多个空格和回车换行，<br>如需使用 HTML 代码，请切换到 HTML 模式。</p>
 46 |                 <textarea rows="5" id="inputtext" oninput="applytext()">旋转 の 页面</textarea>
 47 |                 <div><button onclick="rgb_id='showtext';rgb_attribute='style.color';coloropt_init('x','opacity')">字体颜色</button><button onclick="rgb_id='showtext';rgb_attribute='style.backgroundColor';coloropt_init('x','opacity')">背景颜色</button></div>
 48 |                 <div onclick="applytext()" style='margin-bottom:5px'>
 49 |                     <input type="radio" name="txtweight" id="txt_lighter" value="lighter"><label for="txt_lighter">细体</label>
 50 |                     <input type="radio" name="txtweight" id="txt_normal" value="normal" checked><label for="txt_normal">常规</label>
 51 |                     <input type="radio" name="txtweight" id="txt_bolder" value="bolder"><label for="txt_bolder">加粗</label>
 52 |                 </div>
 53 |                 字体大小：<br><input id='textsizerange' class="range" type='range' min='0' max='1000' oninput="applytext('sizerange')"/><div style="display:inline-block"><input type="number" id='textsizeinput' class="input" value="200" oninput='applytext()'/>像素</div>
 54 |             </div>
 55 | 
 56 |             <!--代码设置界面-->
 57 |             <div id="htmlopt">
 58 |                 <p style='margin-bottom:5px'>在文本框中输入 HTML 代码以实现更多功能。</p>
 59 |                 <textarea rows="5" id="inputhtml" oninput="applyhtml()"><iframe src="//player.bilibili.com/player.html?aid=476300136&bvid=BV1xK411r7C3&cid=924744177&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="320" height="180"> </iframe></textarea>
 60 |             </div>
 61 | 
 62 |             <!--图片设置界面-->
 63 |             <div id="imgopt">
 64 |                 <div id="imgopt_user">
 65 |                     <p style='margin-bottom:5px;text-align:center'>图片大小不建议超过2M，否则浏览器会卡顿甚至闪退</p>
 66 |                     <button class="bigButton" onclick="sID('imgFileInput').click()">＋ 选择本地文件</button>
 67 |                     <input id='imgFileInput' style="display:none" type='file'/>
 68 |                 </div>
 69 |                 <div class="name">宽度：</div><input id='imgWidthRange' class="range" type='range' min='0' max='1000' oninput="resizeImgVid('img','range')"/><div style="display:inline-block"><input type="number" id='imgWidthInput' value='300' class="input" oninput="resizeImgVid('img')"/>像素</div>
 70 |             </div>
 71 |             
 72 |             <!--视频设置界面-->
 73 |             <div id="vidopt">
 74 |                 <div id="vidopt_user">
 75 |                     <p style='margin-bottom:5px;text-align:center'>视频将在选项关闭 3 秒后开始循环播放<br>若没有响应，点一下旋转物体即可</p>
 76 |                     <button class="bigButton" onclick="sID('vidFileInput').click()">＋ 选择本地文件</button>
 77 |                     <input id='vidFileInput' style="display:none" type='file'/>
 78 |                 </div>
 79 |                 <div class="name">宽度：</div><input id='vidWidthRange' class="range" type='range' min='0' max='1000' oninput="resizeImgVid('vid','range')"/><div style="display:inline-block"><input type="number" id='vidWidthInput' value='500' class="input" oninput="resizeImgVid('vid')"/>像素</div>
 80 |             </div>
 81 |             <!--效果设置-->
 82 |             <hr>
 83 |             旋转轴：<input type="radio" name="rotateRadio" id="rotateRadioX" value="X" onclick="anglechange()"/><label for="rotateRadioX">X</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="rotateRadio" id="rotateRadioY" value="Y" checked onclick="anglechange()"/><label for="rotateRadioY">Y</label>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="rotateRadio" id="rotateRadioZ" value="Z" onclick="anglechange()"/><label for="rotateRadioZ">Z</label><hr>
 84 | 
 85 |             <div class="name">X轴：</div><input id='Xanglerange' class="range" type='range' min='0' max='360' oninput="anglechange('xrange')"/><div style="display:inline-block"><input type="number" id='Xangleinput' class="input" value='0' oninput='anglechange()'/>°</div><hr>
 86 | 
 87 |             <div class="name">Y轴：</div><input id='Yanglerange' class="range" type='range' min='0' max='360' oninput="anglechange('yrange')"/><div style="display:inline-block"><input type="number" id='Yangleinput' class="input" value='0' oninput='anglechange()'/>°</div><hr>
 88 | 
 89 |             <div class="name">Z轴：</div><input id='Zanglerange' class="range" type='range' min='0' max='360' oninput="anglechange('zrange')"/><div style="display:inline-block"><input type="number" id='Zangleinput' class="input" value='0' oninput='anglechange()'/>°</div><hr>
 90 | 
 91 |             <div class="name">透视：</div><input id='perspectrange' class="range" type='range' min='0' max='1000' oninput="anglechange('prange')"/><div style="display:inline-block"><input type="number" id='perspectinput' class="input" value='500' oninput='anglechange()'/>像素</div><hr>
 92 | 
 93 |             <div class="name">速度：</div><input id='speedrange' class="range" type='range' min='0' max='9999' oninput="anispeed('range')" onmouseup="applySpeed()" ontouchend="applySpeed()"/><div style="display:inline-block"><input type="number" id='speedinput' class="input" value='1.3' oninput='anispeed()'/>秒/转</div><hr>
 94 | 
 95 |             <p style='margin-bottom:5px'>将透视调整至75~125可以提升图像或文字的立体感。</p>
 96 |             <div style="margin:10px 0px 5px 0px;">
 97 |                 <input type="checkbox" id="reverse_sw" onclick="reverse_shadow_sw()"/><label for="reverse_sw" style="margin-right:5px">反向</label>
 98 |                 <input type="checkbox" id="shadow_sw" onclick="reverse_shadow_sw()" checked/><label for="shadow_sw" style="margin-right:5px">阴影</label>
 99 |                 <input type="checkbox" id="floating_sw" onclick="anglechange()" checked/><label for="floating_sw" style="margin-right:5px">上下浮动</label>
100 |                 <input type="checkbox" id="fullscreen_sw" onclick="launchFullscreen(document.documentElement)"/><label for="fullscreen_sw">全屏</label>
101 |             </div>
102 |             <button onclick="rgb_id='mainbox';rgb_attribute='style.background';coloropt_init('bgimg')">更改背景</button>
103 |             <button onclick="alert('注意事项：\n目前该功能仍处于实验阶段，不能确保其稳定性。由于浏览器兼容性各有所异，部分浏览器可能无法录制或下载视频。\n\n由于该功能所依赖的第三方库对动画效果不完全支持，录制出的视频会缺失包括旋转在内的很多效果，且由于格式较为特殊(video/webm)，部分播放器或编辑软件可能无法打开。\n\n由于代码未完善，在录制过程中会消耗较多的系统资源，这可能会导致浏览器崩溃，甚至使系统无响应！\n建议你想清楚后果再继续。');sID('recordopt').style.display = 'block'">录制视频(实验)</button>
104 |             <button onclick="sID('timeropt').style.display = 'block'">计时器</button>
105 |             <div style="text-align:center;margin-bottom:5px;font-size:12px">由 BUGTeas 制作<br><a href="https://github.com/BUGTeas/nugget_speens_h5" target="_blank" style="font-size:15px">Github</a>&nbsp;&nbsp;<a href="https://www.bilibili.com/video/BV1xK411r7C3" target="_blank" style="font-size:15px">Bilibili</a></div>
106 |             <button class="bigButton" onclick="
107 |                 loadtime();
108 |                 sID('option').style.display = 'none';
109 |                 applyresize();
110 |                 if(sID('tips')) sID('tips').style.display = 'block';
111 |             ">关闭</button>
112 |         </div>
113 | 
114 |         <!--计时器设置界面-->
115 |         <div class="window_bg" id="timeropt">
116 |             <div style="height:calc(50% - 170px);"></div>
117 |             <div class="window" id="timeropt_window">
118 |                 <div style="min-height:20px">
119 |                     <div style="font-size:15px;display:inline-block">计时器</div>
120 |                     <button class="window_close" onclick="sID('timeropt').style.display = 'none'">×</button>
121 |                 </div>
122 |                 <div onclick="timer_optapply()"><input type="checkbox" id="timer_enabled"/><label for="timer_enabled"> 启用</label></div>
123 |                 <div style="font-size:14px">如需调整位置，可以直接拖动计时器。</div>
124 |                 <table style="width:100%;border-collapse:collapse;">
125 |                     <tr>
126 |                         <td class="rgbeditor_optname">大小</td>
127 |                         <td><input type="range" min='5' max='200' value="96" class="rgbeditor_range" id="timersizerange" oninput="timer_optapply('sizerange')"/></td>
128 |                         <td><input type="number" class="rgbeditor_input" id="timersizeinput" oninput="timer_optapply()"/></td>
129 |                     </tr>
130 |                 </table>
131 |                 <div onclick="timer_optapply()">
132 |                     <input type="radio" name="timerweight" id="timer_lighter" value="lighter"><label for="timer_lighter">细体</label>
133 |                     <input type="radio" name="timerweight" id="timer_normal" value="normal" checked><label for="timer_normal">常规</label>
134 |                     <input type="radio" name="timerweight" id="timer_bolder" value="bolder"><label for="timer_bolder">加粗</label>
135 |                 </div>
136 |                 <div>
137 |                     <button class="window_button" onclick="rgb_id='timer';rgb_attribute='style.color';coloropt_init('x','opacity')">字体颜色</button><button class="window_button" onclick="rgb_id='timer';rgb_attribute='style.backgroundColor';coloropt_init('x','opacity')">背景颜色</button>
138 |                 </div>
139 |                 <div onclick="timer_optapply()">
140 |                     <input type="radio" name="timerformat" id="timer_HMS" value="h_m_s"><label for="timer_HMS">小时 : 分钟 : 秒</label><br>
141 |                     <input type="radio" name="timerformat" id="timer_HMSMs" value="h_m_s_ms" checked><label for="timer_HMSMs">小时 : 分钟 : 秒 : 毫秒</label><br>
142 |                     <input type="radio" name="timerformat" id="timer_MSMs" value="m_s_ms"><label for="timer_MSMs">分钟 : 秒 : 毫秒</label>
143 |                 </div>
144 |             </div>
145 |         </div>
146 | 
147 |         <!--实验性：视频录制设置界面-->
148 |         <div class="window_bg" id="recordopt">
149 |             <div style="height:calc(50% - 170px);"></div>
150 |             <div class="window" id="recordopt_window">
151 |                 <div style="min-height:20px">
152 |                     <div style="font-size:15px;display:inline-block">录制视频</div>
153 |                     <button class="window_close" onclick="sID('recordopt').style.display = 'none'">×</button>
154 |                 </div>
155 |                 <div><input type="checkbox" id="record_enabled"/><label for="record_enabled"> 启用（实验性功能尚未完善）</label></div>
156 |                 <span id="recordopt_tips" style="font-size:14px;"></span>
157 |                 <div style="font-size:18px;margin:0">分辨率</div>
158 |                 <div onclick="mainSizeApply()" style="font-size:12px;">
159 |                     <input type="radio" name="mainsize" id="mainsize_0" value="auto_auto" checked><label for="mainsize_0">适应窗口大小</label><br>
160 |                     <input type="radio" name="mainsize" id="mainsize_c" value="cust_cust"><label for="mainsize_c">自定义
161 |                         <input type="number" style="border:1px solid #888;width:50px" id="mainsizeCustWidth" oninput="mainSizeApply('cust')" value="114"/> × <input type="number" style="border:1px solid #888;width:50px" id="mainsizeCustHeight" oninput="mainSizeApply('cust')" value="514"/>
162 |                     </label>
163 |                     <p style="margin:2px;font-size:14px">4:3</p>
164 |                     <input type="radio" name="mainsize" id="mainsize_1" value="640_480"><label for="mainsize_1">640×480</label>
165 |                     <input type="radio" name="mainsize" id="mainsize_2" value="800_600"><label for="mainsize_2">800×600</label><br>
166 |                     <input type="radio" name="mainsize" id="mainsize_3" value="1024_768"><label for="mainsize_3">1024×768</label>
167 |                     <input type="radio" name="mainsize" id="mainsize_4" value="1280_960"><label for="mainsize_4">1280×960</label><br>
168 |                     <p style="margin:2px;font-size:14px">16:9</p>
169 |                     <input type="radio" name="mainsize" id="mainsize_5" value="640_360"><label for="mainsize_5">640×360(360P)</label>
170 |                     <input type="radio" name="mainsize" id="mainsize_6" value="854_480"><label for="mainsize_6">854×480(480P)</label><br>
171 |                     <input type="radio" name="mainsize" id="mainsize_7" value="1280_720"><label for="mainsize_7">1280×720(720P)</label>
172 |                     <input type="radio" name="mainsize" id="mainsize_8" value="1920_1080"><label for="mainsize_8">1920×1080(1080P)</label><br>
173 |                 </div>
174 |             </div>
175 |         </div>
176 | 
177 |         <!--实验性：视频录制停止界面-->
178 |         <div class="window_bg" id="recordstop">
179 |             <div style="height:calc(50% - 170px);"></div>
180 |             <div class="window" id="recordstop_window">
181 |                 <div style="font-size:18px">是否结束录制？</div>
182 |                 <div style="font-size:14px">所录制的视频将会以下载的方式保存，停止录制后请确认下载<br>(部分浏览器可能不兼容，导致无法下载)</div>
183 |                 <button class="window_button" onclick="sID('recordstop').style.display = 'none'">取消</button><button class="window_button" onclick="sID('recordstop').style.display = 'none';recStatus = false;recStop.click();showOption();">停止</button>
184 |             </div>
185 |         </div>
186 |         
187 |         <!--背景图片/颜色设置界面-->
188 |         <div class="window_bg" id="rgbeditor">
189 |             <div style="height:calc(50% - 170px);"></div>
190 |             <div class="window" id="rgbeditor_window">
191 |                 <div style="min-height:20px">
192 |                     <span id="bgopt_sw">
193 |                         <div class="optsw" id="bgimg_sw" onclick="coloropt_mode(this.id)">图片</div>
194 |                         <div style="display:inline-block;width:20px;"></div>
195 |                         <div class="optsw" id="rgbedt_sw" onclick="coloropt_mode(this.id)">颜色</div>
196 |                     </span>
197 |                     <button class="window_close" onclick="sID('rgbeditor').style.display = 'none'">×</button>
198 |                 </div>
199 |                 <div id="bgimg">
200 |                     <p style='margin-bottom:5px;text-align:center'>图片大小不建议超过2M，否则浏览器会卡顿甚至闪退</p>
201 |                     <div style="text-align:center"><button id="bgimg_input_btn" onclick="sID('bgimg_input').click()">＋ 选择本地文件</button></div>
202 |                     <input id='bgimg_input' style="display:none" type='file'/>
203 |                 </div>
204 |                 <table id="rgbedt">
205 |                     <tr>
206 |                         <td class="rgbeditor_optname">红</td>
207 |                         <td><input type="range" min='0' max='255' class="rgbeditor_range" id="rgbeditor_range_r" oninput="rgbeditor_rgba(this.id)"/></td>
208 |                         <td><input type="number" class="rgbeditor_input" id="rgbeditor_input_r" oninput="rgbeditor_rgba(this.id)"/></td>
209 |                     </tr>
210 |                     <tr>
211 |                         <td class="rgbeditor_optname">绿</td>
212 |                         <td><input type="range" min='0' max='255' class="rgbeditor_range" id="rgbeditor_range_g" oninput="rgbeditor_rgba(this.id)"/></td>
213 |                         <td><input type="number" class="rgbeditor_input" id="rgbeditor_input_g" oninput="rgbeditor_rgba(this.id)"/></td>
214 |                     </tr>
215 |                     <tr>
216 |                         <td class="rgbeditor_optname">蓝</td>
217 |                         <td><input type="range" min='0' max='255' class="rgbeditor_range" id="rgbeditor_range_b" oninput="rgbeditor_rgba(this.id)"/></td>
218 |                         <td><input type="number" class="rgbeditor_input" id="rgbeditor_input_b" oninput="rgbeditor_rgba(this.id)"/></td>
219 |                     </tr>
220 |                     <tr>
221 |                         <td class="rgbeditor_optname">16进制</td>
222 |                         <td colspan="2"><input class="rgbeditor_input" style="width:auto" id="rgbeditor_hex" value="#fff" onblur="rgbeditor_rgba(this.id)"/></td>
223 |                     </tr>
224 |                     <tr id="rgbeditor_opacity" style="display:none">
225 |                         <td class="rgbeditor_optname">透明度</td>
226 |                         <td><input type="range" min='0' max='100' class="rgbeditor_range" id="rgbeditor_range_a" oninput="rgbeditor_rgba(this.id)"/></td>
227 |                         <td><input type="number" class="rgbeditor_input" id="rgbeditor_input_a" oninput="rgbeditor_rgba(this.id)"/></td>
228 |                     </tr>
229 |                     <tr>
230 |                         <td class="rgbeditor_optname" colspan="2">预览</td>
231 |                         <td><div class="rgbeditor_input" style="padding:0px;float:right;width:50px;height:25px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAWSURBVBhXYzh8+PB/EGAEEUeOHGEAAIE5DY5tDyfKAAAAAElFTkSuQmCC);background-size:20%;image-rendering:pixelated;overflow:hidden"><div id="rgbeditor_preview" style="height:100%;width:100%"></div></div></td>
232 |                     </tr>
233 |                 </table>
234 |             </div>
235 |         </div>
236 | 
237 |         <!--颜色设置脚本-->
238 |         <script type="text/javascript" src="./rgbeditor.js"></script>
239 | 
240 |         <!--主脚本-->
241 |         <script type="text/javascript" src="./main.js?20230103"></script>
242 | 
243 |         <!--实验性功能：录屏-->
244 |         <script type="text/javascript" src="./recordTest.js?20230119"></script>
245 |         
246 |         <!--调整布局脚本-->
247 |         <script type="text/javascript" src="./resize.js?20230103a"></script>
248 | 
249 |         <!--设置内容/计时器脚本-->
250 |         <script type="text/javascript" src="./applyContentTimer.js?20230103"></script>
251 |         
252 |         <!--初始化-->
253 |         <script type="text/JavaScript">
254 |             imgSrc = "./nugget.png?20221229"
255 |             vidSrc = "./test.mp4"
256 |             reverse_shadow_sw("load");
257 |             timer_optapply('sizerange');
258 |             mainSizeApply("load");
259 |             setTimeout("mainSizeApply('load')",1000)
260 |             autoresize();
261 |             showmode("imgopt_sw");
262 |             anispeed();
263 |             if(!recorderWork) sID('recordopt_tips').innerHTML = "当前浏览器不支持录制功能，但仍可以调节分辨率";
264 |             sID("loadingMask").parentNode.removeChild(sID("loadingMask"));
265 |         </script>
266 | 
267 |         <!--实验性功能：录屏截取内容-->
268 |         <script src="//html2canvas.hertzen.com/dist/html2canvas.js"></script>
269 | 
270 |     </body>
271 | </html>


--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
  1 | //简写document.getElementById
  2 | function sID(id){
  3 |     if(document.getElementById(id)) return document.getElementById(id);
  4 |     else console.log("不存在的元素ID：“" + id + "”");
  5 | }
  6 | function cID(id){
  7 |     return document.getElementById(id);
  8 | }
  9 | 
 10 | //下滑弹出选项
 11 | //排除不需要下滑手势的元素
 12 | sID("option").onmousedown = sID("timeropt").onmousedown = sID("rgbeditor").onmousedown = sID("recordopt").onmousedown = sID("recordstop").onmousedown = sID("option").ontouchstart = sID("timeropt").ontouchstart = sID("rgbeditor").ontouchstart = sID("recordopt").ontouchstart = sID("recordstop").ontouchstart = function(){
 13 |     clickReaction = "none";
 14 | }
 15 | //鼠标
 16 | document.body.onmousedown = function(event){
 17 |     if(typeof clickReaction=="undefined"){
 18 |         moveY = event.clientY;
 19 |         document.onmousemove = function(event){
 20 |             if(moveY+60<=event.clientY){
 21 |                 showOption();
 22 |                 document.onmousemove = false;
 23 |             }
 24 |         }
 25 |         document.onmouseup = function(){
 26 |             document.onmousemove = false;
 27 |         }
 28 |         return false;
 29 |     }
 30 |     else delete clickReaction;
 31 | }
 32 | //触摸
 33 | document.body.ontouchstart = function(event){
 34 |     if(typeof clickReaction=="undefined"){
 35 |         moveY = event.targetTouches[0].pageY;
 36 |         document.ontouchmove = function(event){
 37 |             if(moveY+60<=event.targetTouches[0].pageY){
 38 |                 showOption();
 39 |                 document.ontouchmove = false;
 40 |             }
 41 |         }
 42 |         document.ontouchend = function(){
 43 |             document.ontouchmove = false;
 44 |         }
 45 |         return false;
 46 |     }
 47 |     else delete clickReaction;
 48 | }
 49 | 
 50 | //按“O”键弹出选项
 51 | document.onkeydown = function(event){
 52 |     if(event.keyCode==79) showOption();
 53 | }
 54 | 
 55 | //显示选项界面
 56 | function showOption(){
 57 |     if(sID("option").style.display=="none"){
 58 |         if(recorderWork&&recStatus==true) sID("recordstop").style.display = "block";
 59 |         else{
 60 |             timework = "disabled";
 61 |             sID("option").style.display = "block";
 62 |             if(sID("tips")) sID("tips").remove();
 63 |             applyresize();
 64 |         }
 65 |     }
 66 | }
 67 | 
 68 | //进入全屏
 69 | function launchFullscreen(element) {
 70 |     var ele = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
 71 |     if(ele) exitFullscreen();
 72 |     else if (element.requestFullscreen) element.requestFullscreen();
 73 |     else if (element.mozRequestFullScreen) element.mozRequestFullScreen();
 74 |     else if (element.msRequestFullscreen) element.msRequestFullscreen();
 75 |     else if (element.webkitRequestFullscreen) element.webkitRequestFullScreen();
 76 | }
 77 | 
 78 | //退出全屏
 79 | function exitFullscreen() {
 80 |     if (document.exitFullscreen) document.exitFullscreen();
 81 |     else if (document.mozExitFullScreen) document.mozExitFullScreen();
 82 |     else if (document.msExitFullscreen) document.msExitFullscreen();
 83 |     else if (document.webkitExitFullscreen) document.webkitExitFullScreen();
 84 | }
 85 | 
 86 | //打开背景图片/颜色设置界面
 87 | function coloropt_init(bgimg_enable,opacity){
 88 |     sID("rgbeditor").style.display = "block";
 89 |     if(bgimg_enable=="bgimg"){
 90 |         sID("bgopt_sw").style.display = "inline"
 91 |         if(sID("mainbox").style.background.substring(0,3)=="url") coloropt_mode("bgimg_sw");
 92 |         else coloropt_mode("rgbedt_sw",opacity);
 93 |     }
 94 |     else{
 95 |         sID("bgopt_sw").style.display = "none"
 96 |         coloropt_mode("rgbedt_sw",opacity);
 97 |     }
 98 | }
 99 | 
100 | //切换背景图片/颜色模式
101 | function coloropt_mode(name,opacity){
102 |     var optList = sID("bgopt_sw").getElementsByClassName("optsw");
103 |     for(i=0;i<optList.length;i++){
104 |         sID(optList[i].id.split("_")[0]).style.display = "none";
105 |         sID(optList[i].id).style = "border-bottom:3px solid rgba(0,0,0,0)";
106 |     }
107 |     if(name=="rgbedt_sw"){
108 |         rgbeditor_initbyid(rgb_id,rgb_attribute,opacity);
109 |         sID("rgbedt").style.display = "table";
110 |     }
111 |     else{
112 |         bgimg_init();
113 |         sID("bgimg").style.display = "block";
114 |     }
115 |     sID(name).style = "font-weight:bold;border-bottom:3px solid royalblue";
116 | }
117 | 
118 | //导入背景图片
119 | function bgimg_init(){
120 |     if(window.FileReader){
121 |         anyimg = sID("bgimg_input");
122 |         anyimg.addEventListener('change',bgimg_get,false);
123 |     }
124 |     else sID("bgimg").innerHTML = "您的浏览器不支持自定义图片。";
125 |     if(typeof(BgImg)!="undefined") bgimg_apply();
126 | }
127 | 
128 | //加载背景图片
129 | function bgimg_get(){
130 |     var file = anyimg.files[0];
131 |     if(!/image\/\w+/.test(file.type)) alert("请确保文件为图像类型,否则将无法显示");
132 |     BgImg = URL.createObjectURL(file);
133 |     bgimg_apply();
134 | }
135 | 
136 | //应用背景图片
137 | function bgimg_apply(){
138 |     sID("mainbox").style.background = "url(" + BgImg + ")"
139 |     sID("mainbox").style.backgroundSize = "cover";
140 |     sID("mainbox").style.backgroundPosition = "center";
141 | }
142 | deviceDPR = window.devicePixelRatio;
143 | recorderWork = false;


--------------------------------------------------------------------------------
/nugget.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BUGTeas/nugget_speens_h5/c7299d352bb6f8fc15e53fa3154b74e6f3060714/nugget.png


--------------------------------------------------------------------------------
/recordTest.js:
--------------------------------------------------------------------------------
 1 | //实验性功能：录屏
 2 | var format;
 3 | canv = document.getElementById("canv");
 4 | const ctx = canv.getContext('2d');
 5 | function playCanvas(ctx){
 6 |     if(recStatus==true) setTimeout(function(){playCanvas(ctx)},0);
 7 |     html2canvas(document.getElementById("mainbox")).then(output => {
 8 |         ctx.drawImage(output, 0, 0, recWidth, recHeight);
 9 |         output.remove();
10 |     });
11 | }
12 | recStatus = false;
13 | function setRecorder(){
14 |     recStart = document.createElement("button");
15 |     recStop = document.createElement("button");
16 |     recAllChunks = [];
17 |     var formatlist = ["h264","vp9","vp8","none"];
18 |     for(i=0;i<formatlist.length;i++){
19 |         format = formatlist[i];    
20 |         if(format!="none"&&MediaRecorder.isTypeSupported('video/webm;codecs=' + format)){
21 |             i = formatlist.length;
22 |             if(format!=formatlist[0]) sID("recordopt_tips").innerHTML = "当前浏览器不支持 " + formatlist[0] + " 编码，将使用 " + format + " 编码。";
23 |             const stream = canv.captureStream(30); //30帧
24 |             const recorder = new MediaRecorder(stream, {
25 |                 mimeType: 'video/webm;codecs=' + format
26 |             });
27 |             recorder.ondataavailable = e => {
28 |                 recAllChunks.push(
29 |                     e.data
30 |                 );
31 |             }
32 |             recStart.onclick = e => {
33 |                 recorder.start(10);
34 |             }
35 |             recStop.onclick = e => {
36 |                 recorder.stop();
37 |                 const link = document.createElement('a');
38 |                 link.style.display = 'none';
39 |                 const fullBlob = new Blob(recAllChunks);
40 |                 const downloadUrl = window.URL.createObjectURL(fullBlob);
41 |                 link.href = downloadUrl;
42 |                 link.download = 'media.mp4';
43 |                 document.body.appendChild(link);
44 |                 link.click();
45 |                 link.remove();
46 |                 console.log("停止录制")
47 |                 setRecorder();
48 |             }
49 |             console.log("录制器设置完成，编码为 " + format);
50 |         }
51 |         else{
52 |             sID("recordopt_tips").innerHTML = "当前浏览器不支持录制功能。";
53 |             console.log(sID("recordopt_tips").innerHTML);
54 |         }
55 |     }
56 | }
57 | recorderWork = true;


--------------------------------------------------------------------------------
/resize.js:
--------------------------------------------------------------------------------
  1 | //检测窗口变化自动调整尺寸
  2 | lastsize = document.body.clientWidth - document.body.clientHeight;
  3 | lastboxsize = 0;
  4 | function autoresize(){
  5 |     var newsize = document.body.clientWidth - document.body.clientHeight;
  6 |     if(newsize!=lastsize) applyresize();
  7 |     lastsize = newsize;
  8 |     var showname = ["img","vid","text","html"];
  9 |     for(i=0;i<showname.length;i++){
 10 |         if(cID("show" + showname[i])){
 11 |             var nowboxsize = sID("show" + showname[i]).clientWidth + sID("show" + showname[i]).clientHeight;
 12 |             if(nowboxsize!=lastboxsize){
 13 |                 applyresize();
 14 |                 lastboxsize = nowboxsize;
 15 |             }
 16 |         }
 17 |     }
 18 |     setTimeout("autoresize()",25)
 19 |     //当用户通过其他途径退出全屏后取消勾选全屏选项
 20 |     var ele = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || document.msFullscreenElement;
 21 |     if(ele) sID("fullscreen_sw").checked = true;
 22 |     else sID("fullscreen_sw").checked = false;
 23 | }
 24 | 
 25 | //旋转框架尺寸
 26 | resizeCount = 1;
 27 | function applyresize(){
 28 |     var rotationbox = sID("rotationbox");
 29 |     var shadowbox = sID("shadowbox");
 30 |     var mainbox = sID("mainbox");
 31 |     var winbody = document.body;
 32 |     var showname = ["none","img","vid","text","html"];
 33 |     for(i=0;i<showname.length;i++){
 34 |         if(showname[i]=="none") boxWidth = boxHeight = "300";
 35 |         else if(cID("show" + showname[i])){
 36 |             var show = sID("show" + showname[i]);
 37 |             boxWidth = show.clientWidth;
 38 |             boxHeight = show.clientHeight;
 39 |         }
 40 |     }
 41 |     if(winbody.clientWidth>=360) var optionWidth = "320px";
 42 |     else var optionWidth = "calc(100% - 40px)";
 43 |     if(mainSize[0]=="auto") mainbox.style.height = "100%";
 44 |     if(mainSize[0]=="auto"&&winbody.clientWidth>=boxWidth + 400&&sID("option").style.display!="none"){
 45 |         mainbox.style.width = "calc(100% - 360px)";
 46 |         var optStyle = "height:calc(100% - 40px);background-color:#c8c8c8;width:" + optionWidth;
 47 |     }else if(mainSize[0]!="auto"&&winbody.clientWidth>=mainbox.clientWidth + 360) var optStyle = "height:calc(100% - 40px);background-color:#c8c8c8;width:" + optionWidth;
 48 |     else{
 49 |         if(mainSize[0]=="auto") mainbox.style.width = "100%";
 50 |         var optStyle = "max-height:calc(100% - 40px);background-color:rgba(150,150,150,0.5);width:" + optionWidth;
 51 |     }
 52 |     if(sID("option").style.display!="none") sID("option").style = optStyle;
 53 |     rotationbox.style.width = shadowbox.style.width = boxWidth + "px";
 54 |     rotationbox.style.height = boxHeight + "px";
 55 |     shadowbox.style.height = boxHeight / 5 + "px";
 56 |     headHeight = (mainbox.clientHeight - rotationbox.clientHeight) / 2
 57 |     rotationbox.style.marginLeft = shadowbox.style.marginLeft = ((mainbox.clientWidth - rotationbox.clientWidth) / 2)+ "px";
 58 |     anglechange();
 59 |     console.log("第 " + resizeCount + " 次调整布局\n窗口尺寸：" + mainbox.clientWidth + "px × " + mainbox.clientHeight + "px\n旋转物体尺寸" + rotationbox.clientWidth + "px × " + rotationbox.clientHeight + "px");
 60 |     resizeCount++
 61 | }
 62 | 
 63 | //旋转框架角度/透视
 64 | function anglechange(mode,resize){
 65 |     var xinput = sID("Xangleinput");
 66 |     var xrange = sID("Xanglerange");
 67 |     var yinput = sID("Yangleinput");
 68 |     var yrange = sID("Yanglerange");
 69 |     var zinput = sID("Zangleinput");
 70 |     var zrange = sID("Zanglerange");
 71 |     var pinput = sID("perspectinput");
 72 |     var prange = sID("perspectrange");
 73 |     var aniset = sID("animationset");
 74 |     if(mode=="xrange") xinput.value = xrange.value - 180;
 75 |     else if(mode=="yrange") yinput.value = yrange.value - 180;
 76 |     else if(mode=="zrange") zinput.value = zrange.value - 180;
 77 |     else if(mode=="prange") pinput.value = 1000 - prange.value;
 78 |     else{
 79 |         xrange.value = Number(xinput.value) + 180;
 80 |         yrange.value = Number(yinput.value) + 180;
 81 |         zrange.value = Number(zinput.value) + 180;
 82 |         prange.value = 1000 - pinput.value;
 83 |     }
 84 |     //旋转轴
 85 |     var rMod = document.getElementsByName("rotateRadio");
 86 |     for(i=0;i<rMod.length;i++){
 87 |         if(rMod[i].checked) var rMod = rMod[i].value;
 88 |     }
 89 |     //上下浮动距离
 90 |     var floatingDistance = boxHeight / 10;
 91 |     if(!sID("floating_sw").checked) var floatingDistance = 0;
 92 |     //上下浮动阴影变化
 93 |     var shdUpBlur = boxHeight / 7;
 94 |     var shdDnBlur = boxHeight / 10;
 95 |     if(!sID("floating_sw").checked) var shdDnBlur = shdUpBlur = boxHeight / 8.5;
 96 |     //上下浮动阴影距离变化
 97 |     var ShadowMargin = boxHeight / 5;
 98 |     var shdUpMarg = ShadowMargin + floatingDistance;
 99 |     var shdDnMarg = ShadowMargin - floatingDistance;
100 |     //上下浮动顶部高度变化
101 |     var headUpMarg = headHeight + floatingDistance;
102 |     var headDnMarg = headHeight - floatingDistance;
103 |     //应用动画
104 |     var boxSet = ["0%{transform:perspective(" + pinput.value + "px) rotate","deg) rotateX(" + xinput.value + "deg) rotateY(" + yinput.value + "deg) rotateZ(" + zinput.value + "deg)"];
105 |     aniset.innerHTML = "" +
106 |     "@keyframes headanimation{0%,100%{margin-top:" + headUpMarg + "px;}50%{margin-top:" + headDnMarg + "px}}" +
107 |     "@keyframes shadowanimation{0%,100%{filter:blur(" + shdDnBlur + "px);margin-top:" + shdDnMarg + "px}50%{filter:blur(" + shdUpBlur + "px);margin-top:" + shdUpMarg + "px}}" +
108 |     "@keyframes boxanimation{" + boxSet[0] + rMod + "(" + rotateAngle[0] + boxSet[1] + "}10" + boxSet[0] + rMod + "(" + rotateAngle[1] + boxSet[1] + "}}";
109 |     //sID("rotationbox").style.transformStyle = "preserve-3d";
110 | }
111 | 
112 | //应用动画速度
113 | aniMode = "animation infinite linear";
114 | sID("rotationbox").style.animation = "box" + aniMode;
115 | sID("shadowbox").style.animation = "shadow" + aniMode;
116 | sID("headbox").style.animation = "head" + aniMode;
117 | function anispeed(mode){
118 |     var input = sID("speedinput");
119 |     var range = sID("speedrange");
120 |     if(mode=="range")input.value = 10 - range.value / 1000;
121 |     else{
122 |         range.value = (10 - input.value) * 1000;
123 |         applySpeed();
124 |     }
125 | }
126 | function applySpeed(){
127 |     iptValue = sID("speedinput").value;
128 |     sID("rotationbox").style.animationDuration = iptValue + "s";
129 |     sID("shadowbox").style.animationDuration = sID("headbox").style.animationDuration = iptValue * 1.5 + "s";
130 | }
131 | 
132 | //阴影和正反转
133 | function reverse_shadow_sw(mode){
134 |     if(sID("shadow_sw").checked) sID("shadowbox").style.background = "#555";
135 |     else sID("shadowbox").style.background = "rgba(0,0,0,0)";
136 |     if(sID("reverse_sw").checked) rotateAngle = [0,360];
137 |     else rotateAngle = [360,0];
138 |     if(mode!="load") anglechange();
139 | }
140 | 
141 | //应用主体尺寸
142 | function mainSizeApply(mode){
143 |     var weight = document.getElementsByName("mainsize");
144 |     for(var i=0;i<weight.length;i++){
145 |         if(weight[i].checked){
146 |             mainSize = weight[i].value.split("_");
147 |             if(mainSize[0]=="cust"|mode=="cust"){
148 |                 var cwipt = sID("mainsizeCustWidth");
149 |                 var chipt = sID("mainsizeCustHeight");
150 |                 if(cwipt.value=="") cwipt.value = "0";
151 |                 if(chipt.value=="") chipt.value = "0";
152 |                 sID("mainbox").style.width = (cwipt.value / deviceDPR) + "px";
153 |                 sID("mainbox").style.height = (chipt.value / deviceDPR) + "px";
154 |                 recWidth = cwipt.value;
155 |                 recHeight = chipt.value;
156 |                 sID("mainsize_c").checked = true;
157 |             }else if(mainSize[0]!="auto"){
158 |                 sID("mainbox").style.width = (mainSize[0] / deviceDPR) + "px";
159 |                 sID("mainbox").style.height = (mainSize[1] / deviceDPR) + "px";
160 |                 recWidth = mainSize[0];
161 |                 recHeight = mainSize[1];
162 |             }else{
163 |                 recWidth = sID("mainbox").clientWidth * deviceDPR;
164 |                 recHeight = sID("mainbox").clientHeight * deviceDPR;
165 |             }
166 |             sID("canv").width = recWidth;
167 |             sID("canv").height = recHeight;
168 |             if(typeof ctx!="undefined"){
169 |                 ctx.fillStyle = '#114514';
170 |                 ctx.fillRect(0, 0, recWidth, recHeight);
171 |             }
172 |             if(recorderWork) setRecorder();
173 |             if(mode!="load") applyresize();
174 |         }
175 |     }
176 | }


--------------------------------------------------------------------------------
/rgbeditor.js:
--------------------------------------------------------------------------------
  1 | function rgbeditor_initbyid(id,attribute,opacity){
  2 |     rgbeditor_init("document.getElementById('" + id + "')",attribute,opacity)
  3 | }
  4 | function rgbeditor_init(object,attribute,opacity){
  5 |     apply_object = object;
  6 |     apply_attribute = attribute;
  7 |     if(opacity=="opacity"){
  8 |         opacity_enable = "enabled";
  9 |         document.getElementById("rgbeditor_opacity").style.display = "table-row";
 10 |     }
 11 |     else{
 12 |         opacity_enable = "disabled";
 13 |         document.getElementById("rgbeditor_opacity").style.display = "none";
 14 |     }
 15 |     eval("object_attribute = " + object + "." + attribute);
 16 |     var rgefnt = "rgbeditor_range_";
 17 |     var rger = document.getElementById(rgefnt + "r");
 18 |     var rgeg = document.getElementById(rgefnt + "g");
 19 |     var rgeb = document.getElementById(rgefnt + "b");
 20 |     var rgea = document.getElementById(rgefnt + "a");
 21 |     if(object_attribute.substring(0,3)=="rgb"){
 22 |         var rgb = object_attribute.split("(")[1].split(")")[0].split(", ");
 23 |         rger.value = rgb[0];
 24 |         rgeg.value = rgb[1];
 25 |         rgeb.value = rgb[2];
 26 |         if(object_attribute.substring(3,4)=="a") rgea.value = rgb[3] * 100;
 27 |         else rgea.value = 100;
 28 |     }
 29 |     else{
 30 |         rger.value = 255;
 31 |         rgeg.value = 255;
 32 |         rgeb.value = 255;
 33 |         rgea.value = 100;
 34 |     }
 35 |     rgbeditor_rgba(rgefnt + "r","none");
 36 |     rgbeditor_rgba(rgefnt + "g","none");
 37 |     rgbeditor_rgba(rgefnt + "b","none");
 38 |     rgbeditor_rgba(rgefnt + "a");
 39 | }
 40 | function rgbeditor_rgba(id,mode){
 41 |     var idsplit = id.split("_");
 42 |     var id = document.getElementById(id);
 43 |     var iptfnt = "rgbeditor_input_";
 44 |     var rgefnt = "rgbeditor_range_";
 45 |     var iptr = document.getElementById(iptfnt + "r");
 46 |     var iptg = document.getElementById(iptfnt + "g");
 47 |     var iptb = document.getElementById(iptfnt + "b");
 48 |     var ipta = document.getElementById(iptfnt + "a");
 49 |     if(idsplit[1]=="range") var idse = "input";
 50 |     else if(idsplit[1]=="input"){
 51 |         var idse = "range";
 52 |         if(id.value!="") id.value = Number.parseInt(id.value);
 53 |     }
 54 |     if(idsplit[1]!="hex") var idse = document.getElementById("rgbeditor_" + idse + "_" + idsplit[2]);
 55 |     if(idsplit[1]=="input"&&id.value==""){
 56 |         id.value = 0;
 57 |         idse.value = 0;
 58 |     }
 59 |     else if(idsplit[2]=="a"){
 60 |         if(id.value>=101){
 61 |             id.value = 100;
 62 |             idse.value = 100;
 63 |         }
 64 |         else idse.value = id.value;
 65 |     }
 66 |     else if(idsplit[1]=="hex"){
 67 |         var d = id.value;
 68 |         if(d.substring(0,1)=="#"){
 69 |             if(d.length==7){
 70 |                 iptr.value = Number.parseInt(d.substring(1,3),16);
 71 |                 iptg.value = Number.parseInt(d.substring(3,5),16);
 72 |                 iptb.value = Number.parseInt(d.substring(5,7),16);
 73 |             }
 74 |             else if(d.length==4){
 75 |                 var hex1 = d.substring(1,2);
 76 |                 var hex2 = d.substring(2,3);
 77 |                 var hex3 = d.substring(3,4);
 78 |                 var rgb1 = Number.parseInt(hex1 + "" + hex1,16);
 79 |                 var rgb2 = Number.parseInt(hex2 + "" + hex2,16);
 80 |                 var rgb3 = Number.parseInt(hex3 + "" + hex3,16);
 81 |                 iptr.value = rgb1;
 82 |                 iptg.value = rgb2;
 83 |                 iptb.value = rgb3;
 84 |             }
 85 |         }
 86 |         rgbeditor_rgba(iptfnt + "r","none");
 87 |         rgbeditor_rgba(iptfnt + "g","none");
 88 |         rgbeditor_rgba(iptfnt + "b","none");
 89 |     }
 90 |     else if(id.value>=256){
 91 |         id.value = 255;
 92 |         idse.value = 255;
 93 |     }
 94 |     else idse.value = id.value;
 95 |     if(mode!="none"){
 96 |         var numr = iptr.value;
 97 |         var numg = iptg.value;
 98 |         var numb = iptb.value;
 99 |         if(opacity_enable=="enabled") var seta = "," + ipta.value / 100;
100 |         else var seta = ",1";
101 |         if(idsplit[1]!="hex"){
102 |         var spcr = spcg = spcb = "";
103 |             if(numr<=15) var spcr = "0";
104 |             if(numg<=15) var spcg = "0";
105 |             if(numb<=15) var spcb = "0";
106 |             var hexr = (Number.parseInt(numr)).toString(16);
107 |             var hexg = (Number.parseInt(numg)).toString(16);
108 |             var hexb = (Number.parseInt(numb)).toString(16);
109 |             document.getElementById("rgbeditor_hex").value = "#" + spcr + hexr + spcg + hexg + spcb + hexb;
110 |         }
111 |         var optcolor = "rgba(" + numr + "," + numg + "," + numb + seta + ")";
112 |         document.getElementById("rgbeditor_preview").style.backgroundColor = optcolor;
113 |         eval(apply_object + "." + apply_attribute + " = optcolor");
114 |     }
115 | }


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
  1 | html,body{
  2 |     margin:0;
  3 |     height:100%;
  4 |     overflow:hidden;
  5 |     font-family:"microsoft yahei",sans-serif;
  6 |     background:#000;
  7 | }
  8 | /*阴影圆角*/
  9 | #shadowbox{
 10 |     border-radius:50%;
 11 | }
 12 | /*计时器悬浮、鼠标指针、禁用选择文字*/
 13 | #timer{
 14 |     position:absolute;
 15 |     user-select:none;
 16 |     cursor:move;
 17 | }
 18 | /*选项界面*/
 19 | #option{
 20 |     position:absolute;
 21 |     z-index:3;
 22 |     top:0;
 23 |     right:0;
 24 |     padding:20px;
 25 |     overflow:auto;
 26 |     font-size:13px;
 27 |     animation-name:optionEject;
 28 |     animation-duration:150ms;
 29 |     animation-timing-function:ease-out;
 30 | }
 31 | /*向下弹出选项*/
 32 | @keyframes optionEject{
 33 |     0%{
 34 |         opacity:0;
 35 |         top:-40px;
 36 |     }
 37 |     100%{
 38 |         opacity:1;
 39 |         top:0px;
 40 |     }
 41 | }
 42 | /*滑动条*/
 43 | .range{
 44 |     min-width:calc(100% - 150px);
 45 |     max-width:100px;
 46 | }
 47 | /*输入框*/
 48 | .input{
 49 |     width:50px;
 50 |     border:1px solid #999;
 51 |     border-radius:7px;
 52 |     margin:5px;
 53 |     padding:5px;
 54 | }
 55 | /*选项按钮*/
 56 | #option button{
 57 |     background:rgb(46, 102, 255);
 58 |     color:#fff;
 59 |     border:none;
 60 |     border-radius:5px;
 61 |     margin:10px 10px 10px 0px;
 62 |     transition-property:all;
 63 |     transition-duration:200ms;
 64 |     vertical-align:top;
 65 |     padding:7px;
 66 |     font-size:13px;
 67 | }
 68 | /*大选项按钮*/
 69 | #option .bigButton{
 70 |     padding:10px;
 71 |     font-size:15px;
 72 |     margin:10px;
 73 |     margin-left:calc(50% - 75px);
 74 |     width:150px;
 75 | }
 76 | /*选项按钮点击后*/
 77 | #option button:hover{
 78 |     background:rgb(100, 142, 255);
 79 | }
 80 | #option button:active{
 81 |     transform:scale(0.91);
 82 | }
 83 | #option .bigButton:active{
 84 |     transform:scale(0.95);
 85 | }
 86 | /*选项名称*/
 87 | #option .name{
 88 |     display:inline-block;
 89 |     text-align:right;
 90 |     max-width:auto;
 91 |     min-width:40px;
 92 | }
 93 | /*选项卡切换*/
 94 | #option .optsw{
 95 |     display:inline-block;
 96 |     font-size:20px;
 97 |     user-select:none;
 98 |     padding-bottom:5px;
 99 |     margin:0px 20px 10px 0px;
100 | }
101 | #option .optsw:hover{
102 |     font-weight:bolder;
103 | }
104 | /*文本选项大文本框*/
105 | #option textarea{
106 |     border:1px solid #999;
107 |     border-radius:7px;
108 |     padding:5px;
109 |     min-width:calc(100% - 10px);
110 |     max-width:calc(100% - 10px);
111 |     min-height:50px;
112 |     max-height:200px;
113 | }
114 | /*分隔线*/
115 | hr{
116 |     border:0.5px solid #aaa;
117 | }
118 | #mainbox{
119 |     position:relative;
120 |     overflow:hidden;
121 | }
122 | 
123 | 
124 | .window_bg{
125 |     width:100%;
126 |     height:100%;
127 |     top:0px;
128 |     left:0px;
129 |     background:rgba(128,128,128,0.5);
130 |     position:absolute;
131 |     z-index:4;
132 |     display:none;
133 | }
134 | .window{
135 |     width:250px;
136 |     height:300px;
137 |     background:#fff;
138 |     box-shadow:0px 7px 12px rgba(128,128,128,0.5);
139 |     margin-left:calc(50% - 145px);
140 |     padding:20px;
141 |     border:1px solid #ddd;
142 |     border-radius:5px;
143 | }
144 | .window div,.window table{
145 |     margin-bottom:10px;
146 | }
147 | .window_button{
148 |     border:none;
149 |     border-radius:3px;
150 |     background-color:rgb(41, 108, 255);
151 |     color:white;
152 |     padding:7px;
153 |     margin-right:10px;
154 |     font-size:13px;
155 | }
156 | .window_close{
157 |     float:right;
158 |     border:none;
159 |     background:none;
160 |     padding:0px;
161 |     margin:0px;
162 |     font-size:25px;
163 |     font-family:'Lucida console',monospace;
164 |     color:#555;
165 | }
166 | #rgbeditor_window .optsw{
167 |     display:inline-block;
168 |     font-size:20px;
169 |     user-select:none;
170 |     padding-bottom:5px;
171 |     margin-bottom:10px;
172 | }
173 | #rgbeditor_window table{
174 |     border-collapse:collapse;
175 |     width:100%;
176 | }
177 | #rgbeditor_window table td{
178 |     text-align:right;
179 |     padding:7px 0 7px 0;
180 | }
181 | .rgbeditor_input{
182 |     width:40px;
183 |     border:1px solid #ccc;
184 |     border-radius:3px;
185 |     padding:5px;
186 |     margin-left:2px;
187 | }
188 | #bgimg_input_btn{
189 |     width:120px;
190 |     border:none;
191 |     border-radius:3px;
192 |     background-color:rgb(41, 108, 255);
193 |     color:white;
194 |     padding:10px;
195 |     margin-left:10px;
196 | }
197 | .rgbeditor_range{
198 |     width:calc(100% - 5px);
199 |     margin-left:5px;
200 | }
201 | .rgbeditor_optname{
202 |     font-size:15px;
203 | }


--------------------------------------------------------------------------------
/test.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BUGTeas/nugget_speens_h5/c7299d352bb6f8fc15e53fa3154b74e6f3060714/test.mp4


--------------------------------------------------------------------------------