センター試験カウントダウンJavaScript

今年もセンター試験まで100日を切ろうとしている模様だが、受験生はカウントダウンをいい加減し始めていることであろう。110を過ぎると原子番号と日数を対応させることができる。

このブログでもそんなのを実現すべく、JavaScriptで書いてみた。

まずはカウントダウンだが、それはいろいろサンプルが紹介されているので問題ない。多分、指定日と今日の0時0分のオブジェクトを作り、.getTime()をしたときの値の差がm sec単位の日付の差だから60*60*24*1000(m sec/day)で割れば良い。

そして、元素のデータはインターネットで適当に探して、表計算ソフトに突っ込み、CSVファイルにした後、配列に加工。その配列は、以下に挙げておくので、適当に加工していい。

var NAME_ELEMENTS = new Array("H","He","Li","Be","B","C","N","O","F","Ne","Na","Mg","Al","Si","P","S","Cl","Ar","K","Ca","Sc","Ti","V","Cr","Mn","Fe","Co","Ni","Cu","Zn","Ga","Ge","As","Se","Br","Kr","Rb","Sr","Y","Zr","Nb","Mo","Tc","Ru","Rh","Pd","Ag","Cd","In","Sn","Sb","Te","I","Xe","Cs","Ba","La","Ce","Pr","Nd","Pm","Sm","Eu","Gd","Tb","Dy","Ho","Er","Tm","Yb","Lu","Hf","Ta","W","Re","Os","Ir","Pt","Au","Hg","Tl","Pb","Bi","Po","At","Rn","Fr","Ra","Ac","Th","Pa","U","Np","Pu","Am","Cm","Bk","Cf","Es","Fm","Md","No","Lr","Rf","Db","Sg","Bh","Hs","Mt","Ds","Rg","Cn"); var JP_NAME_ELEMENTS = new Array("水素","ヘリウム","リチウム","ベリリウム","ホウ素","炭素","窒素","酸素","フッ素","ネオン","ナトリウム","マグネシウム","アルミニウム","ケイ素","リン","硫黄","塩素","アルゴン","カリウム","カルシウム","スカンジウム","チタン","バナジウム","クロム","マンガン","鉄","コバルト","ニッケル","銅","亜鉛","ガリウム","ゲルマニウム","ヒ素","セレン","臭素","クリプトン","ルビジウム","ストロンチウム","イットリウム","ジルコニウム","ニオブ","モリブデン","テクネチウム","ルテニウム","ロジウム","パラジウム","銀","カドミウム","インジウム","スズ","アンチモン","テルル","ヨウ素","キセノン","セシウム","バリウム","ランタン","セリウム","プラセオジム","ネオジム","プロメチウム","サマリウム","ユウロピウム","ガドリニウム","テルビウム","ジスプロシウム","ホルミウム","エルビウム","ツリウム","イッテルビウム","ルテチウム","ハフニウム","タンタル","タングステン","レニウム","オスミウム","イリジウム","白金","金","水銀","タリウム","鉛","ビスマス","ポロニウム","アスタチン","ラドン","フランシウム","ラジウム","アクチニウム","トリウム","プロトアクチニウム","ウラン","ネプツニウム","プルトニウム","アメリシウム","キュリウム","バークリウム","カリホルニウム","アインスタイニウム","フェルミウム","メンデレビウム","ノーベリウム","ローレンシウム","ラザホージウム","ドブニウム","シーボーギウム","ボーリウム","ハッシウム","マイトネリウム","ダームスタチウム","レントゲニウム","コペルニシウム"); var MASS_ELEMENTS = new Array("1.00794","4.002602","6.941","9.012182","10.811","12.0107","14.0067","15.9994","18.9984032","20.1797","22.98977","24.305","26.981538","28.0855","30.973761","32.065","35.453","39.948","39.0983","40.078","44.95591","47.867","50.9415","51.9961","54.938049","55.845","58.9332","58.6934","63.546","65.39","69.723","72.64","74.9216","78.96","79.904","83.8","85.4678","87.62","88.90585","91.224","92.90638","95.94","99","101.07","102.9055","106.42","107.8682","112.411","114.818","118.71","121.76","127.6","126.90447","131.293","132.90545","137.327","138.9055","140.116","140.90765","144.24","145","150.36","151.964","157.25","158.92534","162.5","164.93032","167.259","168.93421","173.04","174.967","178.49","180.9479","183.84","186.207","190.23","192.217","195.078","196.96655","200.59","204.3833","207.2","208.98038","210","210","222","223","226","227","232.0381","231.03588","238.02891","237","239","243","247","247","252","252","257","258","259","262","261","262","263","264","265","268","271","272","277"); var EN_NAME_ELEMENTS = new Array("Hydrogen","Helium","Lithium","Beryllium","Boron","Carbon","Nitrogen","Oxygen","Fluorine","Neon","Sodium","Magnesium","Aluminium","Silicon","Phosphorus","Sulfur","Chlorine","Argon","Potassium","Calcium","Scandium","Titanium","Vanadium","Chromium","Manganese","Iron","Cobalt","Nickel","Copper","Zinc","Gallium","Germanium","Arsenic","Selenium","Bromine","Krypton","Rubidium","Strontium","Yttrium","Zirconium","Niobium","Molybdenum","Technetium","Ruthenium","Rhodium","Palladium","Silver","Cadmium","Indium","Tin","Antimony","Tellurium","Iodine","Xenon","Caesium","Barium","Lanthanum","Cerium","Praseodymium","Neodymium","Promethium","Samarium","Europium","Gadolinium","Terbium","Dysprosium","Holmium","Erbium","Thulium","Ytterbium","Lutetium","Hafnium","Tantalum","Tungsten","Rhenium","Osmium","Iridium","Platinum","Gold","Mercury","Thallium","Lead","Bismuth","Polonium","Astatine","Radon","Francium","Radium","Actinium","Thorium","Protactinium","Uranium","Neptunium","Plutonium","Americium","Curium","Berkelium","Californium","Einsteinium","Fermium","Mendelevium","Nobelium","Lawrencium","Rutherfordium","Dubnium","Seaborgium","Bohrium","Hassium","Meitnerium","Darmstadtium","Roentgenium","Copernicium");

