読者です 読者をやめる 読者になる 読者になる

繰り返しの練習

 while文でselectボタンを作る

<select>
<script>
var i = 2;
while( i <= 20 ) {
document.write('<option value="i">'+i+'個</option>');
i += 2;
}
</script>
</select>

 結果

f:id:develog:20160901092609g:plain

for文でselectボタンを作る

<select>
<script>
for(var i = 2; i <= 20; i+=2){
document.write('<option value="i">'+i+'個</option>');
}
</script>
</select>

 結果

f:id:develog:20160901092609g:plain

 平成と西暦の対応表

<script>
document.write('<br><br>平成  西暦');
for(i = 1; i <= 30; i++){
document.write('<br>'+i+'年   '+(i+1988)+'年');
}
</script>

結果 

f:id:develog:20160901092649g:plain

九九の表を作成

<table width="600" border="1">
<tr>
<th>&nbsp;</th>
<script>
for(i = 1; i <= 9; i++){
document.write('<th>'+i+'</th>');
}
</script>
</tr>
<script>
for(i = 1; i <= 9; i++){
document.write('<tr>');
document.write('<th>'+i+'</th>');
for(j = 1; j <= 9; j++){
document.write('<th>'+(i*j)+'</th>');
}
document.write('</tr>');
}
</script>

<style>
table {
border-collapse: collapse;
}
td,th {
width: 50px;
text-align: center;
}
th {
background-color: #CCC;
}
</style>

結果

f:id:develog:20160830174806g:plain

 

為替の表を作る

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>為替表</title>
</head>
<style>
html,body,h1,h2,h3,p,table,th,td {
margin: 0;
padding: 0;
line-height: 1.0;
font-family: "游ゴシック", YuGothic,
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
font-weight: 500;
}
h3 {
margin: 10px 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 400px;
border: 1px solid #222;
}
td,th {
text-align: center;/*tdには不要*/
border: 1px solid #222;
height: 25px;
}
tr:nth-child(1) th {
background-color: #CCC;
font-weight: bold;
}
th:nth-child(odd) {
background-color: #CCC;
font-weight: bold;
}
</style>

<body>
<h3>為替表(ドル)1ドル=103円換算</h3>
<table>
<tr>
<th>&nbsp;</th><th>金額</th>
</tr>
<script>
var doll2 = 103.252452;
var doll = Math.round(doll2);

document.write('<tr>');
document.write('<th>1ドル</th>');
document.write('<th>'+doll+'円</th>');
document.write('</tr>');

for(var i = 10; i <= 100; i+=10){
document.write('<tr>');
document.write('<th>'+i+'ドル</th>');
document.write('<th>'+(i*doll)+'円</th>');
document.write('</tr>');
}
</script>
</body>
</html>

結果

f:id:develog:20160831165457p:plain