Цитата:
По-этому, сейчас прощупываю способы попутного указания свойств числам, чтобы сократить количество функций. (Чтобы на каждые «PCMPEQB»/«PCMPEQW»/«PCMPEQD»/«PCMPEQQ» не писать отдельные функции, а описать одну «PCMP» и вызывать её примерно вот так «BigInt(m).EQ.D.PCMP(n)», чтобы эти попутные «EQ» и «D» передавали маску, ширину слова и тип сравнения…) Но, оказывается, JavaScript знаю довольно плохо…:lol: |
Alikberov,
1. Стрелочная функция захватывает this при создании и не меняет его при вызове, т.е. твоё Number.prototype.__defineGetter__ ("ME", () => { this.PERSON = "Me"; return this; });Равносильно: var arrowThis = this; Number.prototype.__defineGetter__ ("ME", function () { arrowThis.PERSON = "Me"; return arrowThis; }); Где в arrowThis будет лежать в данном случае глобальный this, который в нестрогом режиме равен window, в строгом - undefined. 2. BigInt - это не Int64, это реально длинная арифметика, и она условно безгранична (ограниченна только платформой). |
Симуляция индикаторной микросхемы ИПВ72А-4/5X7
<html> <head> <title>ИПВ72А-4/5x7</title> <meta http-equiv="refresh" content="300; url=https://www.chipfind.ru/datasheet/proton/ipv72a45h7l.htm"> <script> var hIPV; var ctx; var mtx; var mask = 0; var data = 0; var tick = 0; var time = 0; var delay = 0; var speed = 1; // ...?speed=1 var fading = -1; // ...?fade=1 var stream = [ // ...?stream=D1_8E-6E-4E_1F-7F-5F_15-75-55_1F-7F-5F_15-75-55_1B-7B-5B_0E-6E-4E // 12 10 8 5 4 3 2 1 // DI \C EN Y5 Y4 Y3 Y2 Y1 // D7_D6_D5_D4_D3_D2_D1_D0 // ----------------------- // 1 1 0 <-- Prepare display start // 1 0 0 <-- Strobe first line // 0 1 1 <-- Display line // 0 1 0 <-- Prepare next line // 0 0 0 <-- Strobe next line // 0 1 1 <-- Display line // 0 1 0 <-- Prepare next line // 0 0 0 <-- Strobe next line 0xD1, 0x91, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x1F, 0x7F, 0x5F, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x1F, 0x7F, 0x5F, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x1E, 0x7E, 0x5E, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x1F, 0x7F, 0x5F, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x10, 0x70, 0x50, 0x1F, 0x7F, 0x5F, 0x0E, 0x6E, 0x4E, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x11, 0x71, 0x51, 0x0E, 0x6E, 0x4E ]; function main() { const user_stream = window.location.href.match(/stream=([0-9_A-F+-]+)/i); const user_speed = window.location.href.match(/speed=(\d+)/i); const user_fade = window.location.href.match(/fade=(\d+)/i); const pins = "Y1 Y2 Y3 Y4 Y5 CH DO EN +5 C 0V DI".split(/\s+/); hIPV = document.getElementById("IPV"); ctx = hIPV.getContext("2d"); ctx.clearRect(0, 0, hIPV.width, hIPV.height); mtx = ctx.getImageData(0, 0, 400, 128); for(var i = 0; i < mtx.data.length; i += 4) { mtx.data[i] = 255; mtx.data[i + 1] = 0; mtx.data[i + 2] = 0; mtx.data[i + 3] = 0; } ctx.fillStyle = "white"; ctx.fillRect(0, 0, 208, 256); ctx.strokeStyle = "black"; ctx.beginPath(); ctx.lineWidth = 2; ctx.rect(108, 7, 88, 240); ctx.rect(148, 94, 40, 75); ctx.rect(158, 130, 10, 20); ctx.moveTo(128, 7); ctx.lineTo(128, 247); ctx.rect(7, 7, 20, 160); for(var i = 0; i < 7; ++ i) { ctx.moveTo(108, 28 + (i + 4) * 20); ctx.lineTo(128, 28 + (i + 4) * 20); ctx.moveTo(7, 28 + i * 20); ctx.lineTo(27, 28 + i * 20); } ctx.stroke(); ctx.beginPath(); ctx.lineWidth = 1; for(var i = 0; i < 12; ++ i) { ctx.moveTo(88, 16 + i * 20); ctx.lineTo(108, 16 + i * 20); ctx.textAlign = "right"; ctx.strokeText(String(i + 1), 104, 12 + i * 20); ctx.textAlign = "left"; ctx.strokeText(pins[i], 110, 20 + i * 20); } ctx.strokeText("4x", 132, 135); ctx.textAlign = "center"; ctx.strokeText("5x7", 168, 115); for(var i = 0; i < 8; ++ i) { ctx.moveTo(27, 16 + i * 20); ctx.lineTo(88, 16 + (i < 5 ? i : (i - 5) * 2 + 7) * 20); ctx.strokeText(`D${i}`, 17, 20 + i * 20); } ctx.stroke(); if(user_stream) { stream = []; for(const data of user_stream[1].split(/[-_+]+/)) stream.push(parseInt(data, 16)); } if(user_speed) speed = parseInt(user_speed[1]); if(user_fade) fading = -parseInt(user_fade[1]); show(); } function show() { var digit; var x, y; var p, err; var fire; for(digit = 0; digit < 4; ++ digit) { err = [-1, 0, 1/4, 1.4][digit]; for(y = 0; y < 7; ++ y) { for(x = 0; x < 5; ++ x) { fire = ((data >> (4 - x)) & 1) > 0 && ((mask >> (digit * 7 + y)) & 1) > 0 && (data & 0x20) > 0 ? 255 : fading; p = (100 * digit + 12 * 400 * y + x * 12 + 8 + Math.floor(err * y)) * 4; mtx.data[p + 3] += fire; mtx.data[p + 3 + 4] += fire; mtx.data[p + 3 + 8] += fire; mtx.data[p + 3 + 12] += fire; mtx.data[p + 3 + 16] += fire; mtx.data[p + 3 + 20] += fire; mtx.data[p + 3 + 24] += fire; mtx.data[p + 3 + 1600] += fire; mtx.data[p + 3 + 1600 + 4] += fire; mtx.data[p + 3 + 1600 + 8] += fire; mtx.data[p + 3 + 1600 + 12] += fire; mtx.data[p + 3 + 1600 + 16] += fire; mtx.data[p + 3 + 1600 + 20] += fire; mtx.data[p + 3 + 1600 + 24] += fire; mtx.data[p + 3 + 3200] += fire; mtx.data[p + 3 + 3200 + 4] += fire; mtx.data[p + 3 + 3200 + 8] += fire; mtx.data[p + 3 + 3200 + 12] += fire; mtx.data[p + 3 + 3200 + 16] += fire; mtx.data[p + 3 + 3200 + 20] += fire; mtx.data[p + 3 + 3200 + 24] += fire; mtx.data[p + 3 + 4800] += fire; mtx.data[p + 3 + 4800 + 4] += fire; mtx.data[p + 3 + 4800 + 8] += fire; mtx.data[p + 3 + 4800 + 12] += fire; mtx.data[p + 3 + 4800 + 16] += fire; mtx.data[p + 3 + 4800 + 20] += fire; mtx.data[p + 3 + 4800 + 24] += fire; mtx.data[p + 3 + 6400] += fire; mtx.data[p + 3 + 6400 + 4] += fire; mtx.data[p + 3 + 6400 + 8] += fire; mtx.data[p + 3 + 6400 + 12] += fire; mtx.data[p + 3 + 6400 + 16] += fire; mtx.data[p + 3 + 6400 + 20] += fire; mtx.data[p + 3 + 6400 + 24] += fire; mtx.data[p + 3 + 8000] += fire; mtx.data[p + 3 + 8000 + 4] += fire; mtx.data[p + 3 + 8000 + 8] += fire; mtx.data[p + 3 + 8000 + 12] += fire; mtx.data[p + 3 + 8000 + 16] += fire; mtx.data[p + 3 + 8000 + 20] += fire; mtx.data[p + 3 + 8000 + 24] += fire; } } } ctx.putImageData(mtx, 236, 76); for(var z = 0; z < 2; ++ z) { ctx.strokeStyle = ["blue", "red"][z]; ctx.fillStyle = ["grey", "silver"][z]; ctx.beginPath(); for(var i = 0; i < 8; ++ i) { if(((data >> i) & 1) == z) { ctx.moveTo(27, 16 + i * 20); ctx.lineTo(88, 16 + (i < 5 ? i : (i - 5) * 2 + 7) * 20); ctx.fillRect(8, 8.5 + i * 20, 18, 17.5); ctx.strokeText(`D${i}`, 17, 20 + i * 20); } } ctx.stroke(); } if(tick == 1 && (data & 0x40) == 0) mask = ((mask & 0x07FFFFFF) << 1) | ((data & 0x80) >> 7); tick = (data & 0x40) >> 6; data = stream[time]; if(-- delay < 0) { delay = speed; if(++ time >= stream.length) time = 0; } requestAnimationFrame(show); } </script> <style> body { margin :0 0 0 0; } canvas { background-image:url('https://optochip.org/docum/store/factory/series/140509/1487235592-2-4687.jpg'); background-position: 178px -34px; background-size :77%; } </style> </head> <body onload='main()'> <canvas id=IPV width=640 height=256></canvas> </body> |
Цитата:
Цитата:
|
Alikberov,
для this Number Number.prototype.__defineGetter__ ("ME", function() { this.PERSON = "Me"; return this; }); |
Интерактивный генератор УГО микросхем
<html> <head> <title>Logisim Part Design Generator</title> <script> var hDesigner; var hDesign; var hModel; function draw() { const ctx = hDesign; const dsg = hDesigner.value.split(/\r?\n/); // var model = []; // let fnt = { PIDS :"9px Serif", PINS :"7px Serif" }; let part = ""; let mode; let i; let y = 0; let maxy = 0; let space; let measure; // function setPin(font, anchor, x, y, text, circle) { model.push(' <text font-family="' + font.split(" ")[1] + '" font-size="' + parseInt(font) + '" text-anchor="' + anchor + '" x="' + x + '" y="' + y + '">' + text + '</text>'); if(circle < 0 || circle > 0) { model.push(' <ellipse cx="' + x + '" cy="' + (y - 3) + '" fill="none" rx="3.0" ry="3.0" stroke="#000000" stroke-width="2"/>'); model.push(' <polyline fill="none" points="' + x + ',' + (y - 8) + ',' + (x + 24 * circle) + ',' + (y - 8) +'" stroke="#000000" stroke-width="1"/>'); } } // ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); for(const str of dsg) { const rex = /([-.]|(\d+)([:;]\d+)*(_?)([A-Z]+)?(\d+)?(:(\d+))?(["']?))/ig; const rxp = /[-.]|(\d+)(([:;]\d+)+)?(_?)([A-Z]+)((\d+)?(:\d+)?)(["']?)/i; const dsc = (/(\w+)?\t*(.+)?/i).exec(str); var data; var last; var order; var names; var pin; if(dsc[1] != "") mode = dsc[1], y = 20; if(mode in fnt) fnt[mode] = dsc[2]; else if(dsc[2]) { for(const pin of dsc[2].match(rex)) { if(pin) { if(pin == "-") { y += 10; ctx.beginPath(); switch(mode) { case "PINPUT": ctx.moveTo(19, y); ctx.lineTo(49, y); model.push(``); break; case "PINOUT": ctx.moveTo(122, y); ctx.lineTo(92, y); break; } ctx.stroke(); } else if(pin != ".") { data = pin.match(rxp); if(data) { last = parseInt(data[1]); order = [last]; if(data[2]) { for(const col of data[2].match(/[:;]\d+/g)) { const next = parseInt(col.substr(1)); if(col.charAt(0) == ";") order.push(last = next); else if(last < next) while(last < next) order.push(++ last); else while(last > next) order.push(-- last); } } last = parseInt(data[6]); names = [last]; if(data[8]) { for(const col of data[8].match(/[:;]\d+/g)) { const next = parseInt(col.substr(1)); if(col.charAt(0) == ";") names.push(last = next); else if(last < next) while(last < next) names.push(++ last); else while(last > next) names.push(-- last); } } else names = [data[6]]; } if(data) space = data[9] == '"' ? 30 : data[9] == "'" ? 20 : 10; else space = 10; switch(mode) { case "PART": part = dsc[2].split(/\t+|\s+/); break; case "PINPUT": ctx.beginPath(); i = 0; ctx.font = fnt.PINS; ctx.textAlign = "right"; for(const id of order) { setPin(fnt.PINS, "end", 19 ,y + space * i + 8, id); ctx.strokeText(id, 19, y + space * i ++ + 8); } i = 0; ctx.font = fnt.PIDS; ctx.textAlign = "left"; for(const id of names) { if(data[4] == "_") { ctx.ellipse(19, y + space * i + 10, 2, 2, 0, 0, 2 * Math.PI, true); measure = ctx.measureText(data[5] + id); ctx.moveTo(22, y + space * i + 5); ctx.lineTo(22 + measure.width, y + space * i + 5); } setPin(fnt.PIDS, "start", 22, y + space * i + 13, data[5] + id, data[4] ? +1 : 0); ctx.strokeText(data[5] + id, 22, y + space * i + 13); ++ i; } ctx.stroke(); y += space * (i - 1) + 10; break; case "PINOUT": data = pin.match(rxp); ctx.beginPath(); i = 0; ctx.font = fnt.PINS; ctx.textAlign = "left"; for(const id of order) { setPin(fnt.PINS, "start", 122 ,y + space * i + 8, id); ctx.strokeText(id, 122, y + space * i ++ + 8); } i = 0; ctx.font = fnt.PIDS; ctx.textAlign = "right"; for(const id of names) { if(data[4] == "_") { ctx.ellipse(122, y + space * i + 10, 2, 2, 0, 0, 2 * Math.PI, true); measure = ctx.measureText(data[5] + id); ctx.moveTo(122, y + space * i + 5); ctx.lineTo(122 - measure.width, y + space * i + 5); } setPin(fnt.PIDS, "end", 119, y + space * i + 13, data[5] + id, data[4] ? -1 : 0); ctx.strokeText(data[5] + id, 119, y + space * i ++ + 13); } ctx.stroke(); y += space * (i - 1) + 10; break; } } else y += 10; } else y += 10; } } maxy = Math.max(maxy, y); } ctx.beginPath(); ctx.rect(19, 10, 103, maxy); ctx.moveTo(49, 10); ctx.lineTo(49, 10 + maxy); ctx.moveTo(92, 10); ctx.lineTo(92, 10 + maxy); ctx.textAlign = "center"; ctx.strokeText(part[1], 70, 20); ctx.strokeText(part[2], 70, maxy); ctx.stroke(); setPin(fnt.PIDS, "center", 70, 20, part[1]); setPin(fnt.PIDS, "center", 70, maxy, part[2]); hModel.value = model.join("\r\n"); } function main() { hModel = document.getElementById("Model"); hDesigner = document.getElementById("Designer"); hDesigner.addEventListener("keyup", draw); hDesign = document.getElementById("Design").getContext("2d"); draw(); } </script> <style> body { background-color:silver; } </style> </head> <body> <textarea id=Designer rows=6 cols=100 onkeyup='draw()'> PINS 7px Serif PIDS 9px Serif PART I8257 DMA ВТ57 PINPUT 7HLDA..-.12CLK.-.6RDY.-.13RES..-19:16DRQ0:3'-.11_CS PINOUT 10HRQ-4_MEMR 2_IOWR 1_IORD-32:35;37:40A0:7-30:26;23:21D0:7-8STB 9AEN-14_DAC2 </textarea><br /> <canvas id=Design width=300 height=400></canvas><br> <textarea id=Model rows=6 cols=100></textarea> <script>main();</script> </body> |
Кaк получить доступ к исходному тексту стиля на странице, включая форматирование (табуляцию, комментарии и т.д.):
<style> .myStyle { background-color:red; /* The Red background */ }</style>Почему-то нету в структурах исходного (моего же) стиля, как я его вставил в документ (не внешний css-файл).:no: Спасибо!:thanks: |
Alikberov,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> .myStyle { background-color: red; /* The Red background */ } </style> </head> <body> <script> document.addEventListener("DOMContentLoaded", function() { let elem = document.querySelector("style"); alert(elem.textContent); }) </script> </body> </html> здесь создайте свою тему, тама есть кнопа ![]() |
Цитата:
Спасибо за CSS-подсказку!:thanks: Ещё один вопрос: А можно ли ускорить как-то собственные скрипты, сгенерированные на лету? Разрабатываю оболочку с кучей getter/setter'ов и столкнулся с чудовищной просадкой производительности. Надеялся, что если всё упаковать в «new Function», то браузер хоть какую-то оптимизацию произведёт… Но, производительность ниже плинтуса!:haha: P.S.: Стоит ли смотреть в сторону «asmjs», если используются сплошные BigInt'ы? |
Цитата:
Цитата:
|
Часовой пояс GMT +3, время: 01:19. |