Home Explore Help
Register Sign In
schtonn
/
public
1
1
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

add music & tweak

root 2 years ago
parent
51ed098bb8
commit
2791cfb2ff
10 changed files with 183 additions and 9 deletions
Split View Show Diff Stats
  1. 0 1
      about/index.html
  2. BIN
      audio/avengers.mp3
  3. 3 3
      fun/article/index.html
  4. 16 4
      fun/index.html
  5. 67 0
      fun/music/index.html
  6. 2 0
      fun/raytrace/index.html
  7. 76 0
      js/audio.js
  8. 1 0
      js/score.js
  9. 0 0
      js/score.min.js
  10. 18 1
      log/index.html

+ 0 - 1
about/index.html
View File 

@@ -37,7 +37,6 @@
 
     <p><span>我是</span><span id="miss">向量。我还能说啥。</span></p>
 
     <p>...我目前在读实验中学，想找我玩可以来 2025 届十一班；我是信竞狗，进省队无望，自从北京今年（2022）的 NOIP
 
         取消后，我现在也基本想退役了。</p>
 
-    <p>别去查我的成绩，不管是信息还是文化课。捞的一批。</p>
 
     <button class="btn btn-danger" onclick="$('#miss').html('');addchr(1);$('.btn').hide(100)" title="end"></button>
 
 
 </body>

BIN
audio/avengers.mp3
View File


+ 3 - 3
fun/article/index.html
View File 

@@ -13,7 +13,7 @@
 
     <button class="btn btn-info" onclick="history.back()"><span
 
             class="glyphicon glyphicon-home"></span>&nbsp;返回</button>
 
     <div class="page-header">
 
-        <h2>Death is but crossing the world<small> <i>Harry Potter</i> 某一部的序言</small></h2>
 
+        <h2 id="Death-is-but-crossing-the-world">Death is but crossing the world<small> <i>Harry Potter</i> 某一部的序言</small></h2>
 
     </div>
 
     <p>Death is but crossing the world, as friends do the seas; they live in one another still. </p>
 
     <p>For they must needs
 
@@ -24,8 +24,8 @@
 
         die, yet their friendship and society are, in the best sense, ever present, because immortal.</p>
 
 
     <div class="page-header">
 
-        <h2>Seduce someone
 
-            <small>（背单词时发现的）</small>
 
+        <h2 id="Seduce-someone">Seduce someone
 
+            <small>背单词时发现的</small>
 
         </h2>
 
     </div>
 
     <p>We are never as shy and gauche as we are when attempting to seduce someone we deeply like. The thought of someone

+ 16 - 4
fun/index.html
View File 

@@ -1,5 +1,4 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
 
 <head>
 
     <meta charset="UTF-8">
 
@@ -57,7 +56,13 @@
 
         img {
 
             transition-duration: 300ms;
 
             border: 3px dotted grey;
 
-            width: 30%;
 
+            width: 300px;
 
+        }
 
+
 
+        .btn.nohover:hover {
 
+            transform: none;
 
+            outline: none;
 
+            text-shadow: none;
 
         }
 
     </style>
 
 </head>
 
@@ -65,7 +70,7 @@
 
 <body itemscope itemtype="http://schema.org/WebPage">
 
     <a class="btn btn-info" href="/"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>&nbsp;返回</a>
 
     <div class="page-header">
 
-        <h2>> 娱乐<small>（首页放不下了，根目录也太挤了，再有千奇百怪的想法我都往这扔）</small></h2>
 
+        <h2>> 娱乐 <small>首页放不下了，根目录也太挤了，再有千奇百怪的想法我都往这扔</small></h2>
 
     </div>
 
     <div>
 
         <a class="btn btn-warning" href="core/">Core</a>
 
