2024年10月clock.min.js（用JS写一个钟表）

　　⑴clock.min.js（用JS写一个钟表

　　⑵每毫秒刷新一次????????//模拟时钟代码????????function?buidlPointArea(num)?{//将数字对应的点阵拼接成图案????????????var?code?=?"《div?class=’singleNumber’》";????????????for?(var?i?=?;?i?《?;?i++)?{????????????????for?(var?j?=?;?j?《?;?j++)?{????????????????????code?+=?createSinglePoint(i?+?"_"?+?j,?num);????????????????}????????????}????????????code?+=?"《/div》";????????????return?code;????????}????????function?createSinglePoint(id,?num)?{//数字对应的黑点????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");//数字的点阵,用buildPointArea()函数生成????????????????}????????????}????????????return?finalCode;????????}????????function?updateLatestTime()?{//更新剩余时间????????????var?setHour?=?document.getElementById("sltHour").value;//获取选择的小时值????????????var?setMin?=?document.getElementById("sltMin").value;//获取选择的分值????????????var?setSecond?=?document.getElementById("sltSecond").value;//获取选择的秒值????????????var?time?=?new?Date();//获取系统时间????????????var?nowHour?=?time.getHours();//当前时间小时值????????????var?nowMin?=?time.getMinutes();//当前时间分值????????????var?nowSecond?=?time.getSeconds();//当前时间秒值????????????var?viewHour?=?setHour?-?nowHour;//剩余小时????????????var?viewMin?=?setMin?-?nowMin;//剩余分钟????????????var?viewSecond?=?setSecond?-?nowSecond;//剩余秒????????????if?(viewSecond?《?)?{//剩余秒小于时,是一种动态类型、弱类型、基于原型的语言,小于时在数字前添加????????????if?(num?《?)?{????????????????return?""?+?num;????????????}????????????else?{????????????????return?num;????????????}????????}????????function?formatChinese(num)?{//中文格式处理????????????var?str?=?String(num);????????????if?(str.length?==?)?{//一位数的情况,借位????????????????viewMin?+=?;????????????????viewHour?-=?;????????????}????????????if?(viewHour?《?)?{//剩余小时小于时,借位????????????????viewHour?+=?;????????????}????????????document.getElementById("divLatestTime").innerHTML?=?"剩余时间为："?+?viewHour?+?"时"?+?viewMin?+?"分"?+?viewSecond?+?"秒";//填充????????????if?(viewHour?==??&&?viewMin?==??&&?viewSecond?==?)?{//到点提示????????????????alert("到点了,下同????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?numArr?=?new?Array();????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????var?cls?=?"whitePoint";????????????for?(var?i?=?;?i?《?numArr.length;?i++)?{????????????????if?(id?==?numArr)?{????????????????????cls?=?"blackPoint";????????????????}????????????}????????????return?"《div?id=’"?+?id?+?"’?class=’"?+?cls?+?"’》《/div》";????????}????????function?blockEmpty()?{//空格代码????????????return?"《div?class=’singleNumber’》《/div》";????????}????????function?blockM()?{//冒号的代码????????????var?code?=?"";????????????code?+=?"《div?class=’singleNumber’》《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’blackPoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’blackPoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》《/div》";????????????return?code;????????}????????function?makeMonCode(totalCode)?{//生成模拟的数字时钟代码????????????var?finalCode?=?"";????????????for?(var?i?=?;?i?《?totalCode.length;?i++)?{//每个字符分别转换????????????????if?(isNaN(totalCode))?{//非数字字符,下同????????????var?minute?=?formatTime(dateTime.getMinutes());//获取分????????????var?second?=?formatTime(dateTime.getSeconds());//获取秒????????????//???var?millisecond?=?dateTime.getMilliseconds();//获取毫秒????????????var?code?=?"当前时间是："?+?hour?+?":"?+?minute?+?":"?+?second;//+?"??"?+?millisecond;//第一个div的内容(数字时钟)????????????var?codeChinese?=?"当前时间是："?+?formatChinese(hour)?+?"时"?+?formatChinese(minute)?+?"分"?+?formatChinese(second)?+?"秒";//第二个div的内容(中文时钟)????????????document.getElementById("divTime").innerHTML?=?code;//第一个div内容填充????????????document.getElementById("divTimeChinese").innerHTML?=?codeChinese;//第二个div内容填充????????????document.getElementById("monDigitalClock").innerHTML?=?makeMonCode(hour.toString()?+?":"?+?minute.toString()?+?":"?+?second.toString())?+?blockEmpty();//+?makeMonCode(millisecond.toString());????????????updateLatestTime();//更新剩余时间????????}????????function?formatTime(num)?{//格式化数字。

