bignumber-vs-number.html
1 <!DOCTYPE html> 2 <html lang='en'> 3 <head> 4 <meta charset='utf-8' /> 5 <meta name="Author" content="M Mclaughlin"> 6 <title>Testing BigNumber against Number</title> 7 <style> 8 body, ul, form, h1, div {margin: 0; padding: 0;} 9 body, pre {font-family: Calibri, Arial, Sans-Serif;} 10 form {width: 48em; margin: 1.6em auto; border: 2px solid rgb(200, 200, 200);} 11 h1 {text-align: center; font-size: 1.2em; padding: 0.6em 0; 12 background-color: rgb(200, 200, 200)} 13 ul {list-style-type: none; color: rgb(85, 85, 85); padding: 1em 1em 0 2em;} 14 .input, ul {background-color: rgb(245, 245, 245);} 15 .input, .output {padding: 0 1em 1em 2em;} 16 .output, .methods {background-color: rgb(225, 225, 225);} 17 .methods {padding-bottom: 1em;} 18 .output {padding-bottom: 2em;} 19 .size {width: 80%;} 20 label {width: 10em; color: rgb(0, 0, 0); margin-left: 0.6em;} 21 label {display: inline-block;} 22 span, .exLabel, pre {font-size: 0.9em;} 23 pre {display: inline;} 24 .exLabel {display: inline; margin-left: 0; width: 2em;} 25 .arg, .result, .dp {width: 5em; margin-right: 0.8em; margin-top: 1.2em;} 26 .dp {width: auto;} 27 .exInput {margin-left: 1em;} 28 .code {width: 60em; margin: 0 auto; font-family: Courier New, Courier, 29 monospace; font-size: 0.8em;} 30 </style> 31 <script src='../../bignumber.js'></script> 32 </head> 33 <body> 34 <form> 35 <h1>Testing BigNumber against Number</h1> 36 <ul class='methods'> 37 <li> 38 <input type='radio' id='toExponential' name=1/> 39 <label for='toExponential'>toExponential</label> 40 <span>[ decimal places ]</span> 41 </li> 42 <li> 43 <input type='radio' id='toFixed' name=1/> 44 <label for='toFixed'>toFixed</label> 45 <span>[ decimal places ]</span> 46 </li> 47 <li> 48 <input type='radio' id='toPrecision' name=1/> 49 <label for='toPrecision'>toPrecision</label> 50 <span>[ significant digits ]</span> 51 </li> 52 <li> 53 <input type='radio' id='round' name=1/> 54 <label for='round'>round</label> 55 <span>[ decimal places [ , rounding mode ] ]</span> 56 </li> 57 <li> 58 <input type='radio' id='toFraction' name=1/> 59 <label for='toFraction'>toFraction</label> 60 <span>[ maximum denominator ]</span> 61 </li> 62 <li> 63 <input type='radio' id='sqrt' name=1/> 64 <label for='sqrt'>sqrt</label> 65 </li> 66 </ul> 67 <ul id='roundings'> 68 <li> 69 <input type='radio' id=0 name=2/> 70 <label for=0 >UP</label> 71 <span>Rounds away from zero</span> 72 </li> 73 <li> 74 <input type='radio' id=1 name=2/> 75 <label for=1 >DOWN</label> 76 <span>Rounds towards zero</span> 77 </li> 78 <li> 79 <input type='radio' id=2 name=2/> 80 <label for=2 >CEIL</label> 81 <span>Rounds towards +Infinity</span> 82 </li> 83 <li> 84 <input type='radio' id=3 name=2/> 85 <label for=3 >FLOOR</label> 86 <span>Rounds towards -Infinity</span> 87 </li> 88 <li> 89 <input type='radio' id=4 name=2/> 90 <label for=4 >HALF_UP</label> 91 <span>Rounds towards nearest neighbour. If equidistant, rounds up</span> 92 </li> 93 <li> 94 <input type='radio' id=5 name=2/> 95 <label for=5 >HALF_DOWN</label> 96 <span>Rounds towards nearest neighbour. If equidistant, rounds down</span> 97 </li> 98 <li> 99 <input type='radio' id=6 name=2/> 100 <label for=6 >HALF_EVEN</label> 101 <span>Rounds towards nearest neighbour. If equidistant, rounds towards even neighbour</span> 102 </li> 103 <li> 104 <input type='radio' id=7 name=2/> 105 <label for=7 >HALF_CEIL</label> 106 <span>Rounds towards nearest neighbour. If equidistant, rounds towards +Infinity</span> 107 </li> 108 <li> 109 <input type='radio' id=8 name=2/> 110 <label for=8 >HALF_FLOOR</label> 111 <span>Rounds towards nearest neighbour. If equidistant, rounds towards -Infinity</span> 112 </li> 113 </ul> 114 115 <div class='input'> 116 <div class='dpDiv'> 117 <label class='dp' id='dpLabel' for='dp'>Decimal places:</label> 118 <input type='text' id='dp' name='dp' size=20 /> 119 <pre> BigNumber ERRORS:</pre> 120 <input class='exInput' type='radio' id='exTrue' name=3/> 121 <label class='exLabel' for='exTrue'>true</label> 122 <input class='exInput' type='radio' id='exFalse' name=3/> 123 <label class='exLabel' for='exFalse'>false</label> 124 </div> 125 <label class='arg' for='input'>Input:</label> 126 <input class='size' type='text' id='input' name='input' /> 127 </div> 128 129 <div class='output'> 130 <label class='result' for='bignumber'>BigNumber:</label> 131 <input class='size' type='text' id='bignumber' name='bignumber' readonly /> 132 <div id='number'> 133 <label class='result' for='num'>Number:</label> 134 <input class='size' type='text' id='num' name='num' readonly /> 135 </div> 136 </div> 137 </form> 138 <div class= 'code' id='code'></div> 139 <script> 140 (function () { 141 var i, toFraction, lastFocus, 142 d = document, 143 $ = function (id) {return d.getElementById(id)}, 144 $input = $('input'), 145 $dp = $('dp'), 146 $dpLabel = $('dpLabel'), 147 $num = $('num'), 148 $bignumber = $('bignumber'), 149 $number = $('number'), 150 $roundings = $('roundings'), 151 $exceptionsTrue = $('exTrue'), 152 $exceptionsFalse = $('exFalse'), 153 $code = $('code'), 154 $inputs = d.getElementsByTagName('input'); 155 156 function round() { 157 var i, rb, method, mode, includeNumber, numVal, bignumberVal, isSqrt, 158 dp = ($dp.value = $dp.value.replace(/\s+/g, '')), 159 dpEmpty = dp === '', 160 input = ($input.value = $input.value.replace(/\s+/g, '')), 161 exceptions = $exceptionsTrue.checked, 162 code = 'BigNumber.config({ERRORS: ' + exceptions; 163 164 BigNumber.config({ERRORS: exceptions}); 165 166 if (input) { 167 for (i = 0; i < 15; i++) { 168 rb = $inputs[i]; 169 if (rb.checked) { 170 if (i < 6) method = rb.id; 171 else mode = rb.id; 172 } 173 } 174 175 $num.value = $bignumber.value = $code.innerHTML = ''; 176 isSqrt = method == 'sqrt'; 177 178 if (includeNumber = method != 'toFraction' && method != 'round') { 179 try { 180 numVal = isSqrt 181 ? Math.sqrt(input) 182 : dpEmpty 183 ? Number(input)[method]() 184 : Number(input)[method](dp); 185 } catch(e) { 186 numVal = e; 187 } 188 189 if (isSqrt && !dpEmpty) { 190 try { 191 BigNumber.config(dp); 192 } catch(e) { 193 $bignumber.value = e; 194 return; 195 } 196 code += ', DECIMAL_PLACES: ' + dp; 197 } 198 BigNumber.config({ROUNDING_MODE: mode}); 199 code += ', ROUNDING_MODE: ' + mode; 200 } 201 202 code += "})<br>BigNumber('" + input + "')." + method + "("; 203 204 if (!isSqrt) { 205 if (method == 'round') { 206 if (dpEmpty) { 207 dp = undefined; 208 dpEmpty = false; 209 } 210 code += "'" + dp + "', " + mode; 211 212 } else if (!dpEmpty) code += "'" + dp + "'"; 213 } 214 215 code += ')<br><br>'; 216 217 if (includeNumber) { 218 if (isSqrt) { 219 code += "Math.sqrt('" + input + "')"; 220 } else { 221 code += "Number('" + input + "')." + method + "("; 222 if (!dpEmpty) code += "'" + dp + "'"; 223 code += ")"; 224 } 225 } 226 227 try { 228 bignumberVal = dpEmpty 229 ? new BigNumber(input)[method]() 230 : new BigNumber(input)[method](dp, mode); 231 } catch(e) { 232 bignumberVal = e; 233 } 234 235 setTimeout(function () { 236 $bignumber.value = bignumberVal; 237 if (includeNumber) $num.value = numVal; 238 $code.innerHTML = code; 239 }, 100); 240 241 if (window.console && console.log) { 242 input = new BigNumber(input); 243 console.log('\nc: ' + input.c + 244 '\ne: ' + input.e + 245 '\ns: ' + input.s); 246 } 247 } 248 lastFocus.focus(); 249 } 250 251 BigNumber.config({ 252 DECIMAL_PLACES: 20, 253 ROUNDING_MODE: 4, 254 EXPONENTIAL_AT: 1E9, 255 RANGE: 1E9, 256 ERRORS: false, 257 CRYPTO: false, 258 POW_PRECISION: 100, 259 MODULO_MODE: 1 260 }); 261 262 $input.value = $dp.value = $num.value = $bignumber.value = ''; 263 setTimeout(function () {$input.focus()}, 0); 264 265 for (i = 0; i < 15; i++) { 266 $inputs[i].checked = false; 267 268 $inputs[i].onclick = function () { 269 if (this.id >= 0) { 270 round(); 271 } else { 272 if (this.id == 'toFraction') { 273 toFraction = true; 274 $dpLabel.innerHTML = 'Maximum denominator:'; 275 $number.style.display = $roundings.style.display = 'none'; 276 } else { 277 $dpLabel.innerHTML = this.id == 'toPrecision' 278 ? 'Significant digits:' 279 : 'Decimal places:'; 280 $number.style.display = this.id == 'round' 281 ? 'none' 282 : 'block'; 283 $roundings.style.display = 'block'; 284 if (toFraction) toFraction = false; 285 } 286 $dp.value = $bignumber.value = $num.value = $code.innerHTML = ''; 287 lastFocus.focus(); 288 } 289 }; 290 } 291 292 $exceptionsTrue.onclick = $exceptionsFalse.onclick = round; 293 294 $input.onfocus = $dp.onfocus = function () { 295 lastFocus = this; 296 }; 297 298 $inputs[1].checked = $inputs[10].checked = $exceptionsTrue.checked = true; 299 300 document.onkeypress = function (e) { 301 if ((e || window.event).keyCode == 13) { 302 round(); 303 return false; 304 } else $num.value = $bignumber.value = ''; 305 }; 306 })(); 307 </script> 308 </body> 309 </html>