@@ -86,10 +91,17 @@
 
                 aria-hidden="true"></span>&nbsp;&nbsp;五子棋</a>
 
         <a class="btn btn-info" id="gravity" href="/gravity/"><span class="glyphicon glyphicon-magnet"
 
                 aria-hidden="true"></span>&nbsp;&nbsp;引力</a>
 
-        <a class="btn btn-info" id="raytrack" href="raytrace/"><span class="glyphicon glyphicon-cog"
 
+        <a class="btn btn-warning" id="raytrack" href="raytrace/"><span class="glyphicon glyphicon-cog"
 
                 aria-hidden="true"></span>&nbsp;&nbsp;1k光追</a>
 
         <a class="btn btn-info" id="article" href="article/"><span class="glyphicon glyphicon-book"
 
                 aria-hidden="true"></span>&nbsp;&nbsp;一些好玩的文章</a>
 
+        <a class="btn btn-info" id="music" href="music/"><span class="glyphicon glyphicon-music"
 
+                aria-hidden="true"></span>&nbsp;&nbsp;音乐创作</a>
 
+        <div style="text-align:right">
 
+            <span class="btn btn-xs btn-warning nohover">纯搬运</span> - <span
 
+                class="btn btn-xs btn-info nohover">小工程</span> -
 
+            <span class="btn btn-xs btn-success nohover">大工程</span>
 
+        </div>
 
     </div>
 
     <hr>
 
     <img src="1.png">

+ 67 - 0
fun/music/index.html
View File 

@@ -0,0 +1,67 @@
 
+<!DOCTYPE html>
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+
 
+    <script type="text/javascript" src="/js/jquery.min.js"></script>
 
+    <link rel="stylesheet" href="/css/bootstrap.min.css">
 
+    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
 
+
 
+    <link rel="canonical" href="https://schtonn.github.io/">
 
+    <link rel="preconnect" href="https://fonts.gstatic.com">
 
+    <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
 
+&family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
 
+    <link rel="stylesheet" href="/css/style.css">
 
+    <!-- <link rel="stylesheet" href="/css/style.css"> -->
 
+    <title>音乐创作</title>
 
+    <script type="text/javascript" src="/js/audio.js"></script>
 
+    <script>
 
+        document.writeln('<button class="btn btn-info" onclick="history.back()"><span class="glyphicon glyphicon-home"></span>&nbsp;返回</button><div class="page-header"><h3>音乐创作？<small>、heneuh94830y9]][]]--08</small></h3></div><p>按创作时间排序。<br>玄学的命名规则：一般取开头几个比较重要的音符，数字代表版本，假如不是这个格式那就是我照着谱抄的。</p>')
 
+        var list = ['katyusha,-', 'avengers,-', 'e-e-edfe', 'grasswalk,-', 'where am i going,-', 'sad,-', 'tom,-', 'a#d#cc#c', 'ffgaf', 'bcabc', 'bga#c#', 'cdbc', 'aaccgg', 'dddc', 'cdd#', 'gddf#dd', 'ag#ag#f#', 'f#g#c#g#a#c#', 'ef#c#ag#', 'friend,-', 'd#ba#g#g', 'a#agaa#c', 'ggaa#ag', 'a#agaa#c2,~', 'c#d#fc#c', 'da#gf#g,~', 'cdd#d#', 'ef#d#c#2', 'bbbdcb,~', 'efcaa', 'cag#g,~', 'dc#da', 'ebcdcb', 'aeaba,~']
 
