随机生成名字换一换

Html

Css

* {
	margin:0;
	padding:0
}
div {
	width:600px;
	margin:200px auto;
	padding:1rem;
	border:1px solid red;
	text-align:center
}
ul {
	list-style:none;
	width:100%;
	overflow:hidden;
	display:none
}
ul:first-of-type {
	display:block
}
ul li {
	width:20%;
	float:left;
	text-align:center;
	margin:.5rem 2.5%;
	padding:.5rem 0;
	border-radius:4px
}

$(function() {
    var bac = ["#b1181a", "#ff7375", "#a8e8ff", "#f2a8ff", "#f5b879"];
    var color = ["black", "white"];
    var content = ["二狗子", "三胖子", "四大子", "五顺子", "刘哈子", "七跛子", "八娃子", "九九子", "大乌龟"];
    for (var i = 0; i < 8; i++) {
        var cot = content[Math.floor(Math.random() * 9)];
        var li = "<li>" + cot + "</li>";
        $("ul").append(li);
    }
    $("ul li").each(function() {
        $(this).css({
            "background-color": bac[Math.floor(Math.random() * 5)],
            "color": color[Math.floor(Math.random() * 2)]
        })
    });

$("button").click(function() {
        $("ul").empty();
        for (var i = 0; i < 8; i++) {
            var cot = content[Math.floor(Math.random() * 9)];
            var li = "<li>" + cot + "</li>";
            $("ul").append(li);
        }
        $("ul li").each(function() {
            $(this).css({
                "background-color": bac[Math.floor(Math.random() * 5)],
                "color": color[Math.floor(Math.random() * 2)]
            })
        });
    })
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

随机生成名字换一换



代码描述：可以请求服务器数据随机生成

变变变懂得越多不会的也就越多

2

最新

发表评论全部评论

暂时没有评论！

Time Machine0

2018/11/4 0:38:59

可以试着将汉子解码然后随机生成解码的汉字放入content中效果可能会更好
回复

yEs、先生0

2018/11/2 15:52:56

管顿饭过的过的

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

黄大雄

相关代码

随机生成名字换一换

最新