我的分割线啊

<hr style="border:3 double #987cb9" width="280%" color="red" size="3" id="hrline" onclick="var a=Math.floor(Math.random()*10); switch(a){case 1:case 2:case 3:document.getElementById('hrline').color='red';break;case 4:case 5:case 6:document.getElementById('hrline').color='blue';break;case 7:case 8:case 9:case 0:document.getElementById('hrline').color='green';break;}">

啊，我完美的分割线啊。。。
效果：分割线
试着点一下吧！
我们的流程图

代码设计过程：

1. 创建分割线

<hr id="hrline">

2. style设置

hr:
{
color:#987cb9;
border:3 double;
}

3. 设置js

function a()
{
var v;
//随机数
v=Math.floor(Math.random()*10)
//根据随机数变色
switch(v)
{
case 1:case 2:case 3:document.getElementById('hrline').color='red';
case 4:case 5:case 6:document.getElementById('hrline').color='blue';
case 7:case 8:case 9:case 10:document.getElementById('hrline').color='green';
}
}

4.接着加onclick

<hr id="hrline" onclick='a()'>

（关于随机数的介绍请见菜鸟教程-随机数，这里就不再介绍了）
最后，浓缩就变成了

<hr style="border:3 double #987cb9" width="280%" color="red" size="3" id="hrline" onclick="var a=Math.floor(Math.random()*10); switch(a){case 1:case 2:case 3:document.getElementById('hrline').color='red';break;case 4:case 5:case 6:document.getElementById('hrline').color='blue';break;case 7:case 8:case 9:case 0:document.getElementById('hrline').color='green';break;}">

这样看方便一点

<hr style="border:3 double #987cb9"
width="280%"
color="red"
size="3"
id="hrline"
onclick="var a=Math.floor(Math.random()*10);
switch(a){case 1:case 2:case 3:
document.getElementById('hrline').color='red';
break;
case 4:case 5:case 6:
document.getElementById('hrline').color='blue';
break;
case 7:case 8:case 9:case 0:document.getElementById('hrline').color='green';
break;
}
">

你可以修改的
width="280%"¹
color="red"²
size="3"³

完

---

1. 将此参数修改，会改变他的长度 ↩︎

2. 当然是 颜色 啦 ↩︎

3. 粗细。笔者差点调到20000，结果是：
   ↩︎