查看: 468|回复: 29

[活动] 【凡哥教程第二十二讲作业】单击变岁数,双击变色(学一点点JS(二)函数)

[复制链接]
发表于 2024-8-15 08:00 | 显示全部楼层 |阅读模式
本帖最后由 独钓雪 于 2024-8-15 18:02 编辑

双击背景变色,单击看小明几岁

评分

3

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-15 08:01 | 显示全部楼层
<style> #qsfg22 { width: 520px; height: 320px; border: 1px solid gray; padding: 12px; background: tan; font: bold 2.0em sans-serif; color: black; text-shadow: 1px 1px 2px #FFFFFf; } </style> <div id="qsfg22">双击背景变色,单击看小明几岁</div> <script> mhh = (max) => Math.floor(Math.random() * max); rndHue = () => `hsl(${mhh(361)}, ${mhh(101)}%, ${mhh(101)}%)`; qsfg22.ondblclick = () => qsfg22.textContent = qsfg22.style.background = rndHue();   nl = () => `小明今年 ${mhh(121)}岁`; qsfg22.onclick = () => qsfg22.textContent = nl(); qsfg22.ondblclick; </script>  

评分

2

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-15 08:04 | 显示全部楼层
@凡哥 老师来看看作业。二十二讲的函数,加了个小明岁数。
思路:
原意是单击,变背景,变岁数,文字不显颜色数据,只显岁数。不知道怎么完成同时操作,试了好长时间也不行。
最后只能分开,单击变岁数,双击变背景。

评分

1

查看全部评分

点评
回复

使用道具

发表于 2024-8-15 08:45 | 显示全部楼层
又来了一位代码高手,你们都太厉害啦
点评
回复

使用道具

发表于 2024-8-15 08:45 | 显示全部楼层
欣赏老师完美的作业
点评
回复

使用道具

发表于 2024-8-15 08:45 | 显示全部楼层
问好老师,谢谢你的精彩分享
点评
回复

使用道具

发表于 2024-8-15 08:45 | 显示全部楼层
祝老师学习愉快,周四快乐!
点评
回复

使用道具

发表于 2024-8-15 10:42 | 显示全部楼层
我来支持一个
点评
回复

使用道具

发表于 2024-8-15 12:20 | 显示全部楼层
独钓雪 发表于 2024-8-15 08:04 @凡哥 老师来看看作业。二十二讲的函数,加了个小明岁数。 思路: 原意是单击,变背景,变岁数,文字不显颜 ...

参考代码:

<style>
#qsfg22 {
    width: 520px;
    height: 320px;
    border: 1px solid gray;
    padding: 12px;
    background: tan;
    font: bold 2.0em sans-serif;
    color: black;
    text-shadow: 1px 1px 2px #FFFFFf;
    user-select: none;
}
</style>
 
<div id="qsfg22">双击背景变色,单击看小明几岁</div>
 
<script>
//向下取整随机函数
mhh = (max) => Math.floor(Math.random() * max);

//hsl颜色生成函数
rndHue = () => `hsl(${mhh(361)}, ${mhh(101)}%,  ${mhh(101)}%)`;

//随机年龄函数
nl = () => `小明今年 ${mhh(121)}岁`;

//按钮双击事件 :显示随机背景色+hsl颜色
qsfg22.ondblclick = () => qsfg22.innerText = qsfg22.style.background = rndHue();

//按钮单击事件 :显示随机背景色+hsl颜色+小明随机年龄
qsfg22.onclick = () => {
	qsfg22.style.background = rndHue();
	qsfg22.innerText = rndHue() + '\n' + nl();
}

qsfg22.ondblclick;
</script>

因为有双击操作,文本会被选择,所以CSS中加 urser-select 属性;因为要显示多行信息,需要换行,所以JS的 元素.textContent 改用 元素.innerText 。楼主的核心问题是如何显示两个信息,一是随机背景色信息,二是小明的随机年龄,并在此基础上随机改变背景颜色;因此,双击事件就变成了执行多任务,不是一行代码能写完,语句需要写在花括号里面。随机设置背景色单独一行;显示文本单独一行,将背景颜色和小明的随机年龄信息拼装成一个单元,两句话之间分行,元素.innerText 支持 \n 分行,所以用它来连接两个函数运行后提供的返回信息。

评分

1

查看全部评分

点评
回复

使用道具

 楼主| 发表于 2024-8-15 12:49 | 显示全部楼层
凡哥 发表于 2024-8-15 12:20
参考代码:

&lt;style&gt;

就是这样的效果。。
我想说单击只显一种文字,是觉得不同文字会叠在一起,
原来可以+ '\n'分行。真是乐得抓耳挠腮的。。
哈哈太合我意了
点评
回复

使用道具

您需要登录后才可以回帖 登录 | 中文注册

本版积分规则

手机版|千山论坛 ( 冀ICP备2024055714号 )

GMT+8, 2025-6-11 00:54

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表