+        for (let i = list.length - 1; i >= 0; i--) {
 
+            var g = list[i].split(',')
 
+            document.writeln('<div class="panel panel-' + ((g[1]) ? ((g[1] == '~') ? 'success' : 'info') : 'default') + ' col-md-4 col-sm-6" style="padding:0;transform:translateY(' + ((list.length - i - 1) % 3 * 25 + (list.length - i) * 20) + 'px)"><div class="panel-heading">' + g[0] + '</div><div class="panel-body"><audio src="' + g[0].replace(/#/g, '%23') + '.mp3"></audio><div class="pgs"><span style="font-family:\'Consolas\', Courier, monospace;font-size:10px"></span></div><div class="controls"><span class="played-time">00:00</span><button class="btn btn-default play-pause toggle"><span class="glyphicon glyphicon-play" id="icon-btn"></span></button><span class="audio-time" id="audioTime">0</span></div></div></div>')
 
+        }
 
+        //同时只能播放一个
 
+        var audios = $('audio');
 
+        function pauseAll() {
 
+            var self = this;
 
+            [].forEach.call(audios, function (i) {
 
+                i !== self && (i.pause(),
 
+                    $(i).parents('div').children('.controls').children('button').children().removeClass('glyphicon-pause').addClass('glyphicon-play'))
 
+            });
 
+        }
 
+        [].forEach.call(audios, function (i) {
 
+            i.addEventListener("play", pauseAll.bind(i));
 
+        })
 
+    </script>
 
+</head>
 
+
 
+<body>
 
+    <style>
 
+        .pgs {
 
+            text-align: center;
 
+        }
 
+
 
+        .pgs span {
 
+            width: 100%;
 
+            position: relative;
 
+            z-index: 2;
 
+        }
 
+
 
+        .play-pause {
 
+            border: 0;
 
+            padding: 0;
 
+            width: 40px;
 
+            height: 40px;
 
+            margin: 0 28px;
 
+            background: none;
 
+        }
 
+
 
+        .controls span {
 
+            color: #b3b5b7;
 
+            font-size: 12px;
 
+            display: inline-block;
 
+        }
 
+    </style>
 
+</body>

+ 2 - 0
fun/raytrace/index.html
View File 

@@ -10,6 +10,8 @@
 
 </head>
 
 
 <body>
 
+    <button class="btn btn-info" onclick="history.back()"><span
 
+        class="glyphicon glyphicon-home"></span>&nbsp;??</button>
 
     <canvas style="display: block; margin: auto; width: 512px; height: 512px;" width="512" height="512"></canvas>
 
     <script>
 
         var c = document.getElementsByTagName("canvas")[0].getContext("2d")

+ 76 - 0
js/audio.js
View File 

@@ -0,0 +1,76 @@
 
+var dot;
 
+$(function () {
 
+    $('.toggle').click(function () {
 
+        audio = $(this).parents('div').children('audio')[0]
 
+        audio.addEventListener('timeupdate', updateProgress, false);
 
+        audio.addEventListener('ended', audioEnded, false);
 
+
 
+        if (audio.paused) {
 
+            audio.play();
 
+            $(this).parents('div').children('.controls').children('button').children().removeClass('glyphicon-play').addClass('glyphicon-pause')
 
+        } else {
 
+            audio.pause();
 
+            $(this).parents('div').children('.controls').children('button').children().removeClass('glyphicon-pause').addClass('glyphicon-play')
 
+        }
 
+    })
 
+
 
+    $('audio').on("loadedmetadata", function () {
 
+        $(this).siblings('.controls').children('#audioTime').text(transTime(this.duration));
 
+        var span = $(this).siblings('.pgs').children('span')
 
+        if (!dot) {
 
+            while (span.width() < span.parents('.panel-body').width()) {
 
+                span.html(span.html() + '.')
 
+            }
 
+            dot = span.html().length
 
+        } else {
 
+            var s = ''
 
+            for (let i = 0; i < dot; i++)s += '.'
 
+            span.html(s)
 
+        }
 
+    });
 
+
 
+    $('.pgs span').click(function (e) {
 
+        var rate = (e.offsetX) / $(this).width();
 
+        audio = $(this).parents('div').children('audio')[0]
 
+        audio.currentTime = audio.duration * rate;
 
+        var value = Math.round((Math.floor(audio.currentTime) / Math.floor(audio.duration)) * dot, 0);
 
+        var s = '';
 
+        for (let i = 0; i < dot; i++)s += (i > value) ? '.' : '>'
 
+        $(audio).siblings('.pgs').children('span').html(s)
 
+        $(audio).siblings('.controls').children('.played-time').html(transTime(audio.currentTime));
 
+    });
 
+    window.onresize = resizeA
 
+})
 
+function resizeA() {
 
+    var span = $($('.pgs>span')[0])
 
+    span.html('')
 
+    while (span.width() < span.parents('.panel-body').width()) {
 
+        span.html(span.html() + '.')
 
+    }
 
+    dot = span.html().length
 
+    $('.pgs>span').html(span.html())
 
+}
 
+function transTime(time) {
 
+    var duration = parseInt(time);
 
+    var minute = parseInt(duration / 60);
 
+    var sec = duration % 60 + '';
 
+    var isM0 = ':';
 
+    if (minute == 0) minute = '00';
 
+    else if (minute < 10) minute = '0' + minute;
 
+    if (sec.length == 1) sec = '0' + sec;
 
+    return minute + isM0 + sec
 
+}
 
+
 
+function updateProgress(e) {
 
+    var value = (this.currentTime / this.duration) * dot;
 
+    var s = '';
 
+    for (let i = 0; i < dot; i++)s += (i >= value) ? '.' : '>'
 
+    $(this).siblings('.pgs').children('span').html(s)
 
+    $(this).siblings('.controls').children('.played-time').html(transTime(this.currentTime));
 
+}
 
+
 
+function audioEnded() {
 
+    this.currentTime = 0;
 
+    this.pause();
 
+    $(this).parents('div').children('.controls').children('button').children().removeClass('glyphicon-pause').addClass('glyphicon-play')
 
+}

+ 1 - 0
js/score.js
View File 

@@ -203,6 +203,7 @@ function getSe(id, force, force2) {
 
                 $('#singleDat').append('<br><span class="cover' + (i - 1) + '"></span><img src="http://36.112.23.77' + f.examUrl + 'page_' + i + '.jpg" onload="imageLoaded(' + (i - 1) + ')">')

                 $('img')[i - 1].style.width = '100%'

             }

+            if(!f.pageCount)$('#singleDat').append('<p>无答题卡数据</p>')

             datSe = f;

         });

     })

