企业官网建设流程全解析

!DOCTYPEhtmlhtmlheadmetacharsetUTF-8title三角不等式动态演示||x|-|a|| ≤ |x-a|/titlestylecanvas{background:#f8f9fa;border:1px solid #ccc;display:block;margin:20px auto;}.controls{text-align:center;font-family:Arial,sans-serif;}input{width:300px;cursor:pointer;}p{font-size:18px;}.note{color:#555;font-size:14px;}/style/headbodydivclasscontrolsh3 三角不等式||x| - |a|| ≤ |x - a|/h3pa spanida_val0/spannbsp;nbsp;nbsp;x spanidx_val0/span/ppspanstylecolor:red;红色长度 ||x| - |a|| spanidd10/span/spanbrspanstylecolor:blue;蓝色长度 |x - a| spanidd20/span/spanbrstrong✅ 红色 ≤ 蓝色 永远成立/strong/pplabel拖动 a 的值/labelinputtyperangeida_slidermin-5max5step0.1value2/pplabel拖动 x 的值/labelinputtyperangeidx_slidermin-5max5step0.1value-2/ppclassnote 观察当 a 和 x 在原点同侧时红蓝长度相等brnbsp;nbsp;nbsp;nbsp;当 a 和 x 在原点异侧时红色长度小于蓝色长度。/p/divcanvasidcanvaswidth800height300/canvasscriptconstcanvasdocument.getElementById(canvas);constctxcanvas.getContext(2d);constwidth800,height300;canvas.widthwidth;canvas.heightheight;// 坐标映射数轴范围 -6 到 6画布 x 范围 100 到 700functiontoX(value){return100(value6)/12*600;}// 获取 DOM 元素constaSliderdocument.getElementById(a_slider);constxSliderdocument.getElementById(x_slider);constaValSpandocument.getElementById(a_val);constxValSpandocument.getElementById(x_val);constd1Spandocument.getElementById(d1);constd2Spandocument.getElementById(d2);functiondraw(){letaparseFloat(aSlider.value);letxparseFloat(xSlider.value);// 更新数值显示aValSpan.innerTexta.toFixed(2);xValSpan.innerTextx.toFixed(2);letabsAMath.abs(a);letabsXMath.abs(x);letd1Math.abs(absX-absA);letd2Math.abs(x-a);d1Span.innerTextd1.toFixed(3);d2Span.innerTextd2.toFixed(3);// 清空画布ctx.clearRect(0,0,width,height);// 绘制数轴ctx.beginPath();ctx.moveTo(50,height/2);ctx.lineTo(width-50,height/2);ctx.strokeStyle#aaa;ctx.stroke();// 绘制刻度for(letval-6;val6;val1){letxctoX(val);ctx.beginPath();ctx.moveTo(xc,height/2-5);ctx.lineTo(xc,height/25);ctx.stroke();ctx.fillStyle#333;ctx.fillText(val,xc-5,height/2-10);}// 原点标注ctx.fillStyleblack;ctx.fillText(0,toX(0)-5,height/2-10);// 画 a 点蓝色letaxtoX(a);ctx.beginPath();ctx.arc(ax,height/2,8,0,2*Math.PI);ctx.fillStyleblue;ctx.fill();ctx.fillStylewhite;ctx.fontbold 14px Arial;ctx.fillText(a,ax-4,height/24);// 画 x 点红色letxxtoX(x);ctx.beginPath();ctx.arc(xx,height/2,8,0,2*Math.PI);ctx.fillStylered;ctx.fill();ctx.fillStylewhite;ctx.fillText(x,xx-4,height/24);// 画 |a| 点浅蓝色位于正半轴letabsAxtoX(absA);ctx.beginPath();ctx.arc(absAx,height/2-40,6,0,2*Math.PI);ctx.fillStyle#66c2ff;ctx.fill();ctx.fillStyleblack;ctx.fillText(|a|,absAx-8,height/2-45);// 画 |x| 点浅红色位于正半轴letabsXxtoX(absX);ctx.beginPath();ctx.arc(absXx,height/2-40,6,0,2*Math.PI);ctx.fillStyle#ff9999;ctx.fill();ctx.fillStyleblack;ctx.fillText(|x|,absXx-8,height/2-45);// 绘制蓝色线段a 到 x实际距离ctx.beginPath();ctx.moveTo(ax,height/2);ctx.lineTo(xx,height/2);ctx.strokeStyleblue;ctx.lineWidth3;ctx.stroke();// 绘制红色线段|a| 到 |x|绝对值距离ctx.beginPath();ctx.moveTo(absAx,height/2-40);ctx.lineTo(absXx,height/2-40);ctx.strokeStylered;ctx.lineWidth3;ctx.stroke();// 可选从 a 和 x 到它们绝对值点的虚线展示翻折效果ctx.beginPath();ctx.moveTo(ax,height/2);ctx.lineTo(absAx,height/2-40);ctx.strokeStylegray;ctx.lineWidth1;ctx.setLineDash([5,5]);ctx.stroke();ctx.beginPath();ctx.moveTo(xx,height/2);ctx.lineTo(absXx,height/2-40);ctx.stroke();ctx.setLineDash([]);// 恢复实线// 标注长度ctx.font14px Arial;ctx.fillStyleblue;letmidX(axxx)/2;ctx.fillText(|x-a|,midX,height/2-15);ctx.fillStylered;letmidAbsX(absAxabsXx)/2;ctx.fillText(||x|-|a||,midAbsX,height/2-55);// 额外文字提示比较if(d1d2){ctx.fillStylegreen;ctx.fontbold 16px Arial;ctx.fillText(✓ 不等式成立,width-150,50);}}aSlider.addEventListener(input,draw);xSlider.addEventListener(input,draw);draw();/script/body/html