NAME_ELEMENTS:元素記号
JP_NAME_ELEMENTS:日本語の元素名
EN_NAME_ELEMENTS:英語の元素名
MASS_ELEMENTS:原子量
配列の番号は「原子番号-1」で指定。NAME_ELEMENTS[0]は「H」

で、全体としてのコードは以下。改行・タブなどは削除しているのであしからず。
まず、スクリプト。これとは別途先の配列も読み込む必要がある。
var setDate = new Date(2012,0,14);var tmp = new Date;var today = new Date(tmp.getFullYear(),tmp.getMonth(),tmp.getDate());var diff = (setDate.getTime() - today.getTime())/(1000*60*60*24);function writeRemainingDays(){res="";if(diff>0){diff = diff.toString();while(diff.length!=3){diff="0"+diff;}for(i=0;i<3;i++){res+="<span class='num'>"+diff.charAt(i)+"</span>";}res+="<span class='normalTxt'>日</span>";}else if(diff==0){res="<span class='noremaining'>1日目</span>";}else if(diff==-1){res="<span class='noremaining'>2日目</span>";}else{res="<span class='normalTxt'>今年度のセンター試験は終了しました。来年度のカウントダウンは準備中です。</span>";}document.write(res);}function writeTodaysElem(){res="";if(diff>0){res+="<span class='elm'>"+NAME_ELEMENTS[diff-1]+"</span><br /><span class='elmJP'>"+JP_NAME_ELEMENTS[diff-1]+"</span>";}document.write(res);}function writeElemInfo(){res="";if(diff>0){res+="原子番号:"+(diff)+" 原子量:"+MASS_ELEMENTS[diff-1]+" 英名:"+EN_NAME_ELEMENTS[diff-1];}document.write(res);}
CSS
#countdown{border-radius:5px;border:1px solid #aaa;background:#eee;box-shadow:#ddd 1px 1px 3px;padding:0px;margin:5px;width:175px;}#countdown #header{text-align:center;background:#aaa;margin:0px;padding:5px 10px;color:#333;text-shadow:#fff 0px 1px 2px;border-radius:5px 5px 0px 0px;font-size:9pt;}#countdown #dateBox{margin:20px;text-align:center;}#countdown #dateBox span.num{padding:10px 10px;margin:10px 1px;background:#555;color:white;font-size:25pt;border-radius:4px;box-shadow:#fff 0px 1px 2px #000 0px -1px 2px;}#countdown #dateBox span.normalTxt{padding:5px 3px;margin:10px 1px;font-size:10pt;}#countdown #dateBox span.noremaining{padding:10px 15px;margin:10px 1px;background:orange;color:white;font-size:15pt;border-radius:4px;}#countdown hr{padding:0px;margin:10px -10px; box-shadow:#aaa 0px 1px 3px;border:none;border-bottom:#aaa 1px solid;}#countdown #infoBox1{padding:10px 20px;margin:10px 30px;font-size:15pt;background:#333;color:lightgreen;}#countdown #todaysElm{border-top:#fff 1px solid;font-size:9pt;}#countdown #todaysElm div:first-child{background:#aaa;color:#333;text-shadow:#fff 0px 1px 2px;padding:5px;}#countdown #todaysElm #elmName{text-align:center;}#countdown #todaysElm #elmName span.elm{font-size:20pt;font-weight:bold;text-shadow:#aaa 1px 1px 2px;}#countdown #todaysElm #elmName span.elmJP{font-size:12pt;font-weight:bold;text-shadow:#aaa 1px 1px 2px;}#countdown #elmInfo{font-size:10pt;padding:5px;}
HTML
<div id="countdown"><div id="header">平成24年度センター試験<br />カウントダウン</div><div id="dateBox"><script>writeRemainingDays();</script> </div><div id="todaysElm"><div>今日の元素</div><div id="elmName"><script>writeTodaysElem();</script></div><div id="elmInfo"><script>writeElemInfo();</script></div></div></div>