Html网页:修复bug

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
       #func {
           position:fixed;
           top: 0px;
           left: 0px;
           height: 100%;
           width: 20%;
           background-color: #f6f6f6;
           overflow-x: hidden;
           overflow-y: scroll;
           }
        .fuc {
          width: 100%;
          height: auto;
          background-color: #eee;
          font-size: 16px;
           }
        input {
          border: none;
          background-color: #eee;
          width: 50%;
            }
          #c { background-color: #f1b; }
          #canvas { position: fixed; top: 0%; left: 20%; height: 100%; width: 80%}
          .sj { border-bottom: 0.5px solid black; }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/9.4.4/math.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
</head>
<body>
    <div id='func'>
    <div id='1' class='fuc'><label for='3#' id='c'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>&nbsp;<input placeholder='输入函数…' id='1#'/>&nbsp;<button onclick='plotGraph()' style='background-color: #eee;color:black;border:none'>OK</button></div>
    <hr/>
    <div id='2' class='fuc'>函数名称: <input placeholder='输入名称…' id='2#' value='f'/><br/>函数颜色:<input id='3#' value='#f1b'/><br/>点密度:10^<label id='mi'>-1</label><input type='range' max='0' min='-3' value='-1' id='4#'/><br/>x最小值:<input id='5#' value='-10' placeholder='输入数字…'/><br/>x最大值:<input id='6#' value='10' placeholder='输入数字…'/></div>
   <hr/>
    <div id='3' class='fuc'><button style='border: 1px solid #ccc;color:black;width:95%;height:5%' onclick='ex()'>导出图片</button><br/><button style='border:1px solid #ccc;color:black;width:95%;height:5%' onclick='exf()'>导出文件</button><br/><label><input type="file" id="upload" style='display:none' accept='.fdf'/><button style='border:1px solid #ccc;color:black;width:95%;height:5%' onclick='imf()'>导入存档</button><br/><button style='border:1px solid #ccc;color:black;width:95%;height:5%' onclick='nf()'>录制视频</button></label></div>
  </div>
    <div id='canvas'><canvas id="myChart" width="100%" height="100%"></canvas></div>
    <div id='search' style='position:fixed;top:12%;left:5%;display:none;width:14%;background-color:#f6f6f6;height:10%;overflow-x:hideen;overflow-y:auto'></div>
    <script>
  var ce=document.getElementById("3#"),m=document.getElementById("4#"),miv=document.getElementById("5#"),mav=document.getElementById("6#");
      function plotGraph() {
            var userInputFunction = document.getElementById('1#').value;
            var fn = document.getElementById('2#').value;
            var parser = math.parser();
            parser.evaluate('f(x) = ' + userInputFunction);
            var data = [];
            for (var x = Number(miv.value); x <= Number(mav.value); x += 10**(m.value)) {
                var y = parser.evaluate('f(' + x + ')');
                data.push({x: x, y: y});
            }
            var ctx = document.getElementById('myChart').getContext('2d');
            var myChart = new Chart(ctx, {
                type: 'line',
                data: {
                    datasets: [{
                        label: fn,
                        data: data,
                        fill: false,
                        borderColor: ce.value,
                        tension: 0.1
                    }]
                },
                options: {
                    scales: {
                        x: {
                            type: 'linear',
                            position: 'bottom'
                        },
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        } 
      ce.addEventListener("keyup", function(e){
           if(e.key.search(/[^0123456789abcdefABCDEF]/)>=0 && ce.value.search("#")==0 && ce.value.length>1 && e.key!=='Backspace') ce.value='';
           if(ce.value.search("#")<0 && ce.value!='' && e.key!=='Enter'){
            var dt='aliceblue,antiquewhite,aqua,aquamarine,azure,bisque,black,blanchedalmond,blue,blueviolet,brown,burlywood,cadetblue,chartreuse,chocolate,coral,cornflowerblue,cornsilk,crimson,cyan,darkblue,darkcyan,darkgoldenrod,darkgray,darkgreen,darkgrey,darkkhaki,darkmagenta,darkolivegreen,darkorange,darkorchid,darkred,darksalmon,darkseagreen,darkslateblue,darkslategray,darkslategrey,darkturquoise,darkviolet,deeppink,deepskyblue,dimgray,dimgrey,dodgerblue,firebrick,floralwhite,forestgreen,fuchsia,gainsboro,ghostwhite,gold,goldenrod,gray,green,greenyellow,grey,honeydew,hotpink,indianred,indigo,ivory,khaki,lavender,lavenderblush,lawngreen,lemonchiffon,lightblue,lightcoral,lightcyan,lightgoldenrodyellow,lightgray,lightgreen,lightgrey,lightpink,lightsalmon,lightseagreen,lightskyblue,lightslategray,lightslategrey,lightsteelblue,lightyello,lime,linen,magenta,maroon,mediumaquamarine,mediumblue,mediumorchid,mediumpurple,mediumseagreen,mediumslateblue,mediumspringgreen,mediumturquoise,mediumvioletred,midnightblue,mintcream,mistyrose,moccasin,navajowhite,navy,oldlace,olive,olivedrab,orange,orangered,orchid,palegoldenrod,palegreen,paleturquoise,palevioletred,papayawhip,peachpuff,peru,pink,plum,powderblue,purple,red,rosybrown,royalblue,saddlebrown,salmon,sandybrown,seagreen,seashell,sienna,silver,skyblue,slateblue,slategray,slategrey,snow,springgreen,steelblue,tan,teal,thistle,tomato,turquoise,violet,wheat,white,whitesmoke,yellow,yellowgreen';
        dt=dt.split(',');
  for(var n=0; n<dt.length; n++){
         var s=dt[n];
         if(s.search(ce.value)<0) dt.splice(dt.findIndex(item => item === s), 1);
      }
       var sd=dt.map(m => '<div height="10px" width="100%" onclick="ce.value=\''+m+'\';document.getElementById(\'search\').style.display=\'none\'" class="sj"><label style="background-color:'+m+'">&nbsp;&nbsp;&nbsp;</label>'+m+'</div>').join('');
        document.getElementById("search").style.display='block';
        document.getElementById("search").innerHTML=sd;
             } else { document.getElementById("search").style.display='none' }
        document.getElementById("c").style["background-color"]=ce.value;
        });
     m.addEventListener("input", function(event){document.getElementById("mi").innerHTML=this.value;});
    function isn(e){ if(e.key.search(/[^0123456789.-]/)>=0 && e.key!=='Backspace' && e.key!=='Shift') this.value='' };
    miv.addEventListener("keyup", isn);
    mav.addEventListener("keyup", isn);
   function ex(){
       html2canvas(document.body).then(canvas => {
    var img = canvas.toDataURL("image/png");
    var a = document.createElement('a');
    a.href = img;
    a.download = '截屏.png';
    a.click();
  });
  };
   function exf(){
    var f = "{'fm':'"+document.getElementById('1#').value+"','fn':'"+document.getElementById('2#').value+"','color':'"+document.getElementById('3#').value+"','p':'"+document.getElementById('4#').value+"','miv':'"+miv.value+"','mav':'"+mav.value+"'}"
    var a = document.createElement('a');
    a.href =URL.createObjectURL(new Blob(['Function graph basic information'],f));
    a.download = '文档.fdf';
    a.click();
       }
    function imf(){
       var upload = document.querySelector('#upload');
upload.onchange = function (e) {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.readAsText(file);
        reader.onload = () => {
            var json;
            eval('json='+reader.result);
            document.getElementById('1#').value=json.fm;
            document.getElementById('2#').value=json.fn;
            ce.value=json.color;
            m.value=Number(json.p);
            miv.value=json.miv;
            mav.value=json.mav;
        }
        reader.onerror = (e) => {
           location.reload();
        }
    }
}
      }
 var imgs=[],lz=false
     function nf(){
       lz=(lz==false)
       if(lz==false){
        function createVideoFromImages(images, fps) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const stream = canvas.captureStream(fps);
  const recorder = new MediaRecorder(stream, { mimeType: 'video/webm' });
 
  let count = 0;
 
  recorder.ondataavailable = event => {
    if (event.data && event.data.size > 0) {
      const blob = new Blob([event.data], { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `video-${Date.now()}.webm`;
      a.click();
      URL.revokeObjectURL(url);
    }
  };
 
  recorder.start();
 
  const draw = () => {
    if (count >= images.length) {
      recorder.stop();
      return;
    }
 
    const image = new Image();
    image.onload = () => {
      canvas.width = image.width;
      canvas.height = image.height;
      ctx.drawImage(image, 0, 0);
    };
    image.src = images[count++];
 
    setTimeout(draw, 1000 / fps);
  };
 
  draw();
}
createVideoFromImages(imgs, 50); 
          };
       setInterval(function(){
         if(lz){
          html2canvas(document.body).then(canvas => {
               imgs.push(canvas);
  });
        };
             },20)
         }
    </script>
</body>
</html>

导出,导入文档,录屏功能不可用
页面截图:



点击这里测试