网站鸡肋代码合集

最后更新时间:2022-09-26



GitHub日历

展示

kaibazhidao66's Blue Github Chart

代码

1
<img src="https://ghchart.rshah.org/409ba5/kaibazhidao66" alt="kaibazhidao66's Blue Github Chart" width="100%" />

暗黑插件

展示

演示页面

代码

点击展开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.5/lib/darkmode-js.min.js"></script>
<script>
// 这些是这个插件的可配置项:
var options = {
bottom: '32px', // 定位底部距离 - 默认: '32px'
right: '32px', // 定位右边距离 - 默认: '32px'
left: 'unset', // 定位左边距离 - 默认: 'unset'
time: '0.5s', // 默认动画时间: '0.3s'
mixColor: '#fff', // 需要改变的颜色 - 默认: '#fff'
backgroundColor: '#fff', // 背景颜色 - 默认: '#fff'
buttonColorDark: '#262728', // 黑暗模式下按钮颜色 - 默认: '#100f2c'
buttonColorLight: '#fff', // 日间模式下按钮颜色 - 默认: '#fff'
saveInCookies: true, // 是否在cookie保存当前模式 - 默认: true,
label: '🌓', // 切换模式按钮图标 - 默认: ''
autoMatchOsTheme: true, // 是否自动根据系统适应模式 - 默认: true
}

let darkmode = new Darkmode(options)
darkmode.showWidget()
</script>

音乐特效

展示

演示页面

代码

点击展开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<button id="button">请用鼠标经过我</button>
<script>
window.AudioContext = window.AudioContext || window.webkitAudioContext;
(function () {
if (!window.AudioContext) {
alert('当前浏览器不支持Web Audio API');
return;
}
// 按钮元素
var eleButton = document.getElementById('button');
// 创建新的音频上下文接口
var audioCtx = new AudioContext();
// 发出的声音频率数据,表现为音调的高低
var arrFrequency = "880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 659 698 659 698 1046 659 1046 1046 1046 987 698 698 987 987 880 987 1046 987 1046 1318 987 659 659 880 784 880 1046 784 659 698 1046 987 1046 1174 1174 1174 1046 1046 880 987 784 880 1046 1174 1318 1174 1318 1567 1046 987 1046 1318 1318 1174 784 784 880 1046 987 1174 1046 784 784 1396 1318 1174 659 1318 1046 1318 1760 1567 1567 1318 1174 1046 1046 1174 1046 1174 1567 1318 1318 1760 1567 1318 1174 1046 1046 1174 1046 1174 987 880 880 987 880".split(" ");
// 音调依次递增或者递减处理需要的参数
var start = 0, direction = 1;
// 鼠标hover我们的按钮的时候
eleButton.addEventListener('mouseenter', function () {
// 当前频率
var frequency = arrFrequency[start];
// 如果到头,改变音调的变化规则(增减切换)
if (!frequency) {
direction = -1 * direction;
start = start + 2 * direction;
frequency = arrFrequency[start];
}
// 改变索引,下一次hover时候使用
start = start + direction;
// 创建一个OscillatorNode, 它表示一个周期性波形(振荡),基本上来说创造了一个音调
var oscillator = audioCtx.createOscillator();
// 创建一个GainNode,它可以控制音频的总音量
var gainNode = audioCtx.createGain();
// 把音量,音调和终节点进行关联
oscillator.connect(gainNode);
// audioCtx.destination返回AudioDestinationNode对象,表示当前audio context中所有节点的最终节点,一般表示音频渲染设备
gainNode.connect(audioCtx.destination);
// 指定音调的类型,其他还有square|triangle|sawtooth
oscillator.type = 'sine';
// 设置当前播放声音的频率,也就是最终播放声音的调调
oscillator.frequency.value = frequency;
// 当前时间设置音量为0
gainNode.gain.setValueAtTime(0, audioCtx.currentTime);
// 0.01秒后音量为1
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);
// 音调从当前时间开始播放
oscillator.start(audioCtx.currentTime);
// 1秒内声音慢慢降低,是个不错的停止声音的方法
gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 1);
// 1秒后完全停止声音
oscillator.stop(audioCtx.currentTime + 1);
});
})();
</script>

Live2D模型

展示

演示页面

代码

点击展开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({
"model": {
jsonPath: "https://unpkg.com/live2d-widget-model-hijiki/assets/hijiki.model.json",<!--这里改模型,前面后面都要改-->
"scale": 1
},
"display": {
"position": "left",<!--设置上下左右位置-->
"width": 100,
"height": 200,
"hOffset": 0,
"vOffset": 0
},
"mobile": {
"show": true,
"scale": 0.5
},
"react": {
"opacityDefault": 0.7,<!--设置透明度-->
"opacityOnHover": 0.2
}
});
window.onload = function(){
$("#live2dcanvas").attr("style","position: fixed; opacity: 0.7; left: 70px; bottom: 0px; z-index: 1; pointer-events: none;")
}
</script>

更多模型请在 这里 查看.

念两句诗

展示

念两句诗

挑选中...

代码

点击展开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<style>
.poem-wrap {
position: relative;
width: 730px;
max-width: 80%;
border: 2px solid #797979;
border-top: none;
text-align: center;
margin: 80px auto;
}
.poem-wrap h1 {
position: relative;
margin-top: -20px;
display: inline-block;
letter-spacing: 4px;
color: #797979
}
.poem-wrap p {
width: 70%;
margin: auto;
line-height: 30px;
color: #797979;
}
.poem-wrap p#poem {
font-size: 25px;
}
.poem-wrap p#info {
font-size: 15px;
margin: 15px auto;
}
.poem-border {
position: absolute;
height: 2px;
width: 27%;
background-color: #797979;
}
.poem-right {
right: 0;
}
.poem-left {
left: 0;
}
@media (max-width: 685px) {
.poem-border {
width: 18%;
}
}
@media (max-width: 500px) {
.poem-wrap {
margin-top: 60px;
margin-bottom: 20px;
border-top: 2px solid #797979;
}
.poem-wrap h1 {
margin: 20px 6px;
}
.poem-border {
display: none;
}
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<div class="poem-wrap">
<div class="poem-border poem-left"></div>
<div class="poem-border poem-right"></div>
<h1>念两句诗</h1>
<p id="poem">挑选中...</p>
<p id="info">
</div>
<script>
if ($("div").hasClass("poem-wrap")) {
get_poem('#poem', '#info')
}
function get_poem(poem_ele, info_ele) {
var poem = document.querySelector(poem_ele);
var info = document.querySelector(info_ele);
var xhr = new XMLHttpRequest();
xhr.open('get', 'https://v2.jinrishici.com/one.json');
xhr.withCredentials = true;
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
var data = JSON.parse(xhr.responseText);
poem.innerHTML = data.data.content;
info.innerHTML = '【' + data.data.origin.dynasty + '】' + data.data.origin.author + '《' + data.data.origin.title + '》';
}
};
xhr.send();
}
</script>


---------- 本文结束 感谢阅读 ----------

版权声明

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 协议 ,转载请注明出处!


网站鸡肋代码合集
https://blog.xukaiyyds.cn/posts/69d40d71/
作者
xukai
发布于
2022年5月14日
更新于
2022年9月26日
许可协议