File diff suppressed because it is too large
+ 0 - 0
js/score.min.js


+ 18 - 1
log/index.html
View File 

@@ -89,6 +89,23 @@
 
         <h1>网站日志</h1>

     </div>

 

+    <h3 id="22.12.25">

+        2022.12.25

+        <small>fun/<a href="/fun/music">music</a></small>

+    </h3>

+    <p>把平时的一些很没劲的创作搬上来了。</p>

+    <p>说实话，让这个进度条又能点，又是响应式，又能放多个，还是挺费劲的。要是没有 <code>this</code> 这个令人极度舒适的特性，我估计一天之内调不好。</p>

+    <hr>

+

+    <h3 id="22.12.24">

+        2022.12.24

+        <small>minimalist</small>

+    </h3>

+    <p>把首页的一些东西塞到了二级页面里去，不仅看上去清爽多了，而且我同时也把根目录清理了一下，免得找不着文件在哪。</p>

+    <p>把 sans 小游戏的两个版本所用的资源进行了合并，节省了一些冗余空间（其实根本没有，git 都记录在那呢）。</p>

+    <p>还有一些无所谓的小改动。</p>

+    <hr>

+

     <h3 id="22.12.23">

         2022.12.23

         <small>git hooks</small>

@@ -105,7 +122,7 @@
 
     </h3>

     <p>让所有扣分点晃来晃去；多好玩。</p>

     <p>录入多人时增加了一个图表，让比较更直接。</p>

-    <p>修改了首页排版。</p>

+    <p>修改了首页排版，移除了过多的阴影。</p>

     <hr>

 

     <h3 id="22.12.20">

Some files were not shown because too many files changed in this diff