Map.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="Map.css">
  5. <meta charset="UTF-8">
  6. <title>Hello</title>
  7. <script src="gui.js"></script>
  8. <script src="requests.js"></script>
  9. </head>
  10. <body>
  11. <script>
  12. let host = 'http://127.0.0.1:5000/'
  13. </script>
  14. <canvas id="canvas" class="bg_canvas"></canvas>
  15. <div class="screen" id="screen">
  16. <div class="nothing"></div>
  17. <div class="form" id="form">
  18. <div class="horizontal">
  19. <label for="func_exp" class='tips'>函数表达式</label>
  20. <input id="func_exp">
  21. <br>
  22. <label for="definition_domain" class='tips'>函数定义域</label>
  23. <input id="definition_domain">
  24. <br>
  25. <label for="func_name" class='tips'>函数符号</label>
  26. <input id="func_name">
  27. <br>
  28. <label for="func_style" class='tips'>函数绘图样式</label>
  29. <input id="func_style">
  30. <div>
  31. <button>添加新函数</button>
  32. <button>删除选择函数</button>
  33. <button>清除所有函数</button>
  34. </div>
  35. <div class='select'>
  36. <label for="func_box" class='no_label'></label>
  37. <select id="func_box" class="font box" style='height: 700px' size=20>
  38. </select>
  39. </div>
  40. </div>
  41. <div class="horizontal">
  42. <label for="x_value" class='tips'>计算(y)</label>
  43. <input id="x_value">
  44. <br>
  45. <label for="y_value" class='tips'>二分法计算(x)</label>
  46. <input id="y_value">
  47. <br>
  48. <label for="dicon_parameters" class='tips'>二分法参数</label>
  49. <input id="dicon_parameters">
  50. <br>
  51. <label for="y_value_gradient" class='tips'>梯度法计算(x)</label>
  52. <input id="y_value_gradient">
  53. <div>
  54. <button>计算</button>
  55. <button>二分法计算</button>
  56. <button>梯度法计算</button>
  57. </div>
  58. <div>
  59. <button>查看记忆</button>
  60. <button>隐藏记忆</button>
  61. <button>清空记忆</button>
  62. </div>
  63. <div class='select'>
  64. <label for="result_box" class='no_label'></label>
  65. <select id="result_box" class="font box" style='height: 300px' size=20>
  66. </select>
  67. <label for="x_axis" class='tips'>x轴刻度</label>
  68. <input id="x_axis">
  69. <br>
  70. <label for="y_axis" class='tips'>y轴刻度</label>
  71. <input id="y_axis">
  72. <br>
  73. <label for="x_limit" class='tips'>x轴极限</label>
  74. <input id="x_limit">
  75. <br>
  76. <label for="y_limit" class='tips'>y轴极限</label>
  77. <input id="y_limit">
  78. <div>
  79. <button>绘制函数</button>
  80. <button>计算性质</button>
  81. <button>函数求导</button>
  82. </div>
  83. <div class='select'>
  84. <label for="prediction_box" class='no_label'></label>
  85. <select id="prediction_box" class="font box" style='height: 150px' size=20>
  86. </select>
  87. </div>
  88. <div class='select'>
  89. <label for="new_box" class='no_label'></label>
  90. <select id="new_box" class="font box" style='height: 100px' size=20>
  91. </select>
  92. </div>
  93. </div>
  94. </div>
  95. <div class="horizontal">
  96. <div>
  97. <button>导入表格</button>
  98. <button>生成表格</button>
  99. <button>导出表格</button>
  100. </div>
  101. <div class='select'>
  102. <label for="sheet_box" class='no_label'></label>
  103. <select id="sheet_box" class="font box" style='height: 791px' size=20>
  104. </select>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. <script src="bg.js"></script>
  110. </body>
  111. </html>