【凡哥教程第二十二讲作业】单击变岁数，双击变色（学一点点JS（二）函数）

独钓雪

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

独钓雪

<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>  

独钓雪

@凡哥 老师来看看作业。二十二讲的函数，加了个小明岁数。
思路：
原意是单击，变背景，变岁数，文字不显颜色数据，只显岁数。不知道怎么完成同时操作，试了好长时间也不行。
最后只能分开，单击变岁数，双击变背景。

清梦

又来了一位代码高手，你们都太厉害啦

清梦

欣赏老师完美的作业

清梦

问好老师，谢谢你的精彩分享

清梦

祝老师学习愉快，周四快乐！

花简静

我来支持一个

凡哥

独钓雪 发表于 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 分行，所以用它来连接两个函数运行后提供的返回信息。

独钓雪

凡哥 发表于 2024-8-15 12:20
参考代码：

&lt;style&gt;

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