|
|
请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
x
先分析一下实现思路：
一、大十字回文诗（红影作品）
二、字串处理
通过分析，可以考虑诗文的取字采用横竖方式，竖行取字时重复的“汗”字不要，得出一个字串：
轻衫浸汗热流倾凌威暑珠飘坠
然后将以上字串逐字拆分赋值给数组 strAr :
let strAr = '轻衫浸汗热流倾凌威暑珠飘坠'.split('');
这样，每一个字都有自己的下标，下面是单字和下标示意：
0|轻 1|衫 2|浸 3|汗 4|热 5|流 6|倾 7|凌 8|威 9|暑 10|珠 11|飘 12|坠
构建读法时，给出（诗句）读法数组就是用下标表示，比如第一种读法，左中上方向，[0,1,2,3,9,8,6,6]，最后一个字重复一次，以配合函数完好圈字；其他读法一词组建数组。
字串在帖子上的排列，单字下标除以 6 小于等于 1 时，是原作品横向排列的字，我们只需设置它们的左边值（left）即可，文字所在的span标签我们设置为60px*60px，所以横向的各个字的 left 值为 下标值*60 px；纵向的 top 值不好计算，我们可以给出一个数组，然后通过读取数组得到 后面六个字的top值：
[0,0,0,0,0,0,0,0,60,120,240,300,360]
前面七个字的top值无关紧要，我们不用到，随便填0或其他值；第八个字，即下标为 7 的“凌”字，top 是 0（最顶端），第九个字（下标是8）加60（60是对应于span的高度值）得60，第十个字（下表是9）加60得120，第十一个字要跳一个字（就是汗字）加两个60得240，后面剩下的两个字都加60后分别得300和360。
实现代码（注释说明，发布帖子前应去除注释以提升代码运行效能）：
<script>
//idx : 读法标识 step : 圈子标识 spans : 单字载体数组（即span标签数组）
let idx = 0, step = 0, spans = [];
//横、纵排列 纵向不要重复的汗字。字串拆分为单字并放入数组 strAr
let strAr = '轻衫浸汗热流倾凌威暑珠飘坠'.split(''),
//诗句读法数据(下标依据，末字重复一次)，可添加读法
sentences = [
[0,1,2,3,9,8,7,7],
[7,8,9,3,4,5,6,6],
[6,5,4,3,10,11,12,12],
[12,11,10,3,2,1,0,0],
],
ttAr = [0,0,0,0,0,0,0,0,60,120,240,300,360]; //纵向排列Top数据：前面7个随意填，未用到
let aud = new Audio(); //创建音频对象
//指定音频源
aud.src = 'https://music.163.com/song/media/outer/url?id=1818276770.mp3';
aud.loop = true; //音频重复播放
aud.autoplay = true; //音频自动播放
let num = (min, max) => Math.floor(Math.random() * (max-min+1)) + min; //在两个数间随机取整数
//大十字回文诗布局
for(let x in strAr) {
let ele = document.createElement('span'); //创建 span 标签
ele.className = 'txt'; //指定标签类名称 class="txt"
ele.innerText = strAr[x]; //从 strAr 数组中取单字
if(parseInt(x) / 6 <= 1) { //单字下标除以6若大于等于1 （前面七个字）
ele.style.left = (x * 60) + 'px'; // left值一次排列 0*60 至 6 * 60
} else { //不然的话
ele.style.left = '180px'; //left值通通为 180px（横向第四个字的left值）
ele.style.top = ttAr[x] + 'px'; //top值读取 ttAr 数组里的数据
}
mama.appendChild(ele); //id="mama"的div追加 span 标签
spans.push(ele); //把 span 标签加入到 spans 数组（以便将来变色、画圈操作之用）
}
txtColor(); //运行一次变色函数
txtCircle(); //运行一次画圈函数
mama.onclick = () => aud.paused ? aud.play() : aud.pause(); //音乐控制
//文本变色函数
function txtColor() {
for(let y of spans) { // 读取每一个 spans 标签数组的元素
y.style.color = 'snow'; //将所有的背景色设置为 snow（雪白）
y.style.border = 'none'; //把已画好的圈圈去除
}
//根据当前读法标识 idx 的值给诗句每一个字上色
for(let x of sentences[idx]) spans[x].style.color = `rgb(${num(0,255)},${num(0,255)},${num(0,255)})`;
sMsg.innerText = idx + 1; // 第几句诗句提示
}
//文本画圈函数：从 0 画到 7（末字是重复一次的）
function txtCircle() {
let x = sentences[idx][step]; //当前句（idx）第 step 个字
spans[x].style.border = '1px solid lightgreen'; //设置边框值
step ++; //步数自增
if(step > 7) { //步数自增大于7时
step = 0; //步数恢复到0
idx ++; //诗句标识自增
if(idx > sentences.length - 1) idx = 0; //诗句标识自增到大于总读法减1时 idx 恢复到 0
txtColor(); //调用变色函数（开始下一个诗句）
}
setTimeout(txtCircle, 1500); //定时器递归调用（从而循环往复）
}
</script>
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
 加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
 红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
 樵歌
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|
发表于 2022-7-31 23:46
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
辛苦了。还没整明白。
楼主
发表于 2022-8-1 12:22
