随机生成姓名的静态网页~~太好玩了，我决定分享一下

qq_44926152
已于 2023-11-09 18:21:45 修改
阅读量285
点赞数 1
文章标签： js css3
于 2023-11-09 18:08:16 首次发布
本文链接：https://blog.csdn.net/qq_44926152/article/details/134317731
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成姓名</title>
</head>
<body>

    <h1 id="chineseName"></h1>
    <input type="text" style="width: 60px;height: 30px;" placeholder="指定姓氏" id = "firstName">
    <button onclick="getName()">生成</button>
    <script>
        getName();
        function random(bound) {
           return Math.round(bound * Math.random(bound));
        }

        function getName() {
            var firstNames = "赵钱孙李周吴郑王冯陈褚卫蒋沈韩杨朱秦尤许何吕施张孔曹严华金魏陶姜戚谢邹喻柏水窦章云苏潘葛奚范彭郎鲁韦昌马苗凤花方俞任袁柳酆鲍史唐费廉岑薛雷贺倪汤滕殷罗毕郝邬安常乐于时傅皮卞齐康伍余元卜顾孟平黄和穆萧尹姚邵湛汪祁毛禹狄米贝明臧计伏成戴谈宋茅庞熊纪舒屈项祝董梁杜阮蓝闵席季麻强贾路娄危江童颜郭梅盛林刁钟徐邱骆高夏蔡田樊胡凌霍虞万支柯昝管卢莫经房裘缪干解应宗丁宣贲邓郁单杭洪包诸左石崔吉钮龚程嵇邢滑裴陆荣翁荀羊於惠甄曲家封芮羿储靳汲邴糜松井段富巫乌焦巴弓牧隗山谷车侯宓蓬全郗班仰秋仲伊宫宁仇栾暴甘钭厉戎祖武符刘景詹束龙叶幸司韶郜黎蓟薄印宿白怀蒲邰从鄂索咸籍赖卓蔺屠蒙池乔阴郁胥能苍双闻莘党翟谭贡劳逄姬申扶堵冉宰郦雍却璩桑桂濮牛寿通边扈燕冀郏浦尚农温别庄晏柴瞿阎充慕连茹习宦艾鱼容向古易慎戈廖庾终暨居衡步都耿满弘匡国文寇广禄阙东欧殳沃利蔚越夔隆师巩厍聂晁勾敖融冷訾辛阚那简饶空曾毋沙乜养鞠须丰巢关蒯相查后荆红游竺权逯盖益桓公万俟司马上官欧阳夏侯诸葛闻人东方赫连皇甫尉迟公羊澹台公冶宗政濮阳淳于单于太叔申屠公孙仲孙轩辕令狐钟离宇文长孙慕容鲜于闾丘司徒司空亓官司寇仉督子车颛孙端木巫马公西漆雕乐正壤驷公良拓跋夹谷宰父谷梁晋楚闫法汝鄢涂钦段干百里东郭南门呼延归海羊舌微生岳帅缑亢况后有琴梁丘左丘东门西门商牟佘佴伯赏南宫墨哈谯笪年爱阳佟";
            var lastNames = "春晓唐孟浩然春眠不觉晓处处闻啼鸟夜来风雨声花落知多少鹿柴唐王维空山不见人但闻人语响返景入深林复照青苔上相思唐王维红豆生南国春来发几枝愿君多采撷此物最相思杂诗唐王维君自故乡来应知故乡事来日绮窗前寒梅著花未终南望余雪唐祖咏终南阴岭秀积雪浮云端林表明霁色城中增暮寒静夜思唐李白床前明月光疑是地上霜举头望明月低头思故乡登鹳雀楼唐王之涣白日依山尽黄河入海流欲穷千里目更上一层楼江雪唐柳宗元千山鸟飞绝万径人踪灭孤舟蓑笠翁独钓寒江雪登乐游原唐李商隐向晚意不适驱车登古原夕阳无限好只是近黄昏听弹琴唐刘长卿泠泠七弦上静听松风寒古调虽自爱今人多不弹八阵图唐杜甫功盖三分国名成八阵图江流石不转遗恨失吞吴赋得古原草送别唐白居易离离原上草一岁一枯荣野火烧不尽春风吹又生远芳侵古道晴翠接荒城又送王孙去萋萋满别情游子吟唐孟郊慈母手中线游子身上衣临行密密缝意恐迟迟归谁言寸草心报得三春晖关山月唐李白明月出天山苍茫云海间长风几万里吹度玉门关望月怀远唐张九龄海上生明月天涯共此时情人怨遥夜竟夕起相思送杜少府之任蜀州唐王勃城阙辅三秦风烟望五津与君离别意同是宦游人海内存知己天涯若比邻无为在岐路儿女共沾巾春望唐杜甫国破山河在城春草木深感时花溅泪恨别鸟惊心烽火连三月家书抵万金白头搔更短浑欲不胜簪登岳阳楼唐杜甫昔闻洞庭水今上岳阳楼吴楚东南坼乾坤日夜浮终南别业唐王维中岁颇好道晚家南山陲兴来每独往胜事空自知凉州词唐王翰葡萄美酒夜光杯欲饮琵琶马上催醉卧沙场君莫笑古来征战几人回望庐山瀑布唐李白日照香炉生紫烟遥看瀑布挂前川飞流直下三千尺疑是银河落九天送孟浩然之广陵唐李白故人西辞黄鹤楼烟花三月下扬州孤帆远影碧空尽惟见长江天际流早发白帝城唐李白朝辞白帝彩云间千里江陵一日还两岸猿声啼不住轻舟已过万重山枫桥夜泊唐张继月落乌啼霜满天江枫渔火对愁眠姑苏城外寒山寺夜半钟声到客船乌衣巷唐刘禹锡朱雀桥边野草花乌衣巷口夕阳斜旧时王谢堂前燕飞入寻常百姓家送元二使安西唐王维渭城朝雨浥轻尘客舍青青柳色新劝君更尽一杯酒西出阳关无故人出塞唐王昌龄秦时明月汉时关万里长征人未还但使龙城飞将在不教胡马渡阴山凉州词唐王之涣黄河远上白云间一片孤城万仞山羌笛何须怨杨柳春风不度玉门关咏柳唐贺知章碧玉妆成一树高万条垂下绿丝绦不知细叶谁裁出二月春风似剪刀黄鹤楼唐崔颢昔人已乘黄鹤去此地空余黄鹤楼黄鹤一去不复返白云千载空悠悠晴川历历汉阳树芳草萋萋鹦鹉洲日暮乡关何处是烟波江上使人愁江畔独步寻花唐杜甫黄四娘家花满蹊千朵万朵压枝低留连戏蝶时时舞自在娇莺恰恰啼清明唐杜牧清明时节雨纷纷路上行人欲断魂借问酒家何处有牧童遥指杏花村山行唐杜牧远上寒山石径斜白云生处有人家停车坐爱枫林晚霜叶红于二月花题都城南庄唐崔护去年今日此门中人面桃花相映红人面不知何处去桃花依旧笑春风登幽州台歌陈子昂前不见古人后不见来者念天地之悠悠独怆然而剃下悯农二唐李绅锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦古郎月行唐李白小时不识月呼作金玉盘又疑瑶台镜飞在碧云端山中送别唐王维山中相送罢日暮掩柴扉春草明年绿王孙归不归独坐敬亭山唐李白众鸟高飞尽孤云独去闲相看两不厌只有敬亭山马诗唐李贺大漠沙如雪燕山月似钩何当金络脑快走踏清秋蒙学诗佚名一去二三里烟村四五家亭台六七座八九十枝花春夜喜雨唐杜甫好雨知时节当春乃发生随风潜入夜润物细无声越女词唐李白耶溪采莲女见客棹歌回笑入荷花去佯羞不出来夜宿山寺唐李白危楼高百尺手可摘星辰不敢高声语恐惊天上人池上唐白居易小娃撑小艇偷采白莲回不解藏踪迹浮萍一道开宿建德江唐孟浩然移舟泊烟渚日暮客愁新野旷天低树江清月近人逢雪宿芙蓉山主人唐刘长卿日暮苍山远天寒白屋贫柴门闻犬吠风雪夜归人寻隐者不遇唐贾岛松下问童子言师采药去只在此山中云深不知处明日歌唐文嘉明日复明日明日何其多我生待明日万事成蹉跎江南逢李龟年唐岐王宅里寻常见崔九堂前几度闻正是江南好风景落花时节又逢君赠汪伦唐李白李白乘舟将欲行忽闻岸上踏歌声桃花潭水深千尺不及汪伦送我情望天门山唐李白天门中断楚江开碧水东流至此回两岸青山相对出孤帆一片日边来客中行唐李白兰陵美酒郁金香玉碗盛来琥珀光但使主人能醉客不知何处是他乡军行唐李白骝马新跨白玉鞍战罢沙场月色寒城头铁鼓声犹震匣里金刀血未干与史中郎钦听黄鹤楼上吹笛唐李白一为迁客去长沙西望长安不见家黄鹤楼中吹玉笛江城五月落梅花春夜洛城闻笛唐李白谁家玉笛暗飞声散入春风满洛城此夜曲中闻折柳何人不起故园情桂殿秋唐李白仙女下董双成汉殿夜凉吹玉笙曲终却从仙宫去万户千门惟月明结袜子唐李白燕南壮士吴门豪筑中置铅鱼隐刀感君恩重许君命太山一掷轻鸿毛洛阳陌唐李白白玉谁家郎回车渡天津看花东陌上惊动洛阳人感遇·其一唐张九龄兰叶春葳蕤桂华秋皎洁欣欣此生意自尔为佳节感遇·其二唐张九龄江南有丹桔经冬犹绿林岂伊地气暖自有岁寒心春思唐李白燕草如碧丝秦桑低绿枝当君怀归日是妾断肠时江南唐汉乐府江南可采莲莲叶何田田鱼戏莲叶间鱼戏莲叶东鱼戏莲叶西鱼戏莲叶南鱼戏莲叶北敕勒歌唐北朝民歌敕勒川阴山下天似穹庐笼盖四野天苍苍野茫茫风吹草低见牛羊风唐李峤解落三秋叶能开二月花过江千尺浪入竹万竿斜竹里馆唐王维独坐幽篁里弹琴复长啸深林人不知明月来相照送崔九唐裴迪归山深浅去须尽丘壑美莫学武陵人暂游桃源里怨情唐李白美人卷珠帘深坐蹙蛾眉但见泪痕湿不知心恨谁送灵澈唐刘长卿苍苍竹林寺杳杳钟声晚荷笠带斜阳青山独归远送上人唐刘长卿孤云将野鹤岂向人间住莫买沃洲山时人已知处秋夜寄邱员外唐韦应物怀君属秋夜散步咏凉天空山松子落幽人应未眠听筝唐李端鸣筝金粟柱素手玉房前欲得周郎顾时时误拂弦新嫁娘唐王建三日入厨下洗手作羹汤未谙姑食性先遣小姑尝玉台体唐权德舆昨夜裙带解今朝虫喜子飞铅华不可弃莫是藁砧归行宫唐元稹寥落古行宫宫花寂寞红白头宫女在闲坐说玄宗问刘十九唐白居易绿蚁新醅酒红泥小火炉晚来天欲雪能饮一杯无何满子唐张祜故国三千里深宫二十年一声何满子双泪落君前渡汉江唐李频岭外音书绝经冬复立春近乡情更怯不敢问来人春怨唐金昌绪打起黄莺儿莫教枝上啼啼时惊妾梦不得到辽西哥舒歌唐西鄙人北斗七星高哥舒夜带刀至今窥牧马不敢过临洮长干行二首之一唐崔颢君家何处住妾住在横塘停船暂借问或恐是同乡长干行二首之二唐崔颢家临九江水来去九江侧同是长干人生小不相识玉阶怨唐李白玉阶生白露夜久侵罗袜却下水晶帘玲珑望秋月塞下曲四首之一唐卢纶鹫翎金仆姑燕尾绣蝥弧独立扬新令千营共一呼塞下曲四首之二唐卢纶林暗草惊风将军夜引弓平明寻白羽没在石棱中塞下曲四首之三唐卢纶月黑雁飞高单于夜遁逃欲将轻骑逐大雪满弓刀塞下曲四首之四唐卢纶野幕蔽琼筵羌戎贺劳旋醉和金甲舞雷鼓动山川江南曲唐李益嫁得瞿塘贾朝朝误妾期早知潮有信嫁与弄潮儿回乡偶书唐贺知章少小离家老大回乡音无改鬓毛衰儿童相见不相识笑问客从何处来桃花溪唐张旭隐隐飞桥隔野烟石矶西畔问渔船桃花尽日随流水洞在清溪何处边九月九日忆山东兄弟唐王维独在异乡为异客每逢佳节倍思亲遥知兄弟登高处遍插茱萸少一人芙蓉楼送辛渐唐王昌龄寒雨连江夜入吴平明送客楚山孤洛阳亲友如相问一片冰心在玉壶闺怨唐王昌龄闺中少妇不知愁春日凝妆上翠楼忽见陌头杨柳色悔教夫婿觅封侯春宫曲唐王昌龄昨夜风开露井桃未央前殿月轮高平阳歌舞新承宠帘外春寒赐锦袍逢入京使唐岑参故园东望路漫漫双袖龙钟泪不干马上相逢无纸笔凭君传语报平安江南逢李龟年唐杜甫岐王宅里寻常见崔九堂前几度闻正是江南好风景落花时节又逢君滁州西涧唐韦应物独怜幽草涧边生上有黄鹂深树鸣春潮带雨晚来急野渡无人舟自横寒食唐韩□春城无处不飞花寒食东风御柳斜日暮汉宫传蜡烛轻烟散入五侯家月夜唐刘方平更深月色半人家北斗阑干南斗斜今夜偏知春气暖虫声新透绿窗纱春怨唐刘方平纱窗日落渐黄昏金屋无人见泪痕寂寞空庭春欲晚梨花满地不开门征人怨柳中庸岁岁金河复玉关朝朝马策与刀环三春白雪归青冢万里黄河绕黑山宫词顾况玉楼天半起笙歌风送宫嫔笑语和月殿影开闻夜漏水晶帘卷近秋河夜上受降城闻笛边塞李益回乐峰前沙似雪受降城外月如霜不知何处吹芦管一夜征人尽望乡春词刘禹锡新妆宜面下朱楼深锁春光一院愁行到中庭数花朵蜻蜓飞上玉搔头后宫词白居易泪湿罗巾梦不成夜深前殿按歌声红颜未老恩先断斜倚薰笼坐到明赠内人张祜禁门宫树月痕过媚眼惟看宿鹭窠斜拔玉钗灯影畔剔开红焰救飞蛾集灵台二首之一张祜日光斜照集灵台红树花迎晓露开昨夜上皇新授□“录”加竹头太真含笑入帘来集灵台二首之二张祜虢国夫人承主恩平明骑马入宫门却嫌脂粉污颜色淡扫蛾眉朝至尊题金陵渡张祜金陵津渡小山楼一宿行人自可愁潮落夜江斜月里两三星火是瓜州宫词朱庆馀寂寂花时闭院门美人相并立琼轩含情欲说宫中事鹦鹉前头不敢言近试上张水部朱庆馀洞房昨夜停红烛待晓堂前拜舅姑妆罢低声问夫婿画眉深浅入时无将赴吴兴登乐游原杜牧清时有味是无能闲爱孤云静爱僧欲把一麾江海去乐游原上望昭陵赤壁杜牧折戟沈沙铁未销自将磨洗认前朝东风不与周郎便铜雀春深销二乔泊秦淮杜牧烟笼寒水月笼沙夜泊秦淮近酒家商女不知亡国恨隔江犹唱后庭花唐寄扬州韩绰判官杜牧青山隐隐水迢迢秋尽江南草未凋二十四桥明月夜玉人何处教吹箫遣怀杜牧落魄江湖载酒行楚腰纤细掌中轻十年一觉扬州梦赢得青楼薄幸名秋夕杜牧银烛秋光冷画屏轻罗小扇扑流萤天阶夜色凉如水坐看牵牛织女星赠别二首之一杜牧娉娉袅袅十三馀豆蔻梢头二月初春风十里扬州路卷上珠帘总不如赠别二首之二杜牧多情却似总无情唯觉樽前笑不成蜡烛有心还惜别替人垂泪到天明金谷园杜牧繁华事散逐香尘流水无情草自春日暮东风怨啼鸟落花犹似坠楼人夜雨寄北李商隐君问归期未有期巴山夜雨涨秋池何当共剪西窗烛却话巴山夜雨时寄令狐郎中李商隐嵩云秦树久离居双鲤迢迢一纸笔休问梁园旧宾客茂陵秋雨病相如为有李商隐为有云屏无限娇凤城寒尽怕春宵无端嫁得金龟婿辜负香衾事早朝隋宫李商隐乘兴南游不戒严九重谁省谏书函春风举国裁宫锦半作障泥半作帆瑶池李商隐瑶池阿母绮窗开黄竹歌声动地哀八骏日行三万里穆王何事不重来嫦娥李商隐云母屏风烛影深长河渐落晓星沈嫦娥应悔偷灵药碧海青天夜夜心贾生李商隐宣室求贤访逐臣贾生才调更无伦可怜夜半虚前席不问苍生问鬼神瑶瑟怨温庭筠冰簟银床梦不成碧天如水夜云轻雁声远过潇湘去十二楼中月自明马嵬坡郑畋玄宗回马杨妃死云雨难忘日月新终是圣明天子事景阳宫井又何人已凉韩□碧阑干外绣帘垂猩色屏风画折枝八尺龙须方锦褥已凉天气未寒时金陵图韦庄江雨霏霏江草齐六朝如梦鸟空啼无情最是台城柳依旧烟笼十里堤陇西行陈陶誓扫匈奴不顾身五千貂锦丧胡尘可怜无定河边骨犹是深闺梦里人寄人张泌别梦依依到谢家小廊回合曲阑斜多情只有春庭月犹为离人照落花杂诗无名氏尽寒食雨草萋萋著麦苗风柳映堤等是有家归未得杜鹃休向耳边啼秋夜曲王维桂魄初生秋露微轻罗已薄未更衣银筝夜久殷勤弄心怯空房不忍归长信怨王昌龄奉帚平明金殿开且将团扇共徘徊玉颜不及寒鸦色犹带昭阳日影来清平调三首之一李白云想衣裳花想容春风拂槛露华浓若非群玉山头见会向瑶台月下逢清平调三首之二李白一枝红艳露凝香云雨巫山枉断肠借问汉宫谁得似可怜飞燕倚新妆清平调三首之三李白名花倾国两相欢常得君王带笑看解释春风无限恨沈香亭北倚阑干金缕衣杜秋娘劝君莫惜金缕衣劝君惜取少年时花开堪折直须折莫待无花空折枝";
            var doc = document.getElementById("chineseName");
            var firstName=document.getElementById("firstName");
            if(firstName.value){
                doc.innerText = firstName.value + lastNames[random(firstNames.length)] + lastNames[random(firstNames.length)];
            } else {
                doc.innerText = firstNames[random(firstNames.length)] + lastNames[random(firstNames.length)] + lastNames[random(firstNames.length)];
            }
        }
    </script>
</body>
</html>