我想自制一个公式编辑器,但是我运行下面代码,点击数字按钮后显示的数字不是mathml格式,我想要mathml的格式,请问应该怎么做?
<!DOCTYPE html>
<html>
<head>
<script src="http://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>
<style type='text/css'>
button {
width: 60px;
height: 60px;
font-size: 30px;
}
.headbtn {
background: #cccccc
}
</style>
</head>
<body>
<table border='1'>
<tr>
<td colspan='6' align='left'>
<div id='thescreen' style='overflow-x: auto;width:1px;height:90px;text-align:left;'>
</div>
</td>
</tr>
<tr id='thehead'>
<td id='AC'><button style='background: grey' onclick='A_C()' title='清除'>AC</button></td>
<td><button class='headbtn' onclick='backSpace()' title='退格'>⌫</button></td>
<td><button class='headbtn'>←</button></td>
<td><button class='headbtn'>→</button></td>
<td><button class='headbtn'>↵</button></td>
<td><button class='headbtn'>➤</button></td>
</tr>
<tr>
<td><button>%</button></td>
<td><button>‰</button></td>
<td><button>‱</button></td>
<td><button style='font-size: 15px'><svg xmlns='http://www.w3.org/2000/svg' width='2.718ex' height='5.285ex' viewBox='0 -1426 1201.4 2336' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' style=''><defs></defs><g stroke='currentColor' fill='currentColor' stroke-width='0' transform='matrix(1 0 0 -1 0 0)'><g data-mml-node='math'><g data-mml-node='mfrac'><g data-mml-node='TeXAtom' data-mjx-texclass='ORD' transform='translate(220, 676)'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'>⬚</text></g></g><g data-mml-node='TeXAtom' data-mjx-texclass='ORD' transform='translate(220, -710)'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'>⬚</text></g></g><rect width='961.4' height='60' x='120' y='220'></rect></g></g></g></svg></button></td>
<td><button>|⬚|</button></td>
<td><button>(⬚)</button></td>
</tr>
<tr>
<td><button>⬚²</button></td>
<td><button style='font-size: 25px'>⬚<sup>⬚</sup></button></td>
<td><button style='font-size: 15px'><svg xmlns='http://www.w3.org/2000/svg' width='4.03ex' height='2.851ex' viewBox='0 -1050.3 1781.4 1260' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' style=''><defs><path id='MJX-10-TEX-SO-221A' d='M263 249Q264 249 315 130T417 -108T470 -228L725 302Q981 837 982 839Q989 850 1001 850Q1008 850 1013 844T1020 832V826L741 243Q645 43 540 -176Q479 -303 469 -324T453 -348Q449 -350 436 -350L424 -349L315 -96Q206 156 205 156L171 130Q138 104 137 104L111 130L263 249Z'></path></defs><g stroke='currentColor' fill='currentColor' stroke-width='0' transform='matrix(1 0 0 -1 0 0)'><g data-mml-node='math'><g data-mml-node='msqrt'><g transform='translate(1020, 0)'><g data-mml-node='TeXAtom' data-mjx-texclass='ORD'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'>⬚</text></g></g></g><g data-mml-node='mo' transform='translate(0, 140.3)'><use xlink:href='#MJX-10-TEX-SO-221A'></use></g><rect width='761.4' height='60' x='1020' y='930.3'></rect></g></g></g></svg></button></td>
<td><button style='font-size: 15px'><svg xmlns='http://www.w3.org/2000/svg' width='4.03ex' height='2.851ex' viewBox='0 -1050.3 1781.4 1260' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' style=''><defs><path id='MJX-30-TEX-SO-221A' d='M263 249Q264 249 315 130T417 -108T470 -228L725 302Q981 837 982 839Q989 850 1001 850Q1008 850 1013 844T1020 832V826L741 243Q645 43 540 -176Q479 -303 469 -324T453 -348Q449 -350 436 -350L424 -349L315 -96Q206 156 205 156L171 130Q138 104 137 104L111 130L263 249Z'></path></defs><g stroke='currentColor' fill='currentColor' stroke-width='0' transform='matrix(1 0 0 -1 0 0)'><g data-mml-node='math'><g data-mml-node='mroot'><g><g data-mml-node='TeXAtom' data-mjx-texclass='ORD' transform='translate(1020, 0)'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'>⬚</text></g></g></g><g data-mml-node='TeXAtom' transform='translate(231.3, 550.3) scale(0.5)' data-mjx-texclass='ORD'><g data-mml-node='mo'><text data-variant='normal' transform='matrix(1 0 0 -1 0 0)' font-size='884px' font-family='serif'>⬚</text></g></g><g data-mml-node='mo' transform='translate(0, 140.3)'><use xlink:href='#MJX-30-TEX-SO-221A'></use></g><rect width='761.4' height='60' x='1020' y='930.3'></rect></g></g></g></svg></button></td>
<td><button style='font-size: 25px'>⌊⬚⌋</button></td>
<td><button style='font-size: 25px'>⌈⬚⌉</button></td>
</tr>
<tr>
<td><button onclick='f(7)' title='7'>7</button></td>
<td><button onclick='f(8)' title='8'>8</button></td>
<td><button onclick='f(9)' title='9'>9</button></td>
<td><button>÷</button></td>
<td><button>·</button></td>
<td><button>⬚!</button></td>
</tr>
<tr>
<td><button onclick='f(4)' title='4'>4</button></td>
<td><button onclick='f(5)' title='5'>5</button></td>
<td><button onclick='f(6)' title='6'>6</button></td>
<td><button>×</button></td>
<td><button>e</button></td>
<td><button>π</button></td>
</tr>
<tr>
<td><button onclick='f(1)' title='1'>1</button></td>
<td><button onclick='f(2)' title='2'>2</button></td>
<td><button onclick='f(3)' title='3'>3</button></td>
<td><button>-</button></td>
<td><button>φ</button></td>
<td><button>τ</button></td>
</tr>
<tr>
<td><button onclick='f(0)' title='0'>0</button></td>
<td><button>.</button></td>
<td><button>=</button></td>
<td><button>+</button></td>
<td><button>i</button></td>
<td><button>∞</button></td>
</tr>
</table>
<script src='https://code.jquery.com/jquery-2.1.0.js'></script>
<script>
thescreen.style.width = String(thehead.offsetWidth - (AC.offsetWidth - 60)) + 'px'
var list = [];
var writeInput = function (theList) {
if (theList.length === 0) {
return '<math xmlns="http://www.w3.org/1998/Math/MathML"></math>';
};
code = '<math xmlns="http://www.w3.org/1998/Math/MathML">';
theCode = [theList[0].text, theList[0].type]
for (i=1; i<theList.length; i++) {
if (theList[i].type != theCode[1]) {
code += '<' + theCode[1] + '>' + theCode[0] + '</' + theCode[1] + '>'
theCode[1] = theList[i].type
theCode[0] = ''
} else {
theCode[0] += String(theList[i].text)
}
};
code += '<' + theCode[1] + '>' + theCode[0] + '</' + theCode[1] + '></math>'
return code;
};
var Num = function (n) {
this.text = n;
this.type = 'mn';
};
var change = function () {
inputs = writeInput(list);
$('#thescreen').empty();
$('#thescreen').append(inputs);
};
var f = function (text) {
if (typeof text === 'number') {
list.push(new Num(text));
};
change();
};
var backSpace = function () {
if (list.length > 0) {list.pop();};
change();
};
var A_C = function () {
list = [];
change();
};
</script>
</body>
</html>