林凱立python期中考javascript按鈕button事件onchange
JS示範程式碼
const space=' ', slash='/', backslash='\\', cr='\n';
function row1(k,m){
for(let i=0; i<k;i++){
for(let ii=0; ii<m; ii++){
for(let j=0; j<k-i-1; j++)
out+=space;
out+=slash;
for(let j=0; j<2*i; j++)
out+=space;
out+=backslash;
for(let j=0; j<k-i-1;j++)
out+=space;};
out+=cr;};};
function row2(k,m){
for(let i=0; i<k; i++){
for(let ii=0; ii<m; ii++){
for(let j=0; j<i; j++)
out+=space;
out+=backslash;
for(let j=0; j<2*k-2*i-2; j++)
out+=space;
out+=slash;
for(let j=0; j<i;j++)
out+=space;};
out+=cr;};};
function abc(){
k = document.getElementById('k').value;
m = document.getElementById('m').value;
n = document.getElementById('n').value;
out ='<pre>林凱立\n';
for(let i=0; i<n; i++){
row1(k,m);
row2(k,m);}
out += '</pre>';
document.getElementById('out').innerHTML=out;}
function change(){
//python的自訂函數def,javascript function
let x = getElementById('mySelect')
document.body.style.backgroundColor = x.options[selec]
}
CSS示範程式碼
h1{background-color: #16417c; color: white; border: 10px solid #9cbdee; text-align:center; padding: 5px}
ul{background-color: #95a5bd; color: white; font-size: 2em;line-height:1.5}
input{font-size:24px;background-color:aliceblue;size: 10;}
.spanstyle{font-size:36px;font-weight: bold;}
pre{color:white;background-color: #9cbdee;}
#out{background-color: #95a5bd;font-size:36px;}
HTML示範程式碼
<!--HTML註解--><link rel="stylesheet" href="abc.css">
<script src="abc.js"></script>
<h1>林凱立輸入參數</h1>
<span class='spanstyle'>輸入k</span><input id="k" type="number" value="1" /><br />
<span class='spanstyle'>輸入m</span><input id="m" type="number" value="1" /><br />
<span class='spanstyle'>輸入n</span><input id="n" type="number" value="1" /><br />
<button onclick="abc()">執行自訂函數</button>
<select id="mySelect" onchange="change(this)">
<option>red</option>
<option>green</option>
<option>blue</option>
</select>
<h1>重點</h1>
<li>span手掌張開拇指到小指,短橋梁長度。</li>
<li>VSCode是IDE整合開發環境。</li>
<li>CTRL+SHIFT+L一次改全部。</li>
<li>Integrated Development Environment</li>
<li>alert內建函數,自訂函數abc</li>
<li>利用id加上syle方法是#id</li>
<h1>林凱立輸出結果</h1>
<div class="monkey" id="out"></div>
林凱立輸入參數
輸入k輸入m
輸入n
留言