一个随机按钮的实例

---

作者信息

作者： secret_crazy_cat和一个很坏很坏的暹罗猫bm
点击按钮会随机出Level UX-1、Level UX-100、Level UX-2中的一个，概率均等。但是手机加载非常卡。你可以点开底栏查看源代码直接抄走，因为这不是个组件，只是提供html实例。

修改方法如下

概率

const targetNumber = 2;，这个是随机数要比较的值，此处为2
const randomNumber = Math.floor(Math.random() * 3)+1;，其中Math.floor(Math.random() * n)函数会生成0到n-1的随机整数。

取到随机数后和目标值比较，大于，触发第一段文字；等于，触发第二段文字；小于，触发第三段文字。

按钮的diy

<div style="text-align: center">
这句是第一句，原理是套一个看不见的div框来确定按钮位置。后面的center指的是按钮居中。right居右left居左。

<button id="compareButton" onclick="compareRandomNumber()" style="background: #000000; no-repeat; align: center; color: #222FFF; padding: 15px">随机文档</button>
这句是按钮本身的设计，background是背景色，也可以加网址填图片，参考我写的wiki语法补充，这里和DIV框的语法基本一致。color是文字颜色。padding是边距，在这里决定了按钮大小。align是按钮里面的字居中。中间的文字自然就是按钮的字。

<div id="greater-content" class="foldable-content">
这里是展开后文本所在的大div框，不要改id和class，需要改展开后的样子可以在后面加style="里面和div框一致，参考wiki语法补充"。不过两项之间用分号和空格隔开。

文本排版

<p>和</p>是最基础的文字排版，每次增加一组新的，都会自己换行。

<h1>和</h1>是较大或者较小的字体，可以修改后面的数字，大小与wiki标题大小相同，1就是一级标题2就是二级标题。

修改颜色的方式，这里使用同样看不见的div框，在大框里面套娃。如果不填其他参数，只在style后填color就可以修改这一行的文字颜色了。居中和居右也可以用类似的办法，加text-align并且修改成center或right就行。

超链接也可以用类似的方法增加，不过还是只能一次加一行了。