javascript/index.html at master · yingjio/javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>		<!-- 這是註解 -->
<html>				<!-- 這是html開頭的tag -->
<head>				<!-- 這是head開頭的tag -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<!-- 宣告編碼 -->
<title>這是要教給大家的Javascript程式</title>							<!-- 放在視窗列的文字 -->

    <!-- CSS Base -->
     <link rel="stylesheet" type='text/css' media='all' href="css/base.css">
    <!-- CSS Colors -->
     <link rel="stylesheet" type='text/css' media='all' href="css/colors.css">
    <!-- Optional - CSS SVG Icons (Font Awesome) -->
     <link rel="stylesheet" type='text/css' media='all' href="css/svg-icons.css">


</head>				<!-- 這是head結束的tag -->
<body>
    <main role="main">
        <article id="webslides" class="vertical">
<section class="aligncenter">
<!-- 下面是選項的語法 -->
<div class="wrap  fadeInUp">
	<div class="content-left">
		<input type="radio" name="option" value="跑步" checked>跑步<br>
		<input type="radio" name="option" value="鐵軌">鐵軌<br>
		<input type="radio" name="option" value="山巔">山巔<br>
		<select name="test" class="opts" id="myselect">
		  <option selected value=1>舒宇宸</option>
		  <option value=2>劉之中</option>
		  <option value=3>李昱勳</option>
		</select>
		名言一:<input id="quote_input1" value="數學建模教育之道無它, 唯數學與榜樣"> <br>
		名言二:<input id="quote_input2" value="Mathematical Modeling is nothing, but Mathematics and Model!"> <br>
		名言三:<input id="quote_input3" value="舒大ㄅ土, me"> <br>
		<button type="button" id="mybutton" onclick=showopt()>產生名言</button>	<!-- 按了之後要執行showopt() -->
	</div>
</div>
</section>

<section class="bg-black aligncenter">
	<span id="teacher" class="background-right-bottom" style="background-image:url('images/ycshu.png'); z-index:5;"></span>
	<span id="bgimage" class="background light" style="background-image:url('images/road-dawn-mountains-sky.jpeg');"></span>
	<div class="wrap  fadeInUp">
		<div class="content-left">
			<blockquote>
				<h3 id="quote_line1">"數學建模教育之道無它<br>唯數學與榜樣"</h3>
				<p id="author1"><cite>舒大ㄅ土</cite></p>

			</blockquote>
			<blockquote>
				<h3 id="quote_line2">"Mathematical Modeling is nothing<br>but Mathematics and Model!"</h3>
				<p id="author2"><cite>me</cite></p>
			</blockquote>
		</div>
	</div>
</section>
        </article>
        <!-- end article -->
    </main>

<!-- 以下就真的是Javascript的程式了 -->
<script src="js/webslides.js"></script>
<script src="js/jquery.min.js"></script>
<script>
	const ws = new WebSlides();
	//
function showopt() {

	var x;

	document.getElementById("bgimage").style = "background-image:url('images/road-2.jpg');";
	x = document.getElementById("quote_input1").value;
	x = x.split(',');
	x = x.join('<br>');
	document.getElementById("quote_line1").innerHTML = x;
	x = document.getElementById("quote_input2").value;
	x = x.split(',');
	x = x.join('<br>');
	document.getElementById("quote_line2").innerHTML = x;
	x = document.getElementById("quote_input3").value;
	x = x.split(',');
	document.getElementById("author1").innerHTML = "<cite>" + x[0] + "(" + document.getElementById("myselect").value +")" +"</cite>";

	var teacher_no = document.getElementById("myselect").value;
	if(teacher_no == 1) {
		document.getElementById("teacher").style = "background-image:url('images/ycshu.png'); z-index:5;";
	} else if (teacher_no == 2) {
		document.getElementById("teacher").style = "background-image:url('images/ccliu.png'); z-index:5;";
	} else if (teacher_no == 3) {
		document.getElementById("teacher").style = "background-image:url('images/andylee.png'); z-index:5;";
	}

	var y = document.getElementsByName("option");
	for(var i=0; i<y.length; ++i) {
		if(y[i].checked) {
			document.getElementById("author2").innerHTML = "<cite>" + x[1] + "(" + y[i].value + ")" + "</cite>";
		}
	}
}
</script>
</body>
</html>