html的常用控制元件

水星滅絕發表於2020-11-13
HTML控制元件
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>測試js</title>
    <base href="" target="_blank">
    <style>
        .boxcontainer {
            margin: 0 auto;
            width: 1000px;
            border: 1;
        }

        .boxleft {
            float: left;
            width: 400px;
            border: 1;
            background-color: burlywood;
            border: 2px solid #010114;
        }

        .boxright {
            float: left;
            width: 400px;
            border: 1;
            background-color: rgb(235, 241, 223);
            border: 2px solid #010114;
        }

        .boxrect {
            border: 2px dashed #010114;
        }
    </style>
</head>

<body>
    <div class="boxcontainer">
        <div class="boxleft">
            <div class="boxrect">
                <h3>
                    測試table
                </h3>
                <table border="1">
                    <tr>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>21</td>
                        <td>22</td>
                        <td>23</td>
                        <td>24</td>
                    </tr>
                </table>
            </div>
            <div class="boxrect">
                <b>測試圖片</b><br>
                <img src="pic/p2.jpg" style="float:left;" width="200" height='100'>
            </div>
            <div class="boxrect">
                <h3>測試圖片連結</h3>
                <a href="https://www.csdn.net/" target="_blank"><img src="pic/p3.jpg" width="200" height="150"></a>
            </div>
            <div class="boxrect">
                <h3>測試播放視訊</h3>
                <video width="300" height="200" controls>
                    <source src="pic/貧民窟的百萬富翁.mp4" type="video/mp4">
                    你的瀏覽器不支援video標籤
                </video>
            </div>
        </div>
        <div class="boxright">
            <div class="boxrect">
                <h3>測試表單提交，&lt&nbsp&nbsp&nbsp&lt對應test_flask.py伺服器</h3>
                <form name="input" action="http://localhost:9090/get/ret" method="POST">
                    first name:<input type="text" name="firstname">
                    second name:<input type="text" name="lastname"><br>
                    password:<input type="password" name="pwd">
                    <input type="submit" value="提交">
                </form>
            </div>
            <div class="boxrect">
                <b>測試canvas</b><br>
                <button type="button" onclick="drawGraphic()">點選本按鈕在canvas上繪圖</button>
                <canvas id="mycanvas" width='400' height='200' style="background-color: aquamarine;">
                    你的瀏覽器不支援
                </canvas>
            </div>
            <div class="boxrect">
                <p>
                    <a href="https://www.runoob.com/html/html-entities.html">
                        <b>測試實體字元:點選跳轉過去看看</b></a><br>
                    小於號&lt;&nbsp;空格&nbsp;大於號&gt;乘號&times;除號&divide;位與&amp;引號&quot;版權&copy;
                </p>
            </div>
            <div class="boxrect">
                <p>
                    <a href="https://www.runoob.com/html/html-url.html"><b>url統一資源定位器，點選檢視</b></a>
                </p>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        var gFlag = false;
        function drawGraphic() {
            var c = document.getElementById("mycanvas");
            console.log("c ", c);
            var ctx = c.getContext("2d");
            ctx.clearRect(0, 0, c.clientWidth, c.clientHeight);

            if (gFlag) {
                //繪製圓形
                ctx.save()
                ctx.beginPath();
                ctx.arc(100, 50, 50, 0, 2 * Math.PI);
                // ctx.fill(); //填充
                ctx.closePath();
                ctx.stroke();
                ctx.restore();

                //實心文字
                ctx.save();
                ctx.font = "30px Arial";
                ctx.fillText("實心你們好啊", 180, 50);
                //空心文字
                ctx.fillStyle = "#0000ff";
                ctx.font = "50px Arial";
                ctx.strokeText("空心你們好啊", 180, 80);
                ctx.restore();
            } else {

                for (var i = 0; i < 3; i++) {
                    ctx.save();
                    ctx.translate(20 + 60 * i, 10);
                    var colors = ["#ff000", "#00ff00", "#0000ff"];
                    ctx.strokeStyle = colors[i];
                    ctx.rotate(i * (Math.PI / 180 * 30));
                    ctx.strokeRect(0, 0, 50, 20);
                    ctx.restore()
                }

                //繪製線    
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(100, 20);
                ctx.lineTo(150, 50);
                ctx.lineTo(150, 20);
                ctx.closePath(); //加了這個就閉合
                ctx.stroke();
                ctx.restore();
            }

            gFlag = !gFlag;
        }

        var timer = setInterval(function () {
            drawGraphic();
        }, 2000);
    </script>

</body>

</html>

python寫了個伺服器來測試html的表單提交功能

# coding=utf-8

from flask import Flask, request, jsonify
import urllib

fserver = Flask(__name__)


@fserver.route("/get/ret", methods=["GET", "POST"])
def getResult():
    data = request.get_data()
    print("header {}".format(request.headers))
    print("data = {}".format(data))

    text = data.decode("utf-8")
    print("text = {}".format(text))

    sp = text.split("&")
    print("sp = {}".format(sp))
    print("urllib text = {}".format(urllib.parse.unquote(text,encoding="utf-8")))

    info = {}
    info["name"] = "我的名字"
    info["age"] = 8329
    return jsonify(info)


if __name__ == "__main__":
    fserver.config["JSON_AS_ASCII"] = False
    fserver.run(host='0.0.0.0', port=9090)

在pic目錄下放上對應的圖片和視訊

雙擊開啟html看到瀏覽器結果：

 

相關文章