謝宸峰Python 與JavaScript對照

期中考

css

h1{background-color: purple; color: white; border: 10px solid red; text-align:center; padding: 5px}
ul{background-color: green; color: white; font-size: 2em;line-height:1.5}
input{font-size:24px;background-color:rgb(210, 250, 215);}
.monkey{font-size:36px;}
pre{background-color:blue;color:aquamarine;}/*css的註解

html

<link rel='stylesheet' href="abc.css">
<script src="abc.js"></script>
<h1>謝宸峰輸入參數</h1>
輸入k<input type="number" value="1" id="k"></input><br>
輸入m<input type="number" value="1" id="m"></input><br>
輸入n<input type="number" value="1" id="n"></input><br>
<input type='password'><input>
<button onclick="abc()">執行自訂函數</button>
<h1>重點</h1>
alert內建函數,自訂函數abc
<h1>謝宸峰輸出結果</h1>
<div id="out" class="monkey"></div>


js

const space=' ', slash='/', backslash='\\', cr='\n';
out='';//javascript與c語言的註解
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;//放置空白放-i-1次
            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;}

謝宸峰輸入參數

輸入k
輸入m
輸入n

重點

alert內建函數,自訂函數abc

謝宸峰輸出結果

留言

這個網誌中的熱門文章

謝宸峰tkinter套件建立圖形使用者介面GUI=Graphical User Interface

謝宸峰VS code編輯HTML,CSS,JS俄羅斯方塊