　　⑶《!doctype?html》《html》《head》????《meta?charset="UTF-"》????《title》clock?test《/title》????《script?type="text/javascript"》????????onload?=?function(){????????????var?canvas?=?document.querySelector(’canvas’);????????????var?ctx?=canvas.getContext(’d’);????????????var?frameId?=?null;????????????var?start?=?Date.now();????????????var?draw?=?function(){????????????????console.log(frameId);????????????????ctx.clearRect(,,,)????????????????var?now?=?new?Date();????????????????var?sec?=?now.getSeconds();????????????????var?min?=?now.getMinutes();????????????????var?hour?=?now.getHours()?+?min/;????????????????hour?=?hour》???hour-?:hour;????????????????ctx.save();????????????????ctx.beginPath();????????????????ctx.strokeStyle?=’#ABCDEF’;????????????????ctx.lineWidth?=;????????????????ctx.arc(,,,,,false);????????????????ctx.stroke();????????????????ctx.closePath();????????????????ctx.restore();????????????????//?画时针刻度????????????????for(var?i?=?;i《=;i++){????????????????????ctx.save();????????????????????ctx.lineWidth=;????????????????????ctx.font?=?’normal??px/??sans-serif’;????????????????????ctx.translate(,);????????????????????ctx.rotate(i**Math.PI/);????????????????????ctx.beginPath();????????????????????ctx.moveTo(,-);????????????????????ctx.lio(,-);????????????????????ctx.fillText(i,(i》?-:-),-);????????????????????ctx.closePath();????????????????????ctx.stroke();????????????????????ctx.restore();????????????????}????????????????//?画分针秒针刻度????????????????for(var?i?=?;i《;i++){????????????????????ctx.save();????????????????????ctx.lineWidth=;????????????????????ctx.translate(,);????????????????????ctx.rotate(i**Math.PI/);????????????????????ctx.beginPath();????????????????????ctx.moveTo(,-);????????????????????ctx.lio(,-);????????????????????ctx.closePath();????????????????????ctx.stroke();????????????????????ctx.restore();????????????????}????????????????//?画时针????????????????ctx.save();????????????????ctx.lineWidth=;????????????????ctx.translate(,);????????????????ctx.beginPath();????????????????ctx.rotate(hour**Math.PI/);????????????????ctx.moveTo(,-);????????????????ctx.lio(,);????????????????ctx.closePath();????????????????ctx.stroke();????????????????ctx.restore();????????????????//?画分针????????????????ctx.save();????????????????ctx.lineWidth=;????????????????ctx.translate(,);????????????????ctx.beginPath();????????????????ctx.rotate(min**Math.PI/);????????????????ctx.moveTo(,-);????????????????ctx.lio(,);????????????????ctx.closePath();????????????????ctx.stroke();????????????????ctx.restore();????????????????//?画秒针????????????????ctx.save();????????????????ctx.lineWidth=;????????????????ctx.translate(,);????????????????ctx.beginPath();????????????????ctx.rotate(sec**Math.PI/);????????????????ctx.moveTo(,-);????????????????ctx.lio(,);????????????????ctx.closePath();????????????????ctx.stroke();????????????????ctx.restore();????????????????//?画秒针装饰????????????????ctx.save();????????????????ctx.lineWidth=;????????????????ctx.fillStyle="#c";????????????????ctx.translate(,);????????????????ctx.beginPath();????????????????ctx.rotate(sec**Math.PI/);????????????????ctx.arc(,,,,,false);????????????????ctx.closePath();????????????????ctx.stroke();????????????????ctx.fill();????????????????ctx.restore();????????????????ctx.save();????????????????ctx.lineWidth=;????????????????ctx.strokeStyle="#";????????????????ctx.fillStyle="red";????????????????ctx.translate(,);????????????????ctx.beginPath();????????????????ctx.rotate(sec**Math.PI/);????????????????ctx.arc(,-,,,,false);????????????????ctx.closePath();????????????????ctx.stroke();????????????????ctx.fill();????????????????ctx.restore();????????????????if(Date.now()-start?》=){????????????????????start?=?Date.now();????????????????????frameId?=?requestAnimationFrame(draw)????????????????}else{????????????????????start?=?Date.now();????????????????????setTimeout(draw,);????????????????}????????????};????????????draw();????????}????《/script》《/head》《body》《canvas?width=""?height=""》你的浏览器不支持canvas标签《/canvas》《/body》《/html》

　　⑷js获取计算机当前时间

　　⑸js获取计算机当前时间的方法：functionshow(){varmydate=newDate();varstr=""+mydate.getFullYear()+"年";str+=(mydate.getMonth()+)+"月";str+=mydate.getDate()+"日";str+=mydate.getHours()+"时";str+=mydate.getMinutes()+"分";str+=mydate.getSeconds()+"秒";returnstr;}functionshow(){functionp(s){returns《?’’+s:s;}varmyDate=newDate();//获取当前年varyear=myDate.getFullYear();//获取当前月varmonth=myDate.getMonth()+;//获取当前日vardate=myDate.getDate();varh=myDate.getHours();//获取当前小时数(-)varm=myDate.getMinutes();//获取当前分钟数(-)vars=myDate.getSeconds();varnow=year+’-’+p(month)+"-"+p(date)+""+p(h)+’:’+p(m)+":"+p(s);returnnow;}js简介：js即JavaScript，它一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用网页上使用，用来给HTML网页增加动态功能。在年时，由scape公司的BrendanEich，在网景导航者浏览器上首次设计实现而成。因为scape与Sun合作，scape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。

　　⑹《html》《head》????《title》《/title》????《script?type="text/javascript"?language="javascript"》????????function?getTime()?{//js函数，定期执行的函数主体????????????var?dateTime?=?new?Date();//新建系统时间的对象????????????var?hour?=?formatTime(dateTime.getHours());//获取小时并格式化，格式化函数formatTime()，下同????????????var?minute?=?formatTime(dateTime.getMinutes());//获取分????????????var?second?=?formatTime(dateTime.getSeconds());//获取秒????????????//???var?millisecond?=?dateTime.getMilliseconds();//获取毫秒????????????var?code?=?"当前时间是："?+?hour?+?":"?+?minute?+?":"?+?second;//+?"??"?+?millisecond;//第一个div的内容(数字时钟)????????????var?codeChinese?=?"当前时间是："?+?formatChinese(hour)?+?"时"?+?formatChinese(minute)?+?"分"?+?formatChinese(second)?+?"秒";//第二个div的内容(中文时钟)????????????document.getElementById("divTime").innerHTML?=?code;//第一个div内容填充????????????document.getElementById("divTimeChinese").innerHTML?=?codeChinese;//第二个div内容填充????????????document.getElementById("monDigitalClock").innerHTML?=?makeMonCode(hour.toString()?+?":"?+?minute.toString()?+?":"?+?second.toString())?+?blockEmpty();//+?makeMonCode(millisecond.toString());????????????updateLatestTime();//更新剩余时间????????}????????function?formatTime(num)?{//格式化数字，小于时在数字前添加????????????if?(num?《?)?{????????????????return?""?+?num;????????????}????????????else?{????????????????return?num;????????????}????????}????????function?formatChinese(num)?{//中文格式处理????????????var?str?=?String(num);????????????if?(str.length?==?)?{//一位数的情况，直接返回中文????????????????return?formatSingleNumber(str);????????????}????????????else?{//两位数的情况????????????????var?mid?=?"十";????????????????var?top?=?str.substr(,?);//第一位????????????????var?btn?=?str.substr(,?);//第二位????????????????return?(formatSingleNumber(top)?+?mid?+?formatSingleNumber(btn)).replace("零十",?"零").replace("十零",?"十").replace("零零",?"零").replace("一十",?"十");//使用formatSingleNumber函数转换成中文并将不符合中文数字表示方法的替换一下????????????}????????}????????function?formatSingleNumber(num)?{//单个数字转化成中文????????????return?num.replace("",?"一").replace("",?"二").replace("",?"三").replace("",?"四").replace("",?"五").replace("",?"六").replace("",?"七").replace("",?"八").replace("",?"九").replace("",?"零");????????}????????setInterval("getTime();",?);//定时刷新，每毫秒刷新一次????????//模拟时钟代码????????function?buidlPointArea(num)?{//将数字对应的点阵拼接成图案????????????var?code?=?"《div?class=’singleNumber’》";????????????for?(var?i?=?;?i?《?;?i++)?{????????????????for?(var?j?=?;?j?《?;?j++)?{????????????????????code?+=?createSinglePoint(i?+?"_"?+?j,?num);????????????????}????????????}????????????code?+=?"《/div》";????????????return?code;????????}????????function?createSinglePoint(id,?num)?{//数字对应的黑点????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");//数字的点阵，下同????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?array?=?new?Array("_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_",?"_");????????????var?numArr?=?new?Array();????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????numArr?=?array;????????????var?cls?=?"whitePoint";????????????for?(var?i?=?;?i?《?numArr.length;?i++)?{????????????????if?(id?==?numArr)?{????????????????????cls?=?"blackPoint";????????????????}????????????}????????????return?"《div?id=’"?+?id?+?"’?class=’"?+?cls?+?"’》《/div》";????????}????????function?blockEmpty()?{//空格代码????????????return?"《div?class=’singleNumber’》《/div》";????????}????????function?blockM()?{//冒号的代码????????????var?code?=?"";????????????code?+=?"《div?class=’singleNumber’》《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’blackPoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’blackPoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》";????????????code?+=?"《div?class=’whitePoint’》《/div》《/div》";????????????return?code;????????}????????function?makeMonCode(totalCode)?{//生成模拟的数字时钟代码????????????var?finalCode?=?"";????????????for?(var?i?=?;?i?《?totalCode.length;?i++)?{//每个字符分别转换????????????????if?(isNaN(totalCode))?{//非数字字符，例子中只有冒号????????????????????if?(totalCode?==?":")?{????????????????????????finalCode?+=?blockM();//冒号的代码，用blockM()函数生成????????????????????}????????????????}????????????????else?{????????????????????finalCode?+=?buidlPointArea(totalCode);//数字的代码，用buildPointArea()函数生成????????????????}????????????}????????????return?finalCode;????????}????????function?updateLatestTime()?{//更新剩余时间????????????var?setHour?=?document.getElementById("sltHour").value;//获取选择的小时值????????????var?setMin?=?document.getElementById("sltMin").value;//获取选择的分值????????????var?setSecond?=?document.getElementById("sltSecond").value;//获取选择的秒值????????????var?time?=?new?Date();//获取系统时间????????????var?nowHour?=?time.getHours();//当前时间小时值????????????var?nowMin?=?time.getMinutes();//当前时间分值????????????var?nowSecond?=?time.getSeconds();//当前时间秒值????????????var?viewHour?=?setHour?-?nowHour;//剩余小时????????????var?viewMin?=?setMin?-?nowMin;//剩余分钟????????????var?viewSecond?=?setSecond?-?nowSecond;//剩余秒????????????if?(viewSecond?《?)?{//剩余秒小于时，借位????????????????viewSecond?+=?;????????????????viewMin?-=?;????????????}????????????if?(viewMin?《?)?{//剩余分小于时，借位????????????????viewMin?+=?;????????????????viewHour?-=?;????????????}????????????if?(viewHour?《?)?{//剩余小时小于时，借位????????????????viewHour?+=?;????????????}????????????document.getElementById("divLatestTime").innerHTML?=?"剩余时间为："?+?viewHour?+?"时"?+?viewMin?+?"分"?+?viewSecond?+?"秒";//填充????????????if?(viewHour?==??&&?viewMin?==??&&?viewSecond?==?)?{//到点提示????????????????alert("到点了！");????????????}????????}????????function?createSelect()?{//生成选择框代码????????????var?code?=?"";????????????code?+=?"请选择闹钟时间：《select?id=’sltHour’?onchange=’updateLatestTime()’》";????????????for?(var?i?=?;?i?《?;?i++)?{????????????????code?+=?"《option?value=’"?+?i?+?"’》"?+?i?+?"《/option》";????????????}????????????code?+=?"《/select》时";????????????code?+=?"《select?id=’sltMin’?onchange=’updateLatestTime()’》";????????????for?(var?k?=?;?k?《?;?k++)?{????????????????code?+=?"《option?value=’"?+?k?+?"’》"?+?k?+?"《/option》";????????????}????????????code?+=?"《/select》分";????????????code?+=?"《select?id=’sltSecond’?onchange=’updateLatestTime()’》";????????????for?(var?j?=?;?j?《?;?j++)?{????????????????code?+=?"《option?value=’"?+?j?+?"’》"?+?j?+?"《/option》";????????????}????????????code?+=?"《/select》秒";????????????document.getElementById("divAlert").innerHTML?=?code;????????}????《/script》????《style?type="text/css"》????????body?{????????????background-color:?#FFFFFF;????????}????????.clsTime?{????????????width:?px;????????????height:?px;????????????font-size:?px;????????????margin-left:?auto;????????????margin-right:?auto;????????????margin-top:?px;????????}????????.whitePoint?{????????????width:?px;????????????height:?px;????????????background-color:?#FFFFFF;????????????margin:?px;????????????padding:?px;????????????float:?left;????????}????????.blackPoint?{????????????width:?px;????????????height:?px;????????????background-color:?#;????????????margin:?px;????????????padding:?px;????????????float:?left;????????}????????.clsMonDigitalClock?{????????????margin-left:?auto;????????????margin-right:?auto;????????????width:?px;????????????height:?px;????????????background-color:?#FFFFFF;????????}????????.singleNumber?{????????????width:?px;????????????height:?px;????????????float:?left;????????????font-size:?px;????????}????????.clsAlert?{????????????width:?px;????????????margin-top:?px;????????????margin-left:?auto;????????????margin-right:?auto;????????}????????.clsLatestTime?{????????????width:?px;????????????margin-top:?px;????????????margin-left:?auto;????????????margin-right:?auto;????????}????《/style》《/head》《body?onload="createSelect();"》????《div?id="divTime"?class="d-bb--dafclsTime"》loading....《/div》????《div?id="divTimeChinese"?class="bb--daf-fclsTime"》loading....《/div》????《div?id="monDigitalClock"?class="-daf-f-bclsMonDigitalClock"》《/div》????《div?id="divAlert"?class="daf-f-b-dceclsAlert"》《/div》????《div?id="divLatestTime"?class="f-b-dce-caclsLatestTime"》《/div》《/body》《/html》

　　⑺之前做着玩的，有你说到的功能，有兴趣看看。代码存为html即可。