|
|
楼主 |
发表于 2022-11-11 07:33
|
显示全部楼层
本帖最后由 马黑黑 于 2022-11-11 07:38 编辑
本帖主要是试一下蒙古语歌词，做帖过程中发现一些问题：本论坛使用gbk编码，它对蒙古语不是非常支持，尤其是在在特殊处理的时候，若编码为 UTF-8，则会完美支持。
下面解释几个问题：
① 关于歌词同步
蒙古语不好编辑，通过伪元素实现的逐字同步模拟在gbk编码的论坛里也不好处理，所以去掉逐字同步模拟，只同步显示整句歌词。
② 关于八思巴文
帖子左边部分的符号是八思巴文字母，与歌词蒙语不是一个东东（但貌似有一丁点联系）。八思巴文是元朝时期，忽必烈为了统一文字，令元朝帝师、学者八思巴编制的文字，意欲取代汉字，但彻底失败，根本无法推广，仅在官方文件中短暂使用过，八思巴文故而是一门历史语言，像错版的钱币一样额外珍贵（保守估算，左边的符号每一个都约值10.65万刀）。
元，是一个绕不开的历史，八思巴文承载着诸多不堪。
③ 关于播放进度条
进度条使用HTML5标准的进度条标签 progress，它非常简单，最少只需一个属性便能做进度条（将在下楼演示下面的代码）：
<progress max="100"></progress>
max设置为100必须，进度量通常都是百分制的好。进度条还应该有 value 值，比如 value="10"，表示完成进度为百分之十。
④ 左侧符号布局的实现
用 span 标签装载每一个字符。首先，在CSS设定一下基本的 span 样式：
#papa > span {
position: absolute;
left: -240px;
width: 100%;
height: 100%;
font: bold 1em serif;
display: grid;
place-items: center;
}
其次，用 JS 生成 span 标签，细化 span 标签的样式，同时获取特殊符号，再追加到 papa 父框：
(function() {
let total = 65, rr = 200;
Array.from({length: total}).forEach((item,key) => {
item = document.createElement('span');
item.innerText = String.fromCharCode(43072 + Math.floor(Math.random() * 65));
item.style.cssText += `
color: hsla(${Math.random() * 360}, 100%, 50%, ${Math.random() * 0.5 + 0.3});
font-size: ${Math.ceil(Math.random() * 20) + 20}px;
transform: rotate(${Math.random() * 180}deg) translateY(${rr/total * key}px);
`;
papa.appendChild(item);
});
})(); |
评分
-
| 参与人数 1 | 威望 +30 |
金钱 +60 |
经验 +30 |
收起
理由
|
 加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
查看全部评分
|
发表于 2022-11-11 07:10
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2022-11-11 10:17
发表于 2022-11-11 10:50
发表于 2022-11-11 11:40
发表于 2022-11-11 19:32
