网络教学直播
大三下综合项目实践：网络直播教学
部分网页效果及代码以下
登陆页面
Login.html
javascript
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登陆页面</title> <style> .input_shadow{ width:175px; height:25px; background-color:rgb(255, 255, 255); box-shadow: 3px 5px 6px #5e5e5e; border-radius:15px } .input-label{ float:left } .input-box{ height:25px; width:175px; background-color:rgb(199, 199, 199); border:0px; border-radius:15px; } .input-labelandbox1{ display: flex; position:absolute; left:75px; top: 60px } .input-labelandbox2{ display: flex; position:absolute; left:75px; top: 145px } .button{ height:25px; width:115px; background-color:rgb(0, 0, 0); border:0px; border-radius:15px; color:rgb(255, 255, 255); font-family: "YouYuan" } .button_shadow1{ width:115px; height:25px; background-color:rgb(255, 255, 255); box-shadow: 3px 3px 3px #5e5e5e; border-radius:15px; position: absolute; left:95px; top: 230px } .button_shadow2{ width:115px; height:25px; background-color:rgb(255, 255, 255); box-shadow: 3px 3px 3px #5e5e5e; border-radius:15px; position: absolute; left:240px; top: 230px } body,p{margin: 0;} </style> </head> <body background="/static/pc01.jpg" style=" background-repeat:no-repeat; background-size:100% 100%; background-attachment: fixed;"> <div style="position:relative;top:40px;text-align:center"> <font size="12" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:900">叮叮课堂</font> </div> <div style="position: relative; top: 150px; left:950px; width:450px; height:300px; background-color:rgb(255, 255, 255); box-shadow: 3px 5px 6px #5e5e5e; border-radius:15px"> <form method="POST" action="/login" id="login" οnsubmit="return register()"> <div class="input-labelandbox1"> <div> <font size="5" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:400">用户名：</font> </div> <div class="input_shadow"> <input type='text' name="username" class="input-box"> </div> </div> <div class="input-labelandbox2"> <div> <font size="5" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:400">密 码：</font> </div> <div class="input_shadow"> <input type='text' name="password" class="input-box"> </div> </div> <div style="display: flex"> <div class="button_shadow1"> <input type="submit" name="login" value="登陆" class="button"> </div> <div class="button_shadow2"> <a href="http://127.0.0.1:8888/register"> <input type="button" name="register" value="注册" οnclick="register()" class="button"> </a> </div> </div> </form> </div> <script> function register(){ window.location.href = "http://127.0.0.1:8888/register/"; } </script> </body> </html>
注册页面
Register.html
css
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> <style> .input_shadow{ width:175px; height:25px; background-color:rgb(255, 255, 255); box-shadow: 3px 5px 6px #5e5e5e; border-radius:15px } .input-label{ float:left } .input-box{ height:25px; width:175px; background-color:rgb(199, 199, 199); border:0px; border-radius:15px; } .input-labelandbox1{ display: flex; position:absolute; left:65px; top: 35px } .input-labelandbox2{ display: flex; position:absolute; left:65px; top: 100px } .input-labelandbox3{ display: flex; position:absolute; left:65px; top: 165px } .button{ height:25px; width:230px; background-color:rgb(0, 0, 0); border:0px; border-radius:15px; color:rgb(255, 255, 255); font-family: "YouYuan" } .button_shadow{ width:230px; height:25px; background-color:rgb(255, 255, 255); box-shadow: 3px 3px 3px #5e5e5e; border-radius:15px; position: absolute; left:110px; top: 230px } body,p{margin: 0;} </style> </head> <body background="/static/pc01.jpg" style=" background-repeat:no-repeat; background-size:100% 100%; background-attachment: fixed;"> <div style="display: flex; position: absolute; left:10px; top: 10px"> <div> <svg t="1590063098904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3484" width="35" height="35"> <path d="M427.136 377.088c0-15.296 10.816-21.504 24.064-13.888l228.224 131.776c13.248 7.616 13.248 20.16 0 27.776L451.2 654.528c-13.248 7.616-24.064 1.408-24.064-13.888V377.088z" fill="#070001" p-id="3485"></path> <path d="M821.12 574.72c19.072-99.584-1.728-188.864-68.672-265.152-57.856-65.92-132.096-100.224-219.776-102.208a301.248 301.248 0 0 0-308.8 308.736c4.672 182.336 171.84 323.392 360.576 287.936v42.88c0 6.592-0.384 13.184 0.128 19.712 0.384 4.544-1.792 5.312-5.312 5.824a374.144 374.144 0 0 1-74.24 3.264 355.904 355.904 0 0 1-160.192-46.72c-97.792-56.64-159.488-140.16-181.248-251.264-37.632-192.704 84.48-380.672 275.648-426.176a368.64 368.64 0 0 1 443.52 267.136c12.8 50.048 14.4 100.608 6.144 151.552-0.32 2.048 0 4.608-3.52 4.608-21.44-0.192-42.816-0.128-64.256-0.128z" fill="#070001" p-id="3486"></path> <path d="M525.76 892.288c-7.168 0-14.4-0.256-21.632-0.64a373.888 373.888 0 0 1-167.232-48.832c-103.04-59.776-166.656-147.968-188.928-262.144a381.248 381.248 0 0 1 287.616-444.672 384.384 384.384 0 0 1 462.656 278.72c13.056 50.88 15.232 104.064 6.528 158.08a18.88 18.88 0 0 1-19.392 18.048l-83.648-0.128 3.712-19.008c18.56-96.64-3.328-181.312-64.96-251.584-54.72-62.336-124.736-94.848-208.192-96.768l-6.72-0.128a283.392 283.392 0 0 0-204.672 86.08 283.072 283.072 0 0 0-81.024 206.4c3.968 153.216 132.288 277.824 286.208 277.824 18.368 0 37.056-1.728 55.488-5.248l18.944-3.584-0.064 68.544c-0.128 4.032-0.192 8 0.128 12.032 0.832 9.728-3.776 20.864-19.008 22.976a394.496 394.496 0 0 1-55.808 4.032z m0.064-734.976c-27.776 0-55.616 3.264-82.88 9.792a349.568 349.568 0 0 0-263.616 407.552c20.48 104.768 78.912 185.664 173.568 240.576a341.824 341.824 0 0 0 153.152 44.48c20.48 1.344 41.28 0.576 62.4-1.92l0.064-5.12 0.064-29.888a338.944 338.944 0 0 1-42.432 2.752c-171.072 0-313.792-138.624-318.208-308.992a314.816 314.816 0 0 1 89.984-229.568 315.392 315.392 0 0 1 227.648-95.744l7.488 0.128c92.736 2.112 170.624 38.336 231.424 107.648 64.448 73.408 89.792 160.704 75.584 259.712l34.432 0.064c6.4-47.616 3.904-92.8-7.232-136.128a352.512 352.512 0 0 0-341.44-265.344z" fill="#070001" p-id="3487"></path> <path d="M814.528 769.472c0 35.904-0.064 71.808 0.128 107.712 0 4.16-0.96 5.44-5.248 5.376a1639.168 1639.168 0 0 0-50.176 0c-4.352 0.064-5.312-1.344-5.248-5.44 0.128-71.232 0.064-142.464 0.128-213.696 0-13.312 7.68-20.928 20.992-20.992h20.288c12.096 0.128 19.2 7.232 19.264 19.392-0.128 35.84-0.128 71.744-0.128 107.648z" fill="#070001" p-id="3488"></path> <path d="M714.048 809.472c0 22.528-0.128 45.12 0.064 67.648 0.064 4.096-0.832 5.504-5.248 5.44a1955.456 1955.456 0 0 0-51.264 0c-3.392 0.064-4.48-0.832-4.48-4.352 0.128-45.248 0-90.56 0.128-135.808 0-12.224 8.384-20.48 20.544-20.736 5.824-0.128 11.648-0.064 17.472 0 15.936 0 22.72 6.72 22.72 22.528 0.128 21.696 0.064 43.456 0.064 65.28z" fill="#070001" p-id="3489"></path> <path d="M916.032 840.64c0 12.224-0.128 24.448 0.064 36.672 0.064 3.648-0.576 5.312-4.8 5.248a1960.32 1960.32 0 0 0-51.328 0c-3.84 0.064-4.672-1.28-4.672-4.864 0.128-24.256 0-48.512 0.128-72.704 0.064-14.208 8.768-22.784 22.784-22.784h15.232a22.464 22.464 0 0 1 22.592 22.4v36.032z" fill="#070001" p-id="3490"></path> </svg> </div> <div style="text-align:left"> <font size="6" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:900">叮叮课堂</font> </div> </div> <div style="position: relative; top: 150px; left:950px; width:450px; height:300px; background-color:rgb(255, 255, 255); box-shadow: 3px 5px 6px #5e5e5e; border-radius:15px"> <form method="POST" action="/register" id="register" οnsubmit="return checkRegisterForm()"> <div class="input-labelandbox1"> <div> <font size="5" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:400">新用户名：</font> </div> <div class="input_shadow"> <input type='text' name="username" id="username" class="input-box"> </div> </div> <div class="input-labelandbox2"> <div> <font size="5" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:400">密 码：</font> </div> <div class="input_shadow"> <input type='text' name="password" id="password" class="input-box"> </div> </div> <div class="input-labelandbox3"> <div> <font size="5" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:400">确认密码：</font> </div> <div class="input_shadow"> <input type='text' name="confirm_password" id="confirm_password" class="input-box"> </div> </div> <div style="display: flex; position:absolute; left:95px; top: 200px"> <div> <font size="1" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:400">点击注册即表示您已赞成叮叮直播的相关</font> </div> <div> <a href="/eggs" style="color:rgb(0, 120, 215); font-size:10px; font-family:YouYuan">服务条款</a> </div> <div> <font size="1" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:400">和</font> </div> <div> <a href="/eggs" style="color:rgb(0, 120, 215); font-size:10px; font-family:YouYuan">隐私政策</a> </div> </div> <div style="display: flex"> <div class="button_shadow"> <input type="submit" name="login" value="注册" class="button"> </div> <div style="position: absolute; left:360px; top: 230px;"> <a href="/teacherregister" style="color:rgb(0, 120, 215); font-size:12px;font-family:YouYuan">注册教师帐号</a> </div> </div> </form> </div> <script> function checkRegisterForm(){ var username=document.getElementById("username"); var password=document.getElementById("password"); var confirmpassword=document.getElementById("confirm_password"); if(username.value==""||password.value=="" ||confirmpassword.value==""){ alert("输入不能为空！"); return false; } else{ if(password.value!=confirmpassword.value){ alert("密码有误，请确认你的密码！"); return false; } else{ return true; } } } </script> </body> </html>
主页面
Homepage.html
html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>主页</title> <style> .button{ height:25px; width:100px; font-size:20px; background-color:rgb(255, 255, 255); border:0px; border-radius:15px; color:rgb(0, 0, 0); font-family: "YouYuan" } .select{ position: relative; left:1020px; top:7px; display: inline-block; width: 100px; height: 30px; padding: 0; overflow: hidden; background-color: #fff; color: #555; border: 1px solid #aaa; text-shadow: none; border-radius: 6px; transition: box-shadow 0.25s ease; z-index: 2; } .select:hover { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); } .select:before { content: ""; position: absolute; width: 0; height: 0; border: 10px solid transparent; border-top-color: #ccc; top: 14px; right: 10px; cursor: pointer; z-index: -2; } .select select { cursor: pointer; padding: 6px; width: 100%; border: none; background: transparent; background-image: none; -webkit-appearance: none; -moz-appearance: none; } .select select:focus { outline: none; } .top{ float: left; position: relative; top: 20px; margin-left: 60px; margin-top: 35px; height: 250px; width: 180px; border-radius:15px; box-shadow: 3px 3px 3px #5e5e5e; background-color:rgb(255, 255, 255); } .img{ width: 100%; height:70%; border-top-left-radius:15px; border-top-right-radius:15px; } .screen{ width:9999px; height:250px; animation:16s donghua infinite; } .screen img{ width: 1500px; height:100%; float:left; margin-top:0px; } .tv{ position: relative; top: 50px; width:1500px; height:250px; overflow:hidden; border:solid; margin:10px auto; } @keyframes donghua { 0%{} 25%{transform:translatex(0px);} 35%{transform:translatex(-1500px);} 50%{transform:translatex(-1500px);} 60%{transform:translatex(-3000px);} 75%{transform:translatex(-3000px);} 85%{transform:translatex(-4500px);} 100%{transform:translatex(-4500px);} } body,p{margin: 0;} </style> </head> <body> <div style="display: flex; position: absolute; left:10px; top: 10px"> <div> <svg t="1590063098904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3484" width="35" height="35"> <path d="M427.136 377.088c0-15.296 10.816-21.504 24.064-13.888l228.224 131.776c13.248 7.616 13.248 20.16 0 27.776L451.2 654.528c-13.248 7.616-24.064 1.408-24.064-13.888V377.088z" fill="#070001" p-id="3485"></path> <path d="M821.12 574.72c19.072-99.584-1.728-188.864-68.672-265.152-57.856-65.92-132.096-100.224-219.776-102.208a301.248 301.248 0 0 0-308.8 308.736c4.672 182.336 171.84 323.392 360.576 287.936v42.88c0 6.592-0.384 13.184 0.128 19.712 0.384 4.544-1.792 5.312-5.312 5.824a374.144 374.144 0 0 1-74.24 3.264 355.904 355.904 0 0 1-160.192-46.72c-97.792-56.64-159.488-140.16-181.248-251.264-37.632-192.704 84.48-380.672 275.648-426.176a368.64 368.64 0 0 1 443.52 267.136c12.8 50.048 14.4 100.608 6.144 151.552-0.32 2.048 0 4.608-3.52 4.608-21.44-0.192-42.816-0.128-64.256-0.128z" fill="#070001" p-id="3486"></path> <path d="M525.76 892.288c-7.168 0-14.4-0.256-21.632-0.64a373.888 373.888 0 0 1-167.232-48.832c-103.04-59.776-166.656-147.968-188.928-262.144a381.248 381.248 0 0 1 287.616-444.672 384.384 384.384 0 0 1 462.656 278.72c13.056 50.88 15.232 104.064 6.528 158.08a18.88 18.88 0 0 1-19.392 18.048l-83.648-0.128 3.712-19.008c18.56-96.64-3.328-181.312-64.96-251.584-54.72-62.336-124.736-94.848-208.192-96.768l-6.72-0.128a283.392 283.392 0 0 0-204.672 86.08 283.072 283.072 0 0 0-81.024 206.4c3.968 153.216 132.288 277.824 286.208 277.824 18.368 0 37.056-1.728 55.488-5.248l18.944-3.584-0.064 68.544c-0.128 4.032-0.192 8 0.128 12.032 0.832 9.728-3.776 20.864-19.008 22.976a394.496 394.496 0 0 1-55.808 4.032z m0.064-734.976c-27.776 0-55.616 3.264-82.88 9.792a349.568 349.568 0 0 0-263.616 407.552c20.48 104.768 78.912 185.664 173.568 240.576a341.824 341.824 0 0 0 153.152 44.48c20.48 1.344 41.28 0.576 62.4-1.92l0.064-5.12 0.064-29.888a338.944 338.944 0 0 1-42.432 2.752c-171.072 0-313.792-138.624-318.208-308.992a314.816 314.816 0 0 1 89.984-229.568 315.392 315.392 0 0 1 227.648-95.744l7.488 0.128c92.736 2.112 170.624 38.336 231.424 107.648 64.448 73.408 89.792 160.704 75.584 259.712l34.432 0.064c6.4-47.616 3.904-92.8-7.232-136.128a352.512 352.512 0 0 0-341.44-265.344z" fill="#070001" p-id="3487"></path> <path d="M814.528 769.472c0 35.904-0.064 71.808 0.128 107.712 0 4.16-0.96 5.44-5.248 5.376a1639.168 1639.168 0 0 0-50.176 0c-4.352 0.064-5.312-1.344-5.248-5.44 0.128-71.232 0.064-142.464 0.128-213.696 0-13.312 7.68-20.928 20.992-20.992h20.288c12.096 0.128 19.2 7.232 19.264 19.392-0.128 35.84-0.128 71.744-0.128 107.648z" fill="#070001" p-id="3488"></path> <path d="M714.048 809.472c0 22.528-0.128 45.12 0.064 67.648 0.064 4.096-0.832 5.504-5.248 5.44a1955.456 1955.456 0 0 0-51.264 0c-3.392 0.064-4.48-0.832-4.48-4.352 0.128-45.248 0-90.56 0.128-135.808 0-12.224 8.384-20.48 20.544-20.736 5.824-0.128 11.648-0.064 17.472 0 15.936 0 22.72 6.72 22.72 22.528 0.128 21.696 0.064 43.456 0.064 65.28z" fill="#070001" p-id="3489"></path> <path d="M916.032 840.64c0 12.224-0.128 24.448 0.064 36.672 0.064 3.648-0.576 5.312-4.8 5.248a1960.32 1960.32 0 0 0-51.328 0c-3.84 0.064-4.672-1.28-4.672-4.864 0.128-24.256 0-48.512 0.128-72.704 0.064-14.208 8.768-22.784 22.784-22.784h15.232a22.464 22.464 0 0 1 22.592 22.4v36.032z" fill="#070001" p-id="3490"></path> </svg> </div> <div> <font size="6" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:900">叮叮课堂</font> </div> <div style="position: relative; left:1000px; top: 10px;"> <a href="http://127.0.0.1:8888/personalcenter?name={{name}}"> <input type="button" name="personalcenter" value="我的中心" οnclick="personalcenter()" class="button"> </a> </div> <div style="position: relative; left:1010px; top: 12px;"> <font face="YouYuan" style="color:rgb(0, 0, 0); font-weight:200; font-size:20px;">个人课程</font> </div> <div class="select"> <select id="SelectClass"> <option value="课程1">课程1</option> <option value="课程2">课程2</option> <option value="课程3">课程3</option> </select> </div> </div> <div class="tv"> <div class="screen"> <img src="/static/轮播1.PNG" /> <img src="/static/轮播2.PNG" /> <img src="/static/轮播3.PNG" /> <img src="/static/轮播4.PNG" /> </div> </div> {% for p in class_info%} <a href="/video?name={{name}}&classname={{p}}"> <div class="top"> <img class="img" src="/static/1.PNG"> <div style="position:absolute; left:10px; top: 180px"> <font size="4" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:200">{{p}}</font> </div> <div style="position:absolute; left:130px; top: 220px"> <svg t="1590399470184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9006" width="15" height="15"> <path d="M1004.311166 747.633798c-9.754101-96.818487-68.639972-181.354031-155.343094-223.983066 29.623567-23.301464 51.841242-54.189451 64.485447-89.954489 14.269889-40.461457 15.173046-83.451755 2.709473-124.635739-12.644205-41.003352-37.390721-76.226495-71.891339-101.695537-34.500617-25.469042-75.323337-39.016405-118.313636-39.016405-15.353678 0-30.707356 1.986947-47.325454 5.96084l-13.908626 3.251367 9.57347 10.476627c13.547363 14.631152 25.469042 30.887987 35.584406 48.228612l2.528841 4.335156 5.057683-0.180631c1.625684 0 3.251367-0.361263 4.696419-0.541895 1.445052-0.180632 2.709473-0.361263 3.793261-0.361263 34.139354 0 66.291762 13.366731 90.315753 37.390722 24.204622 24.204622 37.390721 56.176398 37.390721 90.315752s-13.1861 66.291762-37.390721 90.496384c-24.204622 24.204622-56.176398 37.390721-90.315753 37.390721-1.264421 0-2.709473-0.180632-4.515787-0.361263-1.264421-0.180632-2.528841-0.361263-3.793262-0.361263l-5.238314-0.361263-2.528841 4.515788c-11.018522 19.146939-24.385253 37.029458-39.919562 52.925031l-18.966308 19.508202 26.552831-5.599576c14.269889-3.070736 28.720409-4.515788 42.809667-4.515788 108.01764 0 197.610866 81.103546 208.448756 188.579291l0.722526 7.405892H1004.130534v-8.30905l0.180632-0.903157z" p-id="9007"></path><path d="M800.920092 834.517552c-13.366731-40.100194-33.055565-77.852179-58.343976-111.810902-25.288411-34.139354-55.453872-63.762921-89.95449-88.328806-30.526724-21.675781-63.762921-39.016405-98.986064-51.479978 47.686717-32.152408 84.174281-77.129652 106.211325-130.77721 24.204622-59.427765 27.997883-123.371318 11.199153-185.147292s-52.744399-115.062268-103.501852-153.898042c-50.938084-38.835774-111.63027-59.427765-175.754454-59.427765-65.388605 0.180632-129.69342 22.75957-180.631505 63.762921-51.118716 41.003352-87.064385 98.624802-101.334274 162.568354-14.269889 63.943553-6.322103 131.499735 22.217675 190.204975 26.010937 53.466925 68.45934 97.902276 120.300582 126.622684-67.19492 30.887987-124.274475 79.297231-165.819721 140.892574-45.157876 66.472394-68.820603 143.963309-68.820604 224.344329v8.309049h67.556183v-8.309049c0-1.264421 0-2.34821-0.180631-3.431999 0-0.903158-0.180632-1.625684-0.180632-2.167578 0-181.534662 147.575939-329.291233 328.92997-329.471864 181.354031 0 328.92997 147.756571 328.92997 329.291233 0 0.722526 0 1.445052-0.180631 2.348209 0 1.083789-0.180632 2.167578-0.180632 3.251367v8.30905h79.116599v-8.30905c0-43.351561-6.863997-86.341859-20.591991-127.34521zM608.366908 343.199859c0 119.578056-97.17975 216.757806-216.757806 216.757805s-216.757806-97.17975-216.757805-216.757805 97.17975-216.757806 216.757805-216.757806 216.757806 97.17975 216.757806 216.757806z" p-id="9008"></path> </svg> </div> <div style="position:absolute; left:145px; top: 219px"> <font size="3" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:200">43</font> </div> </div> </a> {% end %} </body> </html> <script type="text/javascript"> //一、先用js获取到div的内容 document.getElementsByClassName('top').innerHTML; var re = ""; var tu = 1; var l = $,{length0}; for (var i = 0; i < l; i++) { tu++; re += '<div class="top">' + '<img class="img" src="/static/'+tu+'.PNG">' + '<div style="position:absolute; left:10px; top: 180px">'+ '<font size="4" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:200">大学英语词汇解析</font>'+ '</div>'+ '<div style="position:absolute; left:130px; top: 220px">'+ '<svg t="1590399470184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9006" width="15" height="15">'+ '<path d="M1004.311166 747.633798c-9.754101-96.818487-68.639972-181.354031-155.343094-223.983066 29.623567-23.301464 51.841242-54.189451 64.485447-89.954489 14.269889-40.461457 15.173046-83.451755 2.709473-124.635739-12.644205-41.003352-37.390721-76.226495-71.891339-101.695537-34.500617-25.469042-75.323337-39.016405-118.313636-39.016405-15.353678 0-30.707356 1.986947-47.325454 5.96084l-13.908626 3.251367 9.57347 10.476627c13.547363 14.631152 25.469042 30.887987 35.584406 48.228612l2.528841 4.335156 5.057683-0.180631c1.625684 0 3.251367-0.361263 4.696419-0.541895 1.445052-0.180632 2.709473-0.361263 3.793261-0.361263 34.139354 0 66.291762 13.366731 90.315753 37.390722 24.204622 24.204622 37.390721 56.176398 37.390721 90.315752s-13.1861 66.291762-37.390721 90.496384c-24.204622 24.204622-56.176398 37.390721-90.315753 37.390721-1.264421 0-2.709473-0.180632-4.515787-0.361263-1.264421-0.180632-2.528841-0.361263-3.793262-0.361263l-5.238314-0.361263-2.528841 4.515788c-11.018522 19.146939-24.385253 37.029458-39.919562 52.925031l-18.966308 19.508202 26.552831-5.599576c14.269889-3.070736 28.720409-4.515788 42.809667-4.515788 108.01764 0 197.610866 81.103546 208.448756 188.579291l0.722526 7.405892H1004.130534v-8.30905l0.180632-0.903157z" p-id="9007"></path><path d="M800.920092 834.517552c-13.366731-40.100194-33.055565-77.852179-58.343976-111.810902-25.288411-34.139354-55.453872-63.762921-89.95449-88.328806-30.526724-21.675781-63.762921-39.016405-98.986064-51.479978 47.686717-32.152408 84.174281-77.129652 106.211325-130.77721 24.204622-59.427765 27.997883-123.371318 11.199153-185.147292s-52.744399-115.062268-103.501852-153.898042c-50.938084-38.835774-111.63027-59.427765-175.754454-59.427765-65.388605 0.180632-129.69342 22.75957-180.631505 63.762921-51.118716 41.003352-87.064385 98.624802-101.334274 162.568354-14.269889 63.943553-6.322103 131.499735 22.217675 190.204975 26.010937 53.466925 68.45934 97.902276 120.300582 126.622684-67.19492 30.887987-124.274475 79.297231-165.819721 140.892574-45.157876 66.472394-68.820603 143.963309-68.820604 224.344329v8.309049h67.556183v-8.309049c0-1.264421 0-2.34821-0.180631-3.431999 0-0.903158-0.180632-1.625684-0.180632-2.167578 0-181.534662 147.575939-329.291233 328.92997-329.471864 181.354031 0 328.92997 147.756571 328.92997 329.291233 0 0.722526 0 1.445052-0.180631 2.348209 0 1.083789-0.180632 2.167578-0.180632 3.251367v8.30905h79.116599v-8.30905c0-43.351561-6.863997-86.341859-20.591991-127.34521zM608.366908 343.199859c0 119.578056-97.17975 216.757806-216.757806 216.757805s-216.757806-97.17975-216.757805-216.757805 97.17975-216.757806 216.757805-216.757806 216.757806 97.17975 216.757806 216.757806z" p-id="9008"></path>'+ '</svg>'+ '</div>'+ '<div style="position:absolute; left:145px; top: 219px">'+ '<font size="3" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:200">43</font>'+ '</div>'+ '</div>'; } document.writeln(re); function personalcenter(){ location = "http://127.0.0.1:8888/personalcenter?name={{name}}"; } window.οnlοad=function(){ var value=document.getElementById("SelectClass"); location = "http://127.0.0.1:8888/LivePage/"+username+"/"+value; } </script>
我的中心
PersonalCenter.html
java
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的中心</title> <style> .top{ float: left; position: relative; top: 100px; margin-left: 60px; margin-top: 35px; height: 250px; width: 180px; border-radius:15px; box-shadow: 3px 3px 3px #5e5e5e; background-color:rgb(255, 255, 255); } .img{ width: 100%; height:70%; border-top-left-radius:15px; border-top-right-radius:15px; } .input_shadow{ width:175px; height:25px; background-color:rgb(255, 255, 255); box-shadow: 3px 5px 6px #5e5e5e; border-radius:15px; position:absolute; top:120px; left:100px } .input-box{ height:25px; width:175px; background-color:rgb(199, 199, 199); border:0px; border-radius:15px; } .button{ height:40px; width:400px; background-color:rgb(0, 0, 0); border:0px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; color:rgb(255, 255, 255); font-family: "YouYuan"; font-size:18px } .button1{ height:25px; width:150px; font-size:20px; background-color:rgb(255, 255, 255); border:0px; border-radius:15px; color:rgb(0, 0, 0); font-family: "YouYuan" } .button_shadow{ width:400px; height:40px; background-color:rgb(255, 255, 255); box-shadow: 3px 3px 3px #5e5e5e; border-bottom-left-radius:15px; border-bottom-right-radius:15px; position: absolute; left:0px; top: 210px } body,p{margin: 0;} </style> </head> <body background="/static/pc01.jpg" style=" background-repeat:no-repeat; background-size:100% 100%; background-attachment: fixed;"> <div style="display: flex; position: absolute; left:10px; top: 10px"> <div> <svg t="1590063098904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3484" width="35" height="35"> <path d="M427.136 377.088c0-15.296 10.816-21.504 24.064-13.888l228.224 131.776c13.248 7.616 13.248 20.16 0 27.776L451.2 654.528c-13.248 7.616-24.064 1.408-24.064-13.888V377.088z" fill="#070001" p-id="3485"></path> <path d="M821.12 574.72c19.072-99.584-1.728-188.864-68.672-265.152-57.856-65.92-132.096-100.224-219.776-102.208a301.248 301.248 0 0 0-308.8 308.736c4.672 182.336 171.84 323.392 360.576 287.936v42.88c0 6.592-0.384 13.184 0.128 19.712 0.384 4.544-1.792 5.312-5.312 5.824a374.144 374.144 0 0 1-74.24 3.264 355.904 355.904 0 0 1-160.192-46.72c-97.792-56.64-159.488-140.16-181.248-251.264-37.632-192.704 84.48-380.672 275.648-426.176a368.64 368.64 0 0 1 443.52 267.136c12.8 50.048 14.4 100.608 6.144 151.552-0.32 2.048 0 4.608-3.52 4.608-21.44-0.192-42.816-0.128-64.256-0.128z" fill="#070001" p-id="3486"></path> <path d="M525.76 892.288c-7.168 0-14.4-0.256-21.632-0.64a373.888 373.888 0 0 1-167.232-48.832c-103.04-59.776-166.656-147.968-188.928-262.144a381.248 381.248 0 0 1 287.616-444.672 384.384 384.384 0 0 1 462.656 278.72c13.056 50.88 15.232 104.064 6.528 158.08a18.88 18.88 0 0 1-19.392 18.048l-83.648-0.128 3.712-19.008c18.56-96.64-3.328-181.312-64.96-251.584-54.72-62.336-124.736-94.848-208.192-96.768l-6.72-0.128a283.392 283.392 0 0 0-204.672 86.08 283.072 283.072 0 0 0-81.024 206.4c3.968 153.216 132.288 277.824 286.208 277.824 18.368 0 37.056-1.728 55.488-5.248l18.944-3.584-0.064 68.544c-0.128 4.032-0.192 8 0.128 12.032 0.832 9.728-3.776 20.864-19.008 22.976a394.496 394.496 0 0 1-55.808 4.032z m0.064-734.976c-27.776 0-55.616 3.264-82.88 9.792a349.568 349.568 0 0 0-263.616 407.552c20.48 104.768 78.912 185.664 173.568 240.576a341.824 341.824 0 0 0 153.152 44.48c20.48 1.344 41.28 0.576 62.4-1.92l0.064-5.12 0.064-29.888a338.944 338.944 0 0 1-42.432 2.752c-171.072 0-313.792-138.624-318.208-308.992a314.816 314.816 0 0 1 89.984-229.568 315.392 315.392 0 0 1 227.648-95.744l7.488 0.128c92.736 2.112 170.624 38.336 231.424 107.648 64.448 73.408 89.792 160.704 75.584 259.712l34.432 0.064c6.4-47.616 3.904-92.8-7.232-136.128a352.512 352.512 0 0 0-341.44-265.344z" fill="#070001" p-id="3487"></path> <path d="M814.528 769.472c0 35.904-0.064 71.808 0.128 107.712 0 4.16-0.96 5.44-5.248 5.376a1639.168 1639.168 0 0 0-50.176 0c-4.352 0.064-5.312-1.344-5.248-5.44 0.128-71.232 0.064-142.464 0.128-213.696 0-13.312 7.68-20.928 20.992-20.992h20.288c12.096 0.128 19.2 7.232 19.264 19.392-0.128 35.84-0.128 71.744-0.128 107.648z" fill="#070001" p-id="3488"></path> <path d="M714.048 809.472c0 22.528-0.128 45.12 0.064 67.648 0.064 4.096-0.832 5.504-5.248 5.44a1955.456 1955.456 0 0 0-51.264 0c-3.392 0.064-4.48-0.832-4.48-4.352 0.128-45.248 0-90.56 0.128-135.808 0-12.224 8.384-20.48 20.544-20.736 5.824-0.128 11.648-0.064 17.472 0 15.936 0 22.72 6.72 22.72 22.528 0.128 21.696 0.064 43.456 0.064 65.28z" fill="#070001" p-id="3489"></path> <path d="M916.032 840.64c0 12.224-0.128 24.448 0.064 36.672 0.064 3.648-0.576 5.312-4.8 5.248a1960.32 1960.32 0 0 0-51.328 0c-3.84 0.064-4.672-1.28-4.672-4.864 0.128-24.256 0-48.512 0.128-72.704 0.064-14.208 8.768-22.784 22.784-22.784h15.232a22.464 22.464 0 0 1 22.592 22.4v36.032z" fill="#070001" p-id="3490"></path> </svg> </div> <div style="text-align:left"> <font size="6" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:900">叮叮课堂</font> </div> <div style="position: relative; left:1200px; top: 10px;"> <a href="http://127.0.0.1:8888/homepage?name={{name}}"> <input type="button" name="personalcenter" value=">>>返回主页" οnclick="personalcenter()" class="button1"> </a> </div> </div> <div style="position: relative;left: 20px;top: 80px; width:400px; height:250px; background-color:rgb(255, 255, 255); box-shadow: 3px 5px 6px #5e5e5e; border-radius:15px"> <div style="position: absolute; top:50px; left:20px"> <svg t="1590591742616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14905" width="80" height="80"> <path d="M882.6 325V135.8c0-39.6-32.2-71.8-71.8-71.8H213.2c-39.6 0-71.8 32.2-71.8 71.8v752.4c0 39.6 32.2 71.8 71.8 71.8h597.5c39.6 0 71.8-32.2 71.8-71.8V699c0-20.7-16.7-37.4-37.4-37.4s-37.4 16.7-37.4 37.4v186.1H416.1V138.8h391.6V325c0 20.7 16.7 37.4 37.4 37.4s37.5-16.8 37.5-37.4zM341.3 885.2h-125V138.8h125.1v746.4z" p-id="14906"></path> <path d="M669.6 697.7c20.7 0 37.4-16.7 37.4-37.4V549.4h110.9c20.7 0 37.4-16.7 37.4-37.4s-16.7-37.4-37.4-37.4H707V363.7c0-20.7-16.7-37.4-37.4-37.4s-37.4 16.7-37.4 37.4v110.9H521.3c-20.7 0-37.4 16.7-37.4 37.4s16.7 37.4 37.4 37.4h110.9v110.9c-0.1 20.7 16.7 37.4 37.4 37.4z" p-id="14907"></path> </svg> </div> <form method="POST" action="/personalcenter?name={{name}}" id="personalcenter" οnsubmit="return CheckAppendForm()"> <div style="position:absolute;top:60px;left:100px"> <font size="5" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:400">添加课程：</font> </div> <div class="input_shadow"> <input type='text' name="classname" id="classname" class="input-box"> </div> <div class="button_shadow"> <input type="submit" name="create" value="添加" class="button"> </div> </form> </div> {% for p in student_course%} <a href="/video?name={{name}}&classname={{p}}"> <div class="top"> <img class="img" src="/static/1.PNG"> <div style="position:absolute; left:10px; top: 180px"> <font size="4" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:200">{{p}}</font> </div> <div style="position:absolute; left:130px; top: 220px"> <svg t="1590399470184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9006" width="15" height="15"> <path d="M1004.311166 747.633798c-9.754101-96.818487-68.639972-181.354031-155.343094-223.983066 29.623567-23.301464 51.841242-54.189451 64.485447-89.954489 14.269889-40.461457 15.173046-83.451755 2.709473-124.635739-12.644205-41.003352-37.390721-76.226495-71.891339-101.695537-34.500617-25.469042-75.323337-39.016405-118.313636-39.016405-15.353678 0-30.707356 1.986947-47.325454 5.96084l-13.908626 3.251367 9.57347 10.476627c13.547363 14.631152 25.469042 30.887987 35.584406 48.228612l2.528841 4.335156 5.057683-0.180631c1.625684 0 3.251367-0.361263 4.696419-0.541895 1.445052-0.180632 2.709473-0.361263 3.793261-0.361263 34.139354 0 66.291762 13.366731 90.315753 37.390722 24.204622 24.204622 37.390721 56.176398 37.390721 90.315752s-13.1861 66.291762-37.390721 90.496384c-24.204622 24.204622-56.176398 37.390721-90.315753 37.390721-1.264421 0-2.709473-0.180632-4.515787-0.361263-1.264421-0.180632-2.528841-0.361263-3.793262-0.361263l-5.238314-0.361263-2.528841 4.515788c-11.018522 19.146939-24.385253 37.029458-39.919562 52.925031l-18.966308 19.508202 26.552831-5.599576c14.269889-3.070736 28.720409-4.515788 42.809667-4.515788 108.01764 0 197.610866 81.103546 208.448756 188.579291l0.722526 7.405892H1004.130534v-8.30905l0.180632-0.903157z" p-id="9007"></path><path d="M800.920092 834.517552c-13.366731-40.100194-33.055565-77.852179-58.343976-111.810902-25.288411-34.139354-55.453872-63.762921-89.95449-88.328806-30.526724-21.675781-63.762921-39.016405-98.986064-51.479978 47.686717-32.152408 84.174281-77.129652 106.211325-130.77721 24.204622-59.427765 27.997883-123.371318 11.199153-185.147292s-52.744399-115.062268-103.501852-153.898042c-50.938084-38.835774-111.63027-59.427765-175.754454-59.427765-65.388605 0.180632-129.69342 22.75957-180.631505 63.762921-51.118716 41.003352-87.064385 98.624802-101.334274 162.568354-14.269889 63.943553-6.322103 131.499735 22.217675 190.204975 26.010937 53.466925 68.45934 97.902276 120.300582 126.622684-67.19492 30.887987-124.274475 79.297231-165.819721 140.892574-45.157876 66.472394-68.820603 143.963309-68.820604 224.344329v8.309049h67.556183v-8.309049c0-1.264421 0-2.34821-0.180631-3.431999 0-0.903158-0.180632-1.625684-0.180632-2.167578 0-181.534662 147.575939-329.291233 328.92997-329.471864 181.354031 0 328.92997 147.756571 328.92997 329.291233 0 0.722526 0 1.445052-0.180631 2.348209 0 1.083789-0.180632 2.167578-0.180632 3.251367v8.30905h79.116599v-8.30905c0-43.351561-6.863997-86.341859-20.591991-127.34521zM608.366908 343.199859c0 119.578056-97.17975 216.757806-216.757806 216.757805s-216.757806-97.17975-216.757805-216.757805 97.17975-216.757806 216.757805-216.757806 216.757806 97.17975 216.757806 216.757806z" p-id="9008"></path> </svg> </div> <div style="position:absolute; left:145px; top: 219px"> <font size="3" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:200">43</font> </div> </div> </a> {% end %} <script> function checkAppendForm(){ var classname=document.getElementById("classname"); if(classname.value==""){ alert("输入不能为空！"); return false; } else{ return true; } } </script> </body> </html>
直播页面
Video.html
当前已实现屏幕共享，后续添加摄像头和白板演示等功能
web
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .mainwindow{ position:relative; left:680px; top:120px; height:540px; width:810px; border-radius:20px; box-shadow: 3px 5px 6px #5e5e5e; } .Video{ border-top-left-radius:20px; border-top-right-radius:20px; } #back{ margin: 0; background-size: 100% ; background-repeat: no-repeat; background-attachment: fixed; overflow: hidden; } .Button1{ position:absolute; left:0px; top:500px; font-size: 18px; color: white; height:40px; width:270px; background-color:rgb(0, 0, 0); border:0px; font-family: "YouYuan"; border-bottom-left-radius:20px; } .Button2{ position:absolute; left:270px; top:500px; font-size: 18px; color: white; height:40px; width:270px; background-color:rgb(0, 0, 0); border:0px; font-family: "YouYuan"; } .Button3{ position:absolute; left:540px; top:500px; font-size: 18px; color: white; height:40px; width:270px; background-color:rgb(0, 0, 0); border:0px; font-family: "YouYuan"; border-bottom-right-radius:20px; } .button{ height:40px; width:400px; background-color:rgb(0, 0, 0); border:0px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; color:rgb(255, 255, 255); font-family: "YouYuan"; font-size:18px } .button_shadow{ width:400px; height:40px; background-color:rgb(255, 255, 255); box-shadow: 3px 3px 3px #5e5e5e; border-bottom-left-radius:15px; border-bottom-right-radius:15px; position: absolute; left:0px; top: 210px } </style> </head> <body id="back"> <div class="mainwindow"> <input type="hidden" value="{{url}}" id="URL"> <video id="Myvideo" controls autoplay='autoplay' width="810px" height="500px" class="Video"> heool </video> <br/> <div> <button class="Button1" οnclick="flv_start()">开始</button> <button class="Button2" οnclick="flv_pause()">暂停</button> <button class="Button3" οnclick="flv_destroy()">中止</button> </div> </div> <script src="/static/flv.min.js"></script> <script> var url=document.getElementById('URL').value; var player = document.getElementById('Myvideo'); if (flvjs.isSupported()) { var flvPlayer = flvjs.createPlayer({ type: 'flv', "isLive": true, url: url }); flvPlayer.attachMediaElement(player); flvPlayer.load(); //加载 flvPlayer.play(); } function flv_start() { player.play(); } function flv_pause() { player.pause(); } function flv_destroy() { player.pause(); player.unload(); player.detachMediaElement(); player.destroy(); player = null; } </script> </body> </html>
白板演示界面
Canvas.html
canvas
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>白板演示</title> <style> *{ padding: 0; margin: 0; } html{ height: 100%; } #canvas{ background: #ffffff; cursor: url(brush.cur),auto; } #text{ width:18px; text-align: center; } .button1{ height:30px; width:100px; background-color:rgb(0, 0, 0); border:0px; border-radius:15px; box-shadow: 3px 3px 3px #5e5e5e; color:rgb(255, 255, 255); font-family: "YouYuan"; font-size:18px; margin: auto; top: 0; bottom: 0; } .button2{ height:30px; width:100px; background-color:rgb(0, 0, 0); border:0px; border-radius:5px; box-shadow: 3px 3px 3px #5e5e5e; margin: auto; top: 0; bottom: 0; } .button3{ height:30px; width:100px; background-color:rgb(0, 0, 0); color:rgb(255, 255, 255); border:0px; border-radius:5px; box-shadow: 3px 3px 3px #5e5e5e; font-family: "YouYuan"; font-size:18px; margin: auto; top: 0; bottom: 0; } </style> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("canvas"); var Context = canvas.getContext('2d'); //设置填充颜色 // Context.fillStyle = 'royalblue'; // //x,y, w,h 在那里开始画 // Context.fillRect(10,20,30,30); // // Context.fillStyle = 'red'; // Context.fillRect(100,20,30,30); //线条粗细 // Context.lineWidth = '10'; // //线条颜色 // Context.strokeStyle = '#fff'; // //绘制圆角 // Context.lineJoin = 'round'; // // 画位置，没有填充 // Context.strokeRect(100,100,200,200); // // //填充颜色 // Context.fillStyle = 'red'; // //填充到那里 // Context.fillRect(100,100,200,200); //-------------------------------------------------------------------- //画线 // Context.lineWidth = '10'; // //线的颜色 // Context.strokeStyle = 'yellow'; // // //准备画线 // Context.beginPath(); // //画线起始位置 // Context.moveTo(100,50); // //画线结束位置 // Context.lineTo(200,200); // //把2点链接起来 // Context.stroke(); //---------------------------------------------------------------- //画板 Context.lineWidth = '1'; Context.strokeStyle = '#fff'; canvas.onmousedown = function(e){ var e = e||window.event; // 得到鼠标按下是当前点的X轴的坐标 var starX = e.offsetX||e.layerX; // 得到鼠标按下是当前点的Y轴的坐标 var starY = e.offsetY||e.layerY; // console.log(starX+'|'+starY); //开始画线，起始位置 Context.beginPath(); //开始画画 Context.moveTo(starX,starY); //设置开始画画的xy坐标 就是上面鼠标按下时的位置 canvas.onmousemove = function(e) //、 给画板里 加 移动事件 { var e = e||window.event; var endx = e.offsetX||e.layerX; var endy = e.offsetY||e.layerY; Context.lineTo(endx,endy); //设置结束画画的xy 坐标， 就是 鼠标一直在画板里面 一直移动的获取的 x y Context.stroke(); //链接 、、 或看成结束 画画 } canvas.onmouseup = function() // 当 在画板上 鼠标 松开的 时候 { canvas.onmousemove = null; //， 清除 鼠标 移动事件 } // 一直都是在 操做 画板的 id， 注意！！ } var btn = document.getElementById("btn"); btn.onclick = function() //橡皮 { canvas.style.cursor = 'url(eraser.cur),auto'; // 点击 橡皮时， 换鼠标图标 // clearInterval(timer); // color.value = '#F9F4F1'; Context.strokeStyle = '#FFFFFF'; // 把 画笔颜色 换成 和 背景 同样的 颜色 } var color = document.getElementById("color"); var t; color.onclick = function() // 选颜色 { canvas.style.cursor = 'url(brush.cur),auto'; //点击选颜色 // timer = setInterval(function(){ // Context.strokeStyle = color.value; // // console.log(Context.strokeStyle); // },1000) } // var timer = setInterval(function(){ color.onchange = function() { Context.strokeStyle = color.value; // 颜色改变时 把 颜色值 给 画笔 } // },1000) // var sx = setInterval(function(){ // Context.lineWidth = txt.value; // Context.lineWidth = huabi.value; // // }) ///////////////////////// var huabi = document.getElementById("huabi"); var txt = document.getElementById("text"); huabi.onchange = function() //画笔 粗细 { txt.value = huabi.value; Context.lineWidth = txt.value; } var re = document.getElementById("re"); re.onclick = function() //重置画板 { // Context.clearRect(0,0,635,400); location.reload(); } } </script> </head> <body background="/static/pc0003.jpg" style=" background-repeat:no-repeat; background-size:100% 100%; background-attachment: fixed;"> <div style="display: flex; position: absolute; left:10px; top: 10px"> <div> <svg t="1590063098904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3484" width="35" height="35"> <path d="M427.136 377.088c0-15.296 10.816-21.504 24.064-13.888l228.224 131.776c13.248 7.616 13.248 20.16 0 27.776L451.2 654.528c-13.248 7.616-24.064 1.408-24.064-13.888V377.088z" fill="#070001" p-id="3485"></path> <path d="M821.12 574.72c19.072-99.584-1.728-188.864-68.672-265.152-57.856-65.92-132.096-100.224-219.776-102.208a301.248 301.248 0 0 0-308.8 308.736c4.672 182.336 171.84 323.392 360.576 287.936v42.88c0 6.592-0.384 13.184 0.128 19.712 0.384 4.544-1.792 5.312-5.312 5.824a374.144 374.144 0 0 1-74.24 3.264 355.904 355.904 0 0 1-160.192-46.72c-97.792-56.64-159.488-140.16-181.248-251.264-37.632-192.704 84.48-380.672 275.648-426.176a368.64 368.64 0 0 1 443.52 267.136c12.8 50.048 14.4 100.608 6.144 151.552-0.32 2.048 0 4.608-3.52 4.608-21.44-0.192-42.816-0.128-64.256-0.128z" fill="#070001" p-id="3486"></path> <path d="M525.76 892.288c-7.168 0-14.4-0.256-21.632-0.64a373.888 373.888 0 0 1-167.232-48.832c-103.04-59.776-166.656-147.968-188.928-262.144a381.248 381.248 0 0 1 287.616-444.672 384.384 384.384 0 0 1 462.656 278.72c13.056 50.88 15.232 104.064 6.528 158.08a18.88 18.88 0 0 1-19.392 18.048l-83.648-0.128 3.712-19.008c18.56-96.64-3.328-181.312-64.96-251.584-54.72-62.336-124.736-94.848-208.192-96.768l-6.72-0.128a283.392 283.392 0 0 0-204.672 86.08 283.072 283.072 0 0 0-81.024 206.4c3.968 153.216 132.288 277.824 286.208 277.824 18.368 0 37.056-1.728 55.488-5.248l18.944-3.584-0.064 68.544c-0.128 4.032-0.192 8 0.128 12.032 0.832 9.728-3.776 20.864-19.008 22.976a394.496 394.496 0 0 1-55.808 4.032z m0.064-734.976c-27.776 0-55.616 3.264-82.88 9.792a349.568 349.568 0 0 0-263.616 407.552c20.48 104.768 78.912 185.664 173.568 240.576a341.824 341.824 0 0 0 153.152 44.48c20.48 1.344 41.28 0.576 62.4-1.92l0.064-5.12 0.064-29.888a338.944 338.944 0 0 1-42.432 2.752c-171.072 0-313.792-138.624-318.208-308.992a314.816 314.816 0 0 1 89.984-229.568 315.392 315.392 0 0 1 227.648-95.744l7.488 0.128c92.736 2.112 170.624 38.336 231.424 107.648 64.448 73.408 89.792 160.704 75.584 259.712l34.432 0.064c6.4-47.616 3.904-92.8-7.232-136.128a352.512 352.512 0 0 0-341.44-265.344z" fill="#070001" p-id="3487"></path> <path d="M814.528 769.472c0 35.904-0.064 71.808 0.128 107.712 0 4.16-0.96 5.44-5.248 5.376a1639.168 1639.168 0 0 0-50.176 0c-4.352 0.064-5.312-1.344-5.248-5.44 0.128-71.232 0.064-142.464 0.128-213.696 0-13.312 7.68-20.928 20.992-20.992h20.288c12.096 0.128 19.2 7.232 19.264 19.392-0.128 35.84-0.128 71.744-0.128 107.648z" fill="#070001" p-id="3488"></path> <path d="M714.048 809.472c0 22.528-0.128 45.12 0.064 67.648 0.064 4.096-0.832 5.504-5.248 5.44a1955.456 1955.456 0 0 0-51.264 0c-3.392 0.064-4.48-0.832-4.48-4.352 0.128-45.248 0-90.56 0.128-135.808 0-12.224 8.384-20.48 20.544-20.736 5.824-0.128 11.648-0.064 17.472 0 15.936 0 22.72 6.72 22.72 22.528 0.128 21.696 0.064 43.456 0.064 65.28z" fill="#070001" p-id="3489"></path> <path d="M916.032 840.64c0 12.224-0.128 24.448 0.064 36.672 0.064 3.648-0.576 5.312-4.8 5.248a1960.32 1960.32 0 0 0-51.328 0c-3.84 0.064-4.672-1.28-4.672-4.864 0.128-24.256 0-48.512 0.128-72.704 0.064-14.208 8.768-22.784 22.784-22.784h15.232a22.464 22.464 0 0 1 22.592 22.4v36.032z" fill="#070001" p-id="3490"></path> </svg> </div> <div> <font size="6" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:900">叮叮课堂</font> </div> <div style="position: absolute; left:1435px; top: 0px;"> <a href="/teachervideo?name={{name}}&classname={{classname}}"> <svg t="1591939886226" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9692" width="80" height="80"> <path d="M0 0C0 565.539584 458.460416 1024 1024 1024L1024 0 0 0 0 0 0 0ZM608.127206 426.810982 734.960256 553.892762C744.888294 563.840256 744.83817 580.030848 734.84073 590.047872 724.773606 600.134758 708.687795 600.118528 698.756378 590.167629L571.923328 463.08585 445.090278 590.167629C435.162266 600.115123 419.003366 600.064922 409.005926 590.047872 398.938803 579.961011 398.955008 563.843661 408.886426 553.892762L535.719475 426.810982 408.886426 299.729203C398.958387 289.781709 399.008512 273.591117 409.005926 263.574093 419.07305 253.487206 435.158861 253.503437 445.090278 263.454336L571.923328 390.536115 698.756378 263.454336C708.684416 253.506842 724.843315 253.557043 734.84073 263.574093 744.907853 273.660954 744.891674 289.778304 734.960256 299.729203L608.127206 426.810982 608.127206 426.810982 608.127206 426.810982 608.127206 426.810982Z" p-id="9693"> </path> </svg> </a> </div> </div> <div style="position: absolute; font-size: 12px;margin: auto; left: 0; right: 0; top: 60px; width:1000px; height:550px; background-color:rgb(255, 255, 255); box-shadow: 3px 5px 6px #5e5e5e; border-radius:15px"> <canvas id="canvas" width="1000" height="550"style="border-radius:15px;"></canvas> </div> <div style="position:absolute;display:flex;top:620px; margin: auto; left: 0; right: 0;width:800px;height:30px;"> <input type="button" name="btn" id="btn" value="橡皮擦" class="button1"/> <font size="5" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:200">选择颜色</font> <input type="color" name="" id="color" value="#FFFFFF" class="button2"/> <font size="5" face="YouYuan" style="color:rgb(0, 0, 0);font-weight:200">选择画笔粗细</font> <input type="range" name="" max="10" min="1" id="huabi" value="1" /> <input type="text" name="" id="text" value="1" /> <input type="button" value="重置画板" id="re" class="button3"/> </div> </body> </html>