不会JavaScript，没关系！Brython是用Pyth

　　1说明：
　　1。1Brython（BrowserPython）是在浏览器中运行Python3的一个实现。
　　1。2Brython设计用于替换网页上的JavaScript脚本语言，它使用Python来编写脚本，并直接在网页上执行。
　　1。3Brython通过一套JavaScript库对Python3中的全部关键字以及大多数内置插件进行模拟，从而实现了将Python3版本作为客户端Web编程方案的目标。
　　1。4Brython支持几乎所有的python语法。可以进行控制台编程，不支持高级编程（如，网络编程等）。
　　1。5Brython支持turtle绘图库，可以进行图像绘制。Brython会把绘图程序转换成svg格式的动画。
　　2准备：
　　2。1传送门：https：github。combrythondevbrython
　　2。2环境：
　　华为笔记本电脑、深度deepinlinux操作系统、谷歌浏览器、python3。8和微软vscode编辑器。
　　2。3安装：pipinstallbrython本机安装sudopip3。8installihttps：mirrors。aliyun。compypisimplebrython
　　2。4需要一定的html基础知识，不过代码中我已经注释。
　　3Hello你好：
　　3。1代码：1Hello。html！DOCTYPEhtmlhtmlheadtitleHello你好titlemetacharsetutf8！本地引用！scripttypetextjavascriptsrcc2021imgdataimg。jpgdatasrc。brython。jsscript！在线联网引用head！调用brython；注意onload，有时候onLoad也可以，但是建议小写！括号内的数字，可以为空，为1bodyonloadbrython（2）pYournameis：inputidzoneautocompleteoffbuttonidtestclick点击！buttonbodyhtml
　　3。2操作和效果图：
　　4简易计算器calculator：
　　4。1代码：2calculator。html！doctypehtmlhtmlheadmetacharsetutf8！设置样式cssstyle｛fontfamily：sansserif；fontweight：normal；fontsize：1。1em；｝td｛backgroundcolor：ccc；padding：10px30px10px30px；borderradius：0。2em；textalign：center；cursor：default；｝result｛bordercolor：000；borderwidth：1px；borderstyle：solid；padding：10px30px10px30px；textalign：right；｝styleheadbodyonloadbrython（）bodyhtml
　　4。2操作和效果图：
　　5turtle绘图：
　　5。1代码：3turtle。html！doctypehtmlhtmlheadmetacharsetutf8！本地引用文件！scripttypetextjavascriptsrcc2021imgdataimg。jpgdatasrc。brython。jsscript！scripttypetextjavascriptsrcc2021imgdataimg。jpgdatasrc。brythonstdlib。jsscript！在线联网引用文件styleh1，h2，h3，h4｛color：blue；｝pre｛maxwidth：800px；overflow：auto；wordbreak：normal！important；wordwrap：normal！important；whitespace：pre！important；fontweight：bold；｝presource｛border：1pxsolidblue；backgroundcolor：antiquewhite；｝preturtledocstring｛backgroundcolor：white；maxwidth：800px；｝hr｛clear：both；｝info｛maxwidth：800px；border：1pxdottedblack；｝preturtleprintoutput｛backgroundcolor：black；color：yellow；fontweight：bolder；minheight：50px；height：auto；maxheight：200px；｝button｛margin：20px；padding：10px；｝statusinfo｛color：darkred；fontweight：bolder；｝。error，。notimplemented｛color：red；｝。btnenabled｛color：black；backgroundcolor：c0c0c0；｝。btndisabled｛cursor：notallowed；pointerevents：none；color：c0c0c0；backgroundcolor：ffffff；｝styleheadbodyonloadbrython（1）h1Turtledemoh1p本来有许多下拉选择项目，我剔除掉，只留下一个用来展示。selectiddemoselectorautocompleteoffoptionvalue1Squarewithdefaultturtleoptionselect
　　往下拉，可以看到代码和画图过程。pbuttonidrunclassbtnenabledRunbuttonspanidstatusinfospanbuttonidclearclassbtndisabledClearbuttonbuttonidreplaysceneclassbtndisabledReplayscenebuttonpreidturtleprintoutputprepreidsourcestylefloat：leftcontenteditabletruepreh2Simpledemoh2pWhenyouclickonbRunb，开始运行代码。pWhenyouclickonbClearb，开始清除代码。pWhenyouclickonbReplaysceneb，重新加载屏幕。这个模块导出是本特色frombrowserimportdocumentimportturtle这个设置也是与html联动turtle。setdefaults（turtlecanvaswrapperdocument〔turtlep〕）其他设置与python代码无差别tturtle。Turtle（）t。width（5）forcin〔red，00ff00，fa0，rgb（0，0，200）〕：t。color（c）t。forward（100）t。left（90）t。penup（）t。goto（30，100）t。dot（40，rgba（255，0，0，0。5）t。goto（30，100）t。dot（40，rgba（0，255，0，0。5）t。goto（0，70）t。dot（40，rgba（0，0，255，0。5）t。goto（0，125）t。color（purple）t。write（IloveBrython！，font（Arial，20，normal））turtle。done（）bodyhtml
　　5。2操作和效果图：
　　6highcharts：
　　6。1文件结构：
　　6。2代码省略：太多了
　　6。3操作和效果图：换一种操作方式
　　完美
　　自己整理并分享出来
　　喜欢的就点赞、关注、评论、转发和收藏。经典。