JS版元素周期表实现方法
本文实例讲述了JS版元素周期表实现方法。分享给大家供大家参考。具体如下：
这里的元素周期表基于JavaScript实现，未使用任何的图片，直接浏览本HTML网页即可看到效果，可以作为教学使用。
运行效果如下图所示：
具体代码如下：
<html>
<head>
<style type="text/css">
<!--
A{color:000000;font-size:9pt; TEXT-DECORATION: none}
A:hover{color: 00dd00}
-->
</style>
<title>元素周期表</title>
<script language="JavaScript">
<!--hide this script from crappy old browsers
function prepare()
{
window.setTimeout("window.status='这是例子'",500);
}
function moveover(txt)
{
window.status = txt;
}
function fillitin(Name, AtomicNumber,AtomicWeight, Shells, FillingOrbital, MeltingPoint, BoilingPoint)
{
moveover(Name); //写入状态栏说明
document.PeriodicTable.Name.value=Name; //写入元素名
document.PeriodicTable.AtomicNumber.value=AtomicNumber; //写入元素序号
document.PeriodicTable.AtomicWeight.value=AtomicWeight; //写入原子量
document.PeriodicTable.Shells.value=Shells; //写入电子层描述
document.PeriodicTable.FillingOrbital.value=FillingOrbital; //写入轨道
document.PeriodicTable.MeltingPoint.value=MeltingPoint; //写入熔点
document.PeriodicTable.BoilingPoint.value=BoilingPoint; //写入沸点
window.setTimeout("prepare()",3500); //延时3.5秒后恢复状态栏显示
}
<!-- done hiding from old browsers -->
</script>
</head>
<body onload="prepare();">
<table border="4" width="51%" bordercolorlight="#DDDDDD" cellspacing="0" cellpadding="4" bordercolor="#DDDDDD">
<tr>
<td width="100%">
<table border="1" width="60%" cellspacing="0" cellpadding="3" bordercolor="#A4A4A4">
<tr>
<td width="100%">
<form method="Post" name="PeriodicTable">
<table border="1" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#000000" width="534" height="182" style="font-family: Arial; FONT-SIZE:9PT" cellpadding="0">
<tr>
<td width="522" height="7" colspan="18">元素周期表</td>
</tr>
<tr>
<td bgcolor="#CCFFCC" width="29" height="6" align="center"><a href="javascript: fillitin('Hydrogen','1','1.0079','1','1s1','-259.14 C','-252.87 C');">H</a></td>
<td colspan="16" width="463" height="6"> </td>
<td bgcolor="#CCFFCC" width="30" height="6" align="center">
<ahref="javascript: fillitin('Helium','2','4.0026','2','1s2','-272C @ 26ATM','-268.6 C');">He</a></td>
</tr>
<tr>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Lithium','3','6.94','2,1','2s1','180.54 C','1347 C');">Li</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Beryllium','4','9.01218','2,2','2s2','1278 C','2970 C');">Be</a></td>
<td colspan="5" width="139" height="16" align="center">固体</td>
<td colspan="5" bgcolor="#DDDDDD" width="139" height="16" align="center">人造元素</td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Boron','5','10.81','2,3','2p1','2300 C','2550 C');">B</a></td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Carbon','6','12.011','2,4','2p2','3500 C','4827 C');">C</a></td>
<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a
href="javascript: fillitin('Nitrogen','7','14.0067','2,5','2p3','-209.9 C','-195.8 C');">N</a></td>
<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a
href="javascript: fillitin('Oxygen','8','15.9994','2,6','2p4','-218.4 C','-183.0 C');">O</a></td>
<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a
href="javascript: fillitin('Flourine','9','18.998403','2,7','2p5','-219.62 C','-188.14 C');">F</a></td>
<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a
href="javascript: fillitin('Neon','10','20.17','2,8',' 2p6','-248.6 C','-246.1 C');">Ne</a></td>
</tr>
<tr>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Sodium','11','22.98977','2,8,1',' 3s1','97.8 C','882.9 C');">Na</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Magnesium','12','24.305','2,8,2',' 3s2','638.8 C','1090 C');">Mg</a></td>
<td colspan="5" bgcolor="#CCFFCC" width="139" height="16" align="center">气体</td>
<td colspan="5" bgcolor="#68B4FF" width="139" height="16" align="center">液体</td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Aluminum','13','26.98154','2,8,3',' 3p1','660.37 C','2467 C');">Al</a></td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Silicon','14','28.0855','2,8,4',' 3p2','1410 C','2355 C');">Si</a></td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Phosphorous','15','30.97376','2,8,5',' 3p3','44.1 C','280 C');">P</a></td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Sulfur','16','32.06','2,8,6',' 3p4','112.8 C','444.6 C');">S</a></td>
<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a
href="javascript: fillitin('Chlorine','17','35.453','2,8,7',' 3p5','-100.98 C','-34.6 C');">Cl</a></td>
<td bgcolor="#CCFFCC" width="30" height="16" align="center"><a
href="javascript: fillitin('Argon','18','39.948','2,8,8',' 3p6','-189.3 C','-186 C');">Ar</a></td>
</tr>
<tr>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Potassium','19','39.0983','2,8,8,1',' 4s1','63.65 C','774 C');">K</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Calcium','20','40.08','2,8,8,2',' 4s2','839 C','1484.4 C');">Ca</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Scandium','21','44.9559','2,8,9,2',' 3d1','1539 C','2832 C');">Sc</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Titanium','22','47.90','2,8,10,2',' 3d2','1660 C','3287 C');">Ti</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Vandium','23','50.9415','2,8,11,2',' 3d3','1890?0 C','3380 C');">V</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Chromium','24','51.996','2,8,13,1',' 3d5','1857 C','2672 C');">Cr</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Manganese','25','54.9380','2,8,13,2',' 3d5','1245 C','1962 C');">Mn</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Iron','26','55.847','2,8,14,2',' 3d6','1535 C','2750 C');">Fe</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Cobalt','27','58.9332','2,8,15,2',' 3d7','1495 C','2870 C');">Co</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Nickel','28','58.71','2,8,16,2',' 3d8','1453 C','2732 C');">Ni</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Copper','29','63.546','2,8,18,1',' 3d10','1083 C','2567 C');">Cu</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Zinc','30','65.38','2,8,18,2',' 3d10','419.58 C','907 C');">Zn</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Gallium','31','69.735','2,8,18,3',' 4p1','29.78 C','2403 C');">Ga</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Germanium','32','72.59','2,8,18,4',' 4p2','937.4 C','2830 C');">Ge</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Arsenic','33','74.9216','2,8,18,5',' 4p3','81 C @ 28ATM','Sublimes at 613')">As</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Selenium','34','78.96','2,8,18,6',' 4p4','217 C','684.9 C');">Se</a></td>
<td bgcolor="#68B4FF" width="30" height="13" align="center"><a
href="javascript: fillitin('Bromine','35','79.904','2,8,18,7',' 4p5','-7.2 C','58.78 C');">Br</a></td>
<td bgcolor="#CCFFCC" width="30" height="13" align="center"><a
href="javascript: fillitin('Krypton','36','83.80','2,8,18,8',' 4p6','-157.2 C','-153.4 C');">Kr</a></td>
</tr>
<tr>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Rubidium','37','85.467','2,8,18,8,1',' 5s1','38.89 C','688 C');">Rb</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Strontium','38','87.62','2,8,18,8,2',' 5s2','769 C','1384 C');">Sr</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Yttrium','39','88.9059','2,8,18,9,2',' 4d1','1523 C','3337 C');">Y</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Zirconium','40','91.22','2,8,18,10,2',' 4d2','1852? C','4377 C');">Zr</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Niobium','41','92.9064','2,8,18,13,1',' 4d4','2468?0 C','4927 C');">Nb</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Molybdenum','42','95.94','2,8,18,13,1',' 4d5','2617 C','4612 C');">Mo</a></td>
<td bgcolor="#DDDDDD" width="29" height="13" align="center"><a
href="javascript: fillitin('Technetium','43','98.9062','2,8,18,14,1',' 4d6','2200?0 C','4877 C');">Tc</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Ruthenium','44','101.07','2,8,18,15,1',' 4d7','2250 C','3900 C');">Ru</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Rhodium','45','102.9055','2,8,18,16,1',' 4d8','1966? C','3727 C');">Rh</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Palladium','46','106.4','2,8,18,18',' 4d10','1552 C','2927 C');">Pd</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Silver','47','107.868','2,8,18,18,1',' 4d10','961.93 C','2212 C');">Ag</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Cadmium','48','112.41','2,8,18,18,2',' 4d10','320.9 C','765 C');">Cd</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Indium','49','114.82','2,8,18,18,3',' 5p1','156.61 C','2000?0 C');">In</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Tin','50','118.69','2,8,18,18,4',' 5p2','231.9 C','2270 C');">Sn</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Antimony','51','121.75','2,8,18,18,5',' 5p3','630 C','1750 C');">Sb</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Tellurium','52','127.60','2,8,18,18,6',' 5p4','449.5 C','989.8 C');">Te</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Iodine','53','126.9045','2,8,18,18,7',' 5p5','113.5 C','184 C @ 35 atm')">I</a></td>
<td bgcolor="#CCFFCC" width="30" height="13" align="center"><a
href="javascript: fillitin('Xenon','54','131.30','2,8,18,18,8',' 5p6','-111.9 C','-108.1 C');">Xe</a></td>
</tr>
<tr>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Cesium','55','132.9054','2,8,18,18,8,1',' 6s1','28.5 C','678.4 C');">Cs</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Barium','56','137.33','2,8,18,18,8,2',' 6s2','725 C','1140 C');">Ba</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Lanthanum','57','138.9055','2,8,18,18,9,2',' 5d1','920 C','3469 C');">La</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Hafnium','72','178.49','2,8,18,32,10,2',' 5d2','2150 C','5400 C');">Hf</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Tantalum','73','180.947','2,8,18,32,11,2',' 5d3','2996 C','5425?00 C');">Ta</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Tungsten','74','183.85','2,8,18,32,12,2',' 5d4','3410?0 C','5660 C');">W</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Rhenium','75','186.207','2,8,18,32,13,2',' 5d5','3180 C','5627 C');">Re</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Osmium','76','190.2','2,8,18,32,14,2',' 5d6','3045 C','5027 C');">Os</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Iridium','77','192.22','2,8,18,32,15,2',' 5d7','2410 C','4527?00 C');">Ir</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Platinum','78','195.09','2,8,18,32,17,1',' 5d9','1772 C','3827 C');">Pt</a></td>
<td width="29" height="13" align="center"><a
href="javascript: fillitin('Gold','79','196.9665','2,8,18,32,18,1',' 5d10','1064.43 C','2807 C');">Au</a></td>
<td bgcolor="#68B4FF" width="29" height="13" align="center"><a
href="javascript: fillitin('Mercury','80','200.59','2,8,18,32,18,2',' 5d10','-38.87 C','356.58 C');">Hg</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Thallium','81','204.37','2,8,18,32,18,3',' 6p1','303.5 C','1457?0C');">Tl</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Lead','82','207.2','2,8,18,32,18,4',' 6p2','327.5 C','1740 C');">Pb</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Bismuth','83','208.9804','2,8,18,32,18,5',' 6p3','271.3 C','1560?C');">Bi</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Polonium','84','(209)','2,8,18,32,18,6',' 6p4','254 C','962 C');">Po</a></td>
<td width="30" height="13" align="center"><a
href="javascript: fillitin('Astatine','85','(210)','2,8,18,32,18,7',' 6p5','302 C','337 C');">At</a></td>
<td bgcolor="#CCFFCC" width="30" height="13" align="center"><a
href="javascript: fillitin('Radon','86','(222)','2,8,18,32,18,8',' 6p6','-71 C','-61.8 C');">Rn</a></td>
</tr>
<tr>
<td width="29" height="5" align="center"><a
href="javascript: fillitin('Francium','87','(223)','2,8,18,32,18,8,1',' 7s1','27 C','677 C');">Fr</a></td>
<td width="29" height="5" align="center"><a
href="javascript: fillitin('Radium','88','226.0254','2,8,18,32,18,8,2',' 7s2','700 C','1737 C');">Ra</a></td>
<td width="29" height="5" align="center"><a
href="javascript: fillitin('Actinium','89','(227)','2,8,18,32,18,9,2',' 6d1','1050 C','3200?00 C');">Ac</a></td>
<td bgcolor="#DDDDDD" width="29" height="5" align="center"><a
href="javascript: fillitin('Unnilquadium','104','(260)','2,8,18,32,32,10,2',' 6d2','N/A C','N/A C');">Unq</a></td>
<td bgcolor="#DDDDDD" width="29" height="5" align="center"><a
href="javascript: fillitin('Unnilpentium','105','(260)','2,8,18,32,32,11,2',' 6d3','N/A C','N/A C');">Unp</a></td>
<td bgcolor="#DDDDDD" width="29" height="5" align="center"><a
href="javascript: fillitin('Unnilhexium','106','(263)','2,8,18,32,32,12,2',' 6d4','N/A C','N/A C');">Unh</a></td>
<td bgcolor="#DDDDDD" width="29" height="5" align="center"><a
href="javascript: fillitin('Unnilseptium','107','(262)','2,8,18,32,32,13,2',' 6d5','N/A C','N/A C');">Uns</a></td>
<td bgcolor="#DDDDDD" width="29" height="5" align="center">Uno</td>
<td bgcolor="#DDDDDD" width="29" height="5" align="center">Une</td>
<td bgcolor="#DDDDDD" width="29" height="5" align="center">Uun</td>
<td bgcolor="#DDDDDD" width="29" height="5" align="center">Uuu</td>
<td bgcolor="#DDDDDD" width="29" height="5" align="center">Uub</td>
<td bgcolor="#DDDDDD" width="30" height="5" align="center">Uut</td>
<td bgcolor="#DDDDDD" width="30" height="5" align="center">Uuq</td>
<td bgcolor="#DDDDDD" width="30" height="5" align="center">Uup</td>
<td bgcolor="#DDDDDD" width="30" height="5" align="center">Uuh</td>
<td bgcolor="#DDDDDD" width="30" height="5" align="center">Uus</td>
<td bgcolor="#DDDDDD" width="30" height="5" align="center">Uuo</td>
</tr>
<tr>
<td width="87" height="8" colspan="3" rowspan="2"> </td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Cerium','58','140.12','2,8,18,20,8,2',' 4f2','795 C','3257 C');">Ce</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Praseodymium','59','140.9077','2,8,18,21,8,2',' 4f3','935 C','3127 C');">Pr</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Neodymium','60','144.24','2,8,18,22,8,2',' 4f4','1010 C','3127 C');">Nd</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Promethium','61','(145)','2,8,18,23,8,2',' 4f5','N/A C','N/A C');">Pm</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Samarium','62','150.4','2,8,18,24,8,2',' 4f6','1072 C','1900 C');">Sm</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Europium','63','151.96','2,8,18,25,8,2',' 4f7','822 C','1597 C');">Eu</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Gadolinium','64','157.25','2,8,18,25,9,2',' 4f7','1311 C','3233 C');">Gd</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Terbium','65','158.9254','2,8,18,27,8,2',' 4f9','1360 C','3041 C');">Tb</a></td>
<td width="29" height="16" align="center"><a
href="javascript: fillitin('Dysprosium','66','162.50','2,8,18,28,8,2',' 4f10','1412 C','2562 C');">Dy</a></td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Holmium','67','164.9304','2,8,18,29,8,2',' 4f11','1470 C','2720 C');">Ho</a></td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Erbium','68','167.26','2,8,18,30,8,2',' 4f12','1522 C','2510 C');">Er</a></td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Thulium','69','168.9342','2,8,18,31,8,2',' 4f13','1545 C','1727 C');">Tm</a></td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Ytterbium','70','173.04','2,8,18,32,8,2',' 4f14','824 C','1466 C');">Yb</a></td>
<td width="30" height="16" align="center"><a
href="javascript: fillitin('Lutetium','71','174.96','2,8,18,32,9,2',' 4f14','1656 C','3315 C');">Lu</a></td>
<td width="30" height="8" rowspan="2"> </td>
</tr>
<tr>
<td width="29" height="15" align="center"><a
href="javascript: fillitin('Thorium','90','232.0381','2,8,18,32,18,10,2',' 6d2','1750 C','4790 C');">Th</a></td>
<td width="29" height="15" align="center"><a
href="javascript: fillitin('Proactinium','91','231.0359','2,8,18,32,20,9,2',' 5f2','1600 C','N/A C');">Pa</a></td>
<td width="29" height="15" align="center"><a
href="javascript: fillitin('Uranium','92','238.029','2,8,18,32,21,9,2',' 5f3','1132 C','3818 C');">U</a></td>
<td bgcolor="#DDDDDD" width="29" height="15" align="center"><a
href="javascript: fillitin('Neptunium','93','237.0482','2,8,18,32,23,8,2',' 5f4','640 C','3902 C');">Np</a></td>
<td bgcolor="#DDDDDD" width="29" height="15" align="center"><a
href="javascript: fillitin('Plutonium','94','(244)','2,8,18,32,24,8,2',' 5f6','639.5? C','3235?9 C');">Pu</a></td>
<td bgcolor="#DDDDDD" width="29" height="15" align="center"><a
href="javascript: fillitin('Americium','95','(243)','2,8,18,32,25,8,2',' 5f7','994 C','2607 C');">Am</a></td>
<td bgcolor="#DDDDDD" width="29" height="15" align="center"><a
href="javascript: fillitin('Curium','96','(247)','2,8,18,32,25,9,2',' 5f7','1340 C','N/A C');">Cm</a></td>
<td bgcolor="#DDDDDD" width="29" height="15" align="center"><a
href="javascript: fillitin('Berkelium','97','(247)','2,8,18,32,26,9,2',' 5f8','N/A C','N/A C');">Bk</a></td>
<td bgcolor="#DDDDDD" width="29" height="15" align="center"><a
href="javascript: fillitin('Californium','98','(251)','2,8,18,32,28,8,2',' 5f9','N/A C','N/A C');">Cf</a></td>
<td bgcolor="#DDDDDD" width="30" height="15" align="center"><a
href="javascript: fillitin('Einsteinium','99','(254)','2,8,18,32,29,8,2',' 5f11','N/A C','N/A C');">Es</a></td>
<td bgcolor="#DDDDDD" width="30" height="15" align="center"><a
href="javascript: fillitin('Fremium','100','(257)','2,8,18,32,30,8,2',' 5f12','N/A C','N/A C');">Fm</a></td>
<td bgcolor="#DDDDDD" width="30" height="15" align="center"><a
href="javascript: fillitin('Mendelevium','101','(258)','2,8,18,32,31,8,2',' 5f13','N/A C','N/A C');">Md</a></td>
<td bgcolor="#DDDDDD" width="30" height="15" align="center"><a
href="javascript: fillitin('Nobelium','102','(259)','2,8,18,32,32,8,2',' 5f14','N/A C','N/A C');">No</a></td>
<td bgcolor="#DDDDDD" width="30" height="15" align="center"><a
href="javascript: fillitin('Lawrencium','103','(260)','2,8,18,32,32,9,2',' 5f14','N/A C','N/A C');">Lr</a></td>
</tr>
<tr>
<td colspan="18" width="522" height="19">
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td><b>名称</b></td>
<td><b>编号</b></td>
<td><b>原子量</b></td>
<td><b>电子层排布</b></td>
<td><b>轨道</b></td>
<td><b>熔点</b></td>
<td><b>沸点</b> </td>
</tr>
<tr>
<td height="23"><input type="text" size="11"
name="Name" style="border: 1 solid #000000"> </td>
<td valign="middle" height="23"><input type="text" size="5"
name="AtomicNumber" style="border: 1 solid #000000"> </td>
<td height="23"><input type="text" size="7"
name="AtomicWeight" style="border: 1 solid #000000"> </td>
<td height="23"><input type="text" size="15"
name="Shells" style="border: 1 solid #000000"> </td>
<td height="23"><input type="text" size="4"
name="FillingOrbital" style="border: 1 solid #000000"> </td>
<td height="23"><input type="text" size="7"
name="MeltingPoint" style="border: 1 solid #000000"> </td>
<td height="23"><input type="text" size="7"
name="BoilingPoint" style="border: 1 solid #000000"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
赞 (0)
相关推荐
-
Web纯前端“旭日图”实现元素周期表
一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用来显示层级数据.层次结构中每个级别的比例通过1个圆环表示,离原点越近代表圆环级别越高,最内层的圆表示顶级结构,然后一层一层去看数据的占比情况. 我们通过一个简单的示例,初步感受一下旭日图的魅力. 季度 月份 周 销量 Q1 1月份 29 2月份 第一周 63 第二周 54 第三周 91 第四周 78
-
JS版元素周期表实现方法
本文实例讲述了JS版元素周期表实现方法.分享给大家供大家参考.具体如下: 这里的元素周期表基于JavaScript实现,未使用任何的图片,直接浏览本HTML网页即可看到效果,可以作为教学使用. 运行效果如下图所示: 具体代码如下: <html> <head> <style type="text/css"> <!-- A{color:000000;font-size:9pt; TEXT-DECORATION: none} A:hover{colo
-
ASP.NET中日历控件和JS版日历控件的使用方法（第5节）
今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一 Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个
-
JS基于递归实现网页版计算器的方法分析
本文实例讲述了JS基于递归实现网页版计算器的方法.分享给大家供大家参考,具体如下: 递归实现网页版计算器可以简化代码,设计思路: 1.css+html实现计算器的外观,给每个button绑定number(z)事件,传入z的不同来区分触发事件的按钮. <style>放入head中 这个div放在body中,是计算器的html,number()通过传入不同的数字,区分触发按钮. <div class="bg"> <div id="txt"&
-
IIS日志清理(CMD版,VBS版,JS版,WSH版)
应用场合:主要用与虚拟主机,也可用于个人服务器 产生背景:2005 年某月某日,一向运行正常的虚拟主机死机了,让机房值班人员重启数次,都不成,接显示器进系统看,提示:C盘空间不足,半夜还得去机房处理,到机房后先断网,再进系统发现有两个地方有问题,C:\WINDOWS\system32\LogFiles文件有6G,还有一个就是Symantec隔离病毒的地方,到网上找了下,最大可能性是我们的虚拟主机的所有日志都写在这里,并且没人知道写在这里,郁闷,在IIS里看了下,还真是这么回事,日志天天都在长,当
-
JS版微信6.0分享接口用法分析
本文实例讲述了JS版微信6.0分享接口用法.分享给大家供大家参考,具体如下: 为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注行为的公告>,微信平台开发者发现,原有的微信分享功能不能用了.正在苦于微信分享该怎么解决时,微信于2015年1月10日即时发布了开放JS-SDK,为微信网站的开发提供了强大的js功能. 注: 1.微信JS-SDK,提供的分享接口仅是监听分享事件触发时,修改分享的标题.链接等.不能自定义触发分享事件 2.
-
一种基于浏览器的自动小票机打印实现方案(js版)
1.使用场景 用户在浏览器做了某项操作后,自动打印小票. 2.测试方式 2.1 JavaScript实现 尝试了很多办法,最终都会出现一个弹出框,让用户选择打印机.不符合我们需求. 2.2 lodop 功能比较强大,但是收费的.暂不考虑. 2.3 PAZU 功能也很强大,免费许可.非常赞! 详情:http://www.4fang.net/article/tech/pazu_tprinter.html 实现过程: 2.3.1 打印详情页面 <!doctype html> <html>
-
将字符串转换成gb2312或者utf-8编码的参数(js版)
在很多时候,我们直接在url中传递中文参数时,读到的中文都是乱码,那么我们应该怎么将这些参数转换呢? 下面我们来介绍一下方法 1.我们新建一个 UrlEncode.js 然后将下面的代码拷贝进去 复制代码 代码如下: //JS版的Server.UrlEncode编码函数 String.prototype.UrlEncodeGB2312 = function () { var str = this; str = str.replace(/./g, function (sHex) { window.
-
结构/表现/行为完全分离的选项卡(jquery版和原生JS版)
关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){-}与jQuery的$(document).ready(function(){-});的区别,这也是我为什么不用样式定义初
-
jQuery下实现等待指定元素加载完毕(可改成纯js版)
先声明下这个方法的使用场合,以免误导大家. 比如在博客园,我们没法修改他的源代码, 那么只能想办法监视元素的出现了. 所以下面方法是在修改不了源码的情况下使用,而非写自己的项目. 今天在改博客几个样式的时候,以为很自然的加上js就可以实现了, 没想到那个是ajax加载的数据,而非页面首次加载的, 比如下面的 "提交评论" 按钮,右侧的 搜索按钮 等. 我很自然的写了 复制代码 代码如下: 1 $("#btn_comment_submit").removeClass(
-
js版扫雷游戏
本文实例为大家分享了js版扫雷游戏的具体代码,供大家参考,具体内容如下 界面 考虑到简单,一般,困难三个扫雷区域的格子数都不同,所以界面上的扫雷区域是用js动态生成.先搭好整体html框架: <div class="container"> <div class="level"> <button class="select">简单</button>