参考代码:
<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 分行,所以用它来连接两个函数运行后提供的返回信息。
|