index.html 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. <!DOCTYPE html>
  2. <head>
  3. <!-- <link async rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
  4. integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> -->
  5. <script type="text/javascript" src="../js/jquery.min.js" crossorigin="anonymous"></script>
  6. <link rel="stylesheet" href="../css/bootstrap.min.css" crossorigin="anonymous">
  7. <script type="text/javascript" src="../js/bootstrap.min.js" crossorigin="anonymous"></script>
  8. <link rel="stylesheet" href="../css/style.css">
  9. <link rel="preconnect" href="https://fonts.gstatic.com">
  10. <link href="https://fonts.loli.net/css2?family=Anonymous+Pro:ital,wght@0,400;0,700;1,400;1,700
  11. &family=Noto+Serif+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  12. <title>化学</title>
  13. <style>
  14. .well {
  15. padding: 10px;
  16. border: 1px solid rgb(173, 173, 173);
  17. background-color: #f5f5f5;
  18. margin-top: 5px;
  19. min-height: 160px;
  20. border-radius: 5px;
  21. width: 100%;
  22. overflow-x: auto;
  23. overflow-y: auto;
  24. }
  25. .btn:focus,.btn:focus-visible,.btn:focus-within,.btn:active{
  26. outline: 10px double rgba(95, 177, 221, 0.5);
  27. }
  28. .btn.disabled {
  29. cursor: default;
  30. pointer-events: none;
  31. }
  32. </style>
  33. <script id="MathJax-script" src="https://cdn.bootcss.com/mathjax/3.0.5/es5/tex-mml-chtml.js"></script>
  34. <!-- <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> -->
  35. <script>
  36. var list = ['',
  37. 'H', 'He',
  38. 'Li', 'Be', 'B', 'C', 'N', 'O', 'F', 'Ne',
  39. 'Na', 'Mg', 'Al', 'Si', 'P', 'S', 'Cl', 'Ar',
  40. 'K', 'Ca', 'Sc', 'Ti', 'V', 'Cr', 'Mn', 'Fe', 'Co', 'Ni', 'Cu', 'Zn', 'Ga', 'Ge', 'As', 'Se', 'Br', 'Kr',
  41. 'Rb', 'Sr', 'Y', 'Zr', 'Nb', 'Mo', 'Tc', 'Ru', 'Rh', 'Pd', 'Ag', 'Cd', 'In', 'Sn', 'Sb', 'Te', 'I', 'Xe',
  42. 'Cs', 'Ba', 'La', 'Ce', 'Pr', 'Nd', 'Pm', 'Sm', 'Eu', 'Gd', 'Tb', 'Dy', 'Ho', 'Er', 'Tm', 'Yb', 'Lu', 'Hf', 'Ta', 'W', 'Re', 'Os', 'Ir', 'Pt', 'Au', 'Hg', 'Tl', 'Pb', 'Bi', 'Po', 'At', 'Rn',
  43. 'Fr', 'Ra', 'Ac', 'Th', 'Pa', 'U', 'Np', 'Pu', 'Am', 'Cm', 'Bk', 'Cf', 'Es', 'Fm', 'Md', 'No', 'Lr', 'Rf', 'Db', 'Sg', 'Bh', 'Hs', 'Mt', 'Ds', 'Rg', 'Cn', 'Nh', 'Fl', 'Mc', 'Lv', 'Ts', 'Og'
  44. ]
  45. var weighList = {
  46. 'H': 1, 'He': 4,
  47. 'Li': 7, 'Be': 9, 'B': 11, 'C': 12, 'N': 14, 'O': 16, 'F': 19, 'Ne': 20,
  48. 'Na': 23, 'Mg': 24, 'Al': 27, 'Si': 28, 'P': 31, 'S': 32, 'Cl': 35.5, 'Ar': 40,
  49. 'K': 39, 'Ca': 40, 'Sc': 45, 'Ti': 48, 'V': 51, 'Cr': 52, 'Mn': 55, 'Fe': 56, 'Co': 59, 'Ni': 59, 'Cu': 63.5, 'Zn': 65.5, 'Ga': 70, 'Ge': 72.5, 'As': 75, 'Se': 79, 'Br': 80, 'Kr': 84,
  50. 'Rb': 85.5, 'Sr': 87.5, 'Y': 89, 'Zr': 91, 'Nb': 93, 'Mo': 96, 'Tc': 99, 'Ru': 101, 'Rh': 103, 'Pd': 106.5, 'Ag': 108, 'Cd': 112.5, 'In': 115, 'Sn': 118.5, 'Sb': 122, 'Te': 127.5, 'I': 127, 'Xe': 131,
  51. 'Cs': 133, 'Ba': 137, 'La': 139, 'Ce': 140, 'Pr': 141, 'Nd': 144, 'Pm': 147, 'Sm': 150.5, 'Eu': 152, 'Gd': 157, 'Tb': 159, 'Dy': 162.5, 'Ho': 165, 'Er': 167, 'Tm': 169, 'Yb': 173, 'Lu': 175, 'Hf': 178.5, 'Ta': 181, 'W': 184, 'Re': 186, 'Os': 190, 'Ir': 192, 'Pt': 195, 'Au': 197, 'Hg': 200.5, 'Tl': 204.5, 'Pb': 207, 'Bi': 209, 'Po': 209, 'At': 210, 'Rn': 222,
  52. 'Fr': 223, 'Ra': 226, 'Ac': 227, 'Th': 232, 'Pa': 231, 'U': 238, 'Np': 237, 'Pu': 244, 'Am': 243, 'Cm': 247, 'Bk': 247, 'Cf': 251, 'Es': 252, 'Fm': 257, 'Md': 258, 'No': 259, 'Lr': 260, 'Rf': 261, 'Db': 262, 'Sg': 263, 'Bh': 262, 'Hs': 265, 'Mt': 266, 'Ds': 269, 'Rg': 272, 'Cn': 285, 'Nh': 284, 'Fl': 289, 'Mc': 288, 'Lv': 293, 'Ts': 291, 'Og': 294
  53. }
  54. var weighList2 = {
  55. 'H': 1.008, 'He': 4.003,
  56. 'Li': 6.941, 'Be': 9.012, 'B': 10.81, 'C': 12.01, 'N': 14.01, 'O': 16.00, 'F': 19.00, 'Ne': 20.18,
  57. 'Na': 22.99, 'Mg': 24.31, 'Al': 26.98, 'Si': 28.09, 'P': 30.97, 'S': 32.07, 'Cl': 35.45, 'Ar': 49.95,
  58. 'K': 39.10, 'Ca': 40.08, 'Sc': 44.96, 'Ti': 47.87, 'V': 50.94, 'Cr': 52.00, 'Mn': 54.94, 'Fe': 55.85, 'Co': 58.93, 'Ni': 58.69, 'Cu': 63.55, 'Zn': 65.39, 'Ga': 79.72, 'Ge': 72.61, 'As': 74.92, 'Se': 78.96, 'Br': 79.90, 'Kr': 83.80,
  59. 'Rb': 85.47, 'Sr': 87.62, 'Y': 88.91, 'Zr': 91.22, 'Nb': 92.91, 'Mo': 95.94, 'Tc': 99, 'Ru': 101.1, 'Rh': 102.9, 'Pd': 106.4, 'Ag': 107.9, 'Cd': 112.4, 'In': 114.8, 'Sn': 118.7, 'Sb': 121.8, 'Te': 127.6, 'I': 126.9, 'Xe': 131.3,
  60. 'Cs': 132.9, 'Ba': 137.3, 'La': 138.9, 'Ce': 140.1, 'Pr': 140.9, 'Nd': 144.2, 'Pm': 147, 'Sm': 150.4, 'Eu': 152.0, 'Gd': 157.3, 'Tb': 158.9, 'Dy': 162.5, 'Ho': 164.9, 'Er': 167.3, 'Tm': 168.9, 'Yb': 173.0, 'Lu': 175.0, 'Hf': 178.5, 'Ta': 180.9, 'W': 183.8, 'Re': 186.2, 'Os': 190.2, 'Ir': 192.2, 'Pt': 195.1, 'Au': 197.0, 'Hg': 200.6, 'Tl': 204.4, 'Pb': 207.2, 'Bi': 209.0, 'Po': 209, 'At': 210, 'Rn': 222,
  61. 'Fr': 223, 'Ra': 226.0, 'Ac': 227.0, 'Th': 232.0, 'Pa': 231.0, 'U': 238.0, 'Np': 237.0, 'Pu': 244, 'Am': 243, 'Cm': 247, 'Bk': 247, 'Cf': 251, 'Es': 252, 'Fm': 257, 'Md': 258, 'No': 259, 'Lr': 260, 'Rf': 261, 'Db': 262, 'Sg': 263, 'Bh': 262, 'Hs': 265, 'Mt': 266, 'Ds': 269, 'Rg': 272, 'Cn': 285, 'Nh': 284, 'Fl': 289, 'Mc': 288, 'Lv': 293, 'Ts': 291, 'Og': 294
  62. }
  63. var bracket = {}
  64. function getco(str) {
  65. var n = str.length, ret = 0
  66. for (var i = 0; i < n; i++) {
  67. var ch = str.charAt(i)
  68. if (isNaN(ch)) break;
  69. ret *= 10;
  70. ret += ch - 0;
  71. }
  72. str = str.slice(i, n)
  73. return [ret, str, i]
  74. }
  75. function workMolecule(str, st) {
  76. // console.log(str, st)
  77. var n = str.length, co = 1, ans = {};
  78. for (let i = 0; i < n; i++) {
  79. var ch = str.charAt(i)
  80. var f = {}
  81. if (ch == '(') {
  82. f = workMolecule(str.slice(i + 1, bracket[i + st] - st), st + i + 1)
  83. i = bracket[i + st] - st;
  84. } else if ('A' <= ch && ch <= 'Z') {
  85. if (i + 1 < n) {
  86. let nch = str.charAt(i + 1)
  87. if ('a' <= nch && nch <= 'z') i++, ch += nch
  88. }
  89. if (f[ch]) f[ch]++;
  90. else f[ch] = 1;
  91. } else return {}
  92. let g = getco(str.slice(i + 1, n))
  93. if (g[0]) {
  94. for (key in f) {
  95. f[key] *= g[0]
  96. }
  97. }
  98. for (key in f) {
  99. if (ans[key]) ans[key] = ans[key] + f[key]
  100. else ans[key] = f[key]
  101. }
  102. i += g[2]
  103. }
  104. // console.log('ans', ans)
  105. return ans;
  106. }
  107. function parseMolecule(str) {
  108. str = str.replace(/[\[{]/g, "(").replace(/[\]}]/g, ")")
  109. str = str.replace(/<\d*e[\+\-]>*/g, "");
  110. // console.log('Parsing molecule', str)
  111. var n = str.length, co = 1, stack = [], top = 0;
  112. for (let i = 0; i < n; i++) {
  113. var ch = str.charAt(i);
  114. if (ch == '(') stack[top] = i, top++;
  115. else if (ch == ')') bracket[stack[top - 1]] = i, bracket[i] = stack[top - 1], top--;
  116. if (top < 0) return {}
  117. }
  118. if (top != 0) return {};
  119. var g = getco(str)
  120. if (g[0]) co = g[0]
  121. var f = workMolecule(g[1], g[2])
  122. for (key in f) {
  123. f[key] *= co;
  124. }
  125. return f;
  126. }
  127. function weigh(hash, mode = 0) {
  128. var ans = 0
  129. if (mode) {
  130. for (key in hash) {
  131. if (weighList2[key]) ans += hash[key] * weighList2[key]
  132. }
  133. } else {
  134. for (key in hash) {
  135. if (weighList[key]) ans += hash[key] * weighList[key]
  136. }
  137. }
  138. return parseInt(ans * 10000) / 10000;
  139. }
  140. function weighEquation(str, mode = 0) {
  141. str = str.replace(/<\d*e[\+\-]>*/g, "").replace(/[^\dA-Za-z<>\(\)\+\-=\.]/g, "");
  142. var q = str.split(/[=\+\-\.]/g)
  143. var p = str.replace(/[^=\+\-\.]/g, "").replace('.', '*')
  144. var ans = ""
  145. if (str == "") return ""
  146. var n = p.length, sum = 0, gsum = "";
  147. for (let i = 0; i <= n; i++) {
  148. var k = weigh(parseMolecule(q[i]), mode)
  149. sum += k
  150. if (p.charAt(i) == '=') gsum += parseInt(sum * 10000) / 10000 + '=', sum = 0;
  151. ans = ans + k + p.charAt(i)
  152. }
  153. if (n) ans += '\\)<br>\\(' + gsum + parseInt(sum * 10000) / 10000
  154. return ans.replace('\*', "\\cdot");
  155. }
  156. function parseEquation(str) {
  157. str = str.replace(/ /g, '')
  158. var q = str.split(/[=\+\-\.]/g)
  159. var p = str.replace(/[^=\+\-\.]/g, "")
  160. var ans = {}
  161. var n = p.length;
  162. for (let i = 0; i <= n; i++) {
  163. var f = parseMolecule(q[i])
  164. for (key in f) {
  165. if (ans[key]) ans[key] = ans[key] + f[key]
  166. else ans[key] = f[key]
  167. }
  168. }
  169. return ans
  170. }
  171. function renderEquation(str) {
  172. str = str.replace(/[\[{]/g, "(").replace(/[\]}]/g, ")");
  173. str = str.replace(/[^\dA-Za-z<>\(\)\+\-=\.]/g, "");
  174. // console.log('Rendering equation', str)
  175. str = str.replace(/([A-Za-z]+)/g, "\\text{$1}");
  176. str = str.replace(/<(\d*)\\text\{e\}([\+\-])>/g, "^{$1$2}");
  177. str = str.replace(/([\}\)])(\d+)/g, "$1_{$2}");
  178. str = str.replace('.', "\\cdot");
  179. // console.log(str)
  180. return str
  181. }
  182. var mode = 'bal', balInput, balText = '', inputText
  183. $().ready(function () {
  184. balInput = $("#balInput")[0]
  185. setBal();
  186. $("#balInput").keydown(function (e) {
  187. if (e.keyCode == 13 && mode == 'bal') {
  188. $("#balBtn")[0].click();
  189. }
  190. });
  191. $(function () { $("[data-toggle='tooltip']").tooltip(); });
  192. })
  193. function setBal() {
  194. $('#frame')[0].innerHTML = '\\(' + renderEquation(balText) + '\\)';
  195. MathJax.typeset()
  196. $('#balBtn').text('配平')
  197. $('#balShare').removeClass('disabled')
  198. $('#balInput').attr('placeholder', 'CrI3+Cl2+KOH=K2CrO4+KIO4+KCl+H2O')
  199. $('#balBtn').attr('href', '/chem?CrI3+Cl2+KOH=K2CrO4+KIO4+KCl+H2O')
  200. $('#balBtn').removeClass('disabled')
  201. mode = 'bal'
  202. input()
  203. }
  204. function setWeigh() {
  205. $('#balBtn').text('相对质量')
  206. $('#balShare').addClass('disabled')
  207. $('#balInput').attr('placeholder', 'CH3CHO+2Ag(NH3)2OH=CH3COONH4+2Ag+3NH3+H2O')
  208. $('#balBtn').attr('href', '')
  209. $('#balBtn').addClass('disabled')
  210. mode = 'weigh'
  211. input()
  212. }
  213. function setWeigh2() {
  214. $('#balBtn').text('相对质量*')
  215. $('#balShare').addClass('disabled')
  216. $('#balInput').attr('placeholder', 'CH3CHO+2Ag(NH3)2OH=CH3COONH4+2Ag+3NH3+H2O')
  217. $('#balBtn').attr('href', '')
  218. $('#balBtn').addClass('disabled')
  219. mode = 'weigh2'
  220. input()
  221. }
  222. function input() {
  223. inputText = balInput.value
  224. if (mode == 'bal') {
  225. $('#frame')[0].innerHTML = '\\(' + renderEquation((inputText == '') ? 'CrI3+Cl2+KOH=K2CrO4+KIO4+KCl+H2O' : inputText) + '\\)<br>'
  226. + '<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span><br>' + ((balText != '') ? ('\\(' + renderEquation(balText) + '\\)') : ('...'));
  227. MathJax.typeset()
  228. } else if (mode == 'weigh') {
  229. $('#frame')[0].innerHTML = '\\(' + renderEquation((inputText == '') ? 'CH3CHO+2Ag(NH3)2OH=CH3COONH4+2Ag+3NH3+H2O' : inputText) + '\\)<br>\\('
  230. + weighEquation((inputText == '') ? '2CrI3+27Cl2+64KOH=2K2CrO4+6KIO4+54KCl+32H2O' : inputText) + '\\)';
  231. MathJax.typeset()
  232. } else if (mode == 'weigh2') {
  233. $('#frame')[0].innerHTML = '\\(' + renderEquation((inputText == '') ? 'CH3CHO+2Ag(NH3)2OH=CH3COONH4+2Ag+3NH3+H2O' : inputText) + '\\)<br>\\('
  234. + weighEquation((inputText == '') ? '2CrI3+27Cl2+64KOH=2K2CrO4+6KIO4+54KCl+32H2O' : inputText, 1) + '\\)';
  235. MathJax.typeset()
  236. }
  237. }
  238. var running;
  239. function balance() {
  240. if (running) return;
  241. $('#balBtn').text('配平...')
  242. $('#balBtn').addClass('disabled')
  243. running = 1;
  244. $.get('/chem?' + ((inputText == '') ? 'CrI3+Cl2+KOH=K2CrO4+KIO4+KCl+H2O' : inputText), function (e) {
  245. $('#frame')[0].innerHTML = (e.charAt(0) == '!') ? ('<pre class="text-danger bg-danger">' + e.slice(1, e.length) + '</pre>') : ('\\(' + renderEquation((inputText == '') ? 'CrI3+Cl2+KOH=K2CrO4+KIO4+KCl+H2O' : inputText)
  246. + '\\)<br><span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span><br>' + '\\(' + renderEquation(e) + '\\)');
  247. if (e.charAt(0) != '!') balText = e
  248. MathJax.typeset()
  249. $('#balBtn').text('配平')
  250. $('#balBtn').removeClass('disabled')
  251. running = 0;
  252. })
  253. }
  254. function balUp() {
  255. $('#balInput').val(balText)
  256. }
  257. </script>
  258. </head>
  259. <body>
  260. <div>
  261. <div class="col-lg-8 col-md-10 col-xs-12">
  262. <div class="input-group">
  263. <span class="input-group-btn">
  264. <button type="button" class="btn btn-default" onclick="balUp()" id="balShare" title="导入配平结果"> <span class="glyphicon glyphicon-share-alt"
  265. aria-hidden="true"></span></button>
  266. </span>
  267. <input id="balInput" type="text" class="form-control" oninput="input()">
  268. <span class="input-group-btn">
  269. <button type="button" class="btn btn-default" onclick="balance()" id="balBtn">配平</button>
  270. <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
  271. <span class="caret"></span>
  272. <span class="sr-only">切换下拉菜单</span>
  273. </button>
  274. <ul class="dropdown-menu" role="menu">
  275. <li class="dropdown-header">功能</li>
  276. <li><a href="#" onclick="setBal()">配平</a></li>
  277. <li><a href="#" onclick="setWeigh()">相对质量</a></li>
  278. <li><a href="#" onclick="setWeigh2()" data-toggle="tooltip" data-placement="left"
  279. title="四位有效数字">相对质量*</a></li>
  280. <li class="divider"></li>
  281. <li><a href="/chemist" data-toggle="tooltip" data-placement="left" title="将打开新页面">配不下了</a>
  282. </li>
  283. <li class="divider"></li>
  284. <li><a href="#" data-toggle="tooltip" data-placement="left" title="将会对所有人可见">发送到数据库</a></li>
  285. </ul>
  286. </span>
  287. </div>
  288. <div class="well" id="frame">
  289. </div>
  290. </div>
  291. </div>
  292. </body>
  293. </html>