html--电击

最新推荐文章于 2024-05-23 20:09:14 发布
最新推荐文章于 2024-05-23 20:09:14 发布
阅读量906 收藏 7
点赞数 21
分类专栏： html 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/138822854
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  html,body{
	margin:0px;
	width:100%;
	height:100vh;
	overflow:hidden;
}

#canvas{
	width:100%;
	height:100%;
}

  </style>
 </HEAD>

 <BODY>
  <canvas id=c>
  <script>
  
  D=()=>{
  function project3D(x,y,z,vars){

    var p,d;
    x-=vars.camX;
    y-=vars.camY;
    z-=vars.camZ;
    p=Math.atan2(x,z);
    d=Math.sqrt(x*x+z*z);
    x=Math.sin(p-vars.yaw)*d;
    z=Math.cos(p-vars.yaw)*d;
    p=Math.atan2(y,z);
    d=Math.sqrt(y*y+z*z);
    y=Math.sin(p-vars.pitch)*d;
    z=Math.cos(p-vars.pitch)*d;
    return {x:vars.cx+x/z*vars.cx,y:vars.cy+y/z*vars.cx,d:z>=.1?Math.hypot(x,y,z):-1};
  }


  function reverseRasterize(depth, mx, my, vars){

    var vert=new Vert(),d,p;
    vert.x=vars.camX+(-vars.cx+mx)/vars.cx*depth;
    vert.y=vars.camY+(-vars.cy+my)/vars.cx*depth;
    vert.z=vars.camZ+depth;    
    d=Math.sqrt((vert.y-vars.camY)*(vert.y-vars.camY)+(vert.z-vars.camZ)*(vert.z-vars.camZ));
    p=Math.atan2(vert.y-vars.camY,vert.z-vars.camZ);
    vert.y=vars.camY+Math.sin(p+vars.pitch)*d;
    vert.z=vars.camZ+Math.cos(p+vars.pitch)*d;
    d=Math.sqrt((vert.x-vars.camX)*(vert.x-vars.camX)+(vert.z-vars.camZ)*(vert.z-vars.camZ));
    p=Math.atan2(vert.x-vars.camX,vert.z-vars.camZ);
    vert.x=vars.camX+Math.sin(p+vars.yaw)*d;
    vert.z=vars.camZ+Math.cos(p+vars.yaw)*d;

    d=Math.sqrt((vert.x-vars.camX)*(vert.x-vars.camX)+
          (vert.y-vars.camY)*(vert.y-vars.camY)+
          (vert.z-vars.camZ)*(vert.z-vars.camZ));
    var x = vert.x-vars.camX;
    var y = vert.y-vars.camY;
    var z = vert.z-vars.camZ;
    var t=d/depth;
    vert.x=vars.camX+x/t;
    vert.y=vars.camY+y/t;
    vert.z=vars.camZ+z/t;
    return vert;
  }


  function Vert(x,y,z){
    this.x = x;
    this.y = y;
    this.z = z;
  }


  function Seg(x1,y1,z1,x2,y2,z2){
    this.a = new Vert(x1,y1,z1);
    this.b = new Vert(x2,y2,z2);
    this.oa = new Vert(x1,y1,z1);
    this.ob = new Vert(x2,y2,z2);
    this.del=0;
  }


  function elevation(x,y,z){

    var dist = Math.sqrt(x*x+y*y+z*z);
    if(dist && z/dist>=-1 && z/dist <=1) return Math.acos(z / dist);
    return 0.00000001;
  }


  function process(vars){
    
    if(vars.mbutton)loadMaze(vars);
    var p,d,t;
    p = Math.atan2(vars.camX, vars.camZ);
    d = Math.sqrt(vars.camX * vars.camX + vars.camZ * vars.camZ) ;
    t = Math.cos(vars.frameNo / 80) / 150;
    vars.camX = Math.sin(p + t) * d;
    vars.camZ = Math.cos(p + t) * d;
    vars.camY = -Math.cos(vars.frameNo / 80) * 20;
    vars.yaw = Math.PI + p + t;
    vars.pitch = elevation(vars.camX, vars.camZ, vars.camY) - Math.PI / 2;
    
    //vars.selected=-1;

    for(var j=0;j<vars.attractors.length;++j){
      var mx = vars.attractors[j].rx;
      var my = vars.attractors[j].ry;
      var point=reverseRasterize(10000, mx, my, vars);
      for(var i=0;i<vars.shapes.length;++i){
        x=vars.shapes[i].x;
        y=vars.shapes[i].y;
        z=vars.shapes[i].z;
        vars.shapes[i].selected=0;
        var x1 = vars.shapes[i].x+vars.shapes[i].osegs[0].a.x;
        var y1 = vars.shapes[i].y+vars.shapes[i].osegs[0].a.y;
        var z1 = vars.shapes[i].z+vars.shapes[i].osegs[0].a.z;
        var x2 = vars.shapes[i].x+vars.shapes[i].osegs[1].a.x;
        var y2 = vars.shapes[i].y+vars.shapes[i].osegs[1].a.y;
        var z2 = vars.shapes[i].z+vars.shapes[i].osegs[1].a.z;
        var x3 = vars.shapes[i].x+vars.shapes[i].osegs[2].a.x;
        var y3 = vars.shapes[i].y+vars.shapes[i].osegs[2].a.y;
        var z3 = vars.shapes[i].z+vars.shapes[i].osegs[2].a.z;
        var D = -(x1*(y2*z3-y3*z2)+x2*(y3*z1-y1*z3)+x3*(y1*z2-y2*z1));
        var A = y1*(z2-z3)+y2*(z3-z1)+y3*(z1-z2);
        var B = z1*(x2-x3)+z2*(x3-x1)+z3*(x1-x2);
        var C = x1*(y2-y3)+x2*(y3-y1)+x3*(y1-y2);
        var uc = A*(vars.camX-point.x)+B*(vars.camY-point.y)+C*(vars.camZ-point.z);
        var u = uc?(A*vars.camX+B*vars.camY+C*vars.camZ+D)/uc:-1;
        x = vars.camX+u*(point.x-vars.camX);
        y = vars.camY+u*(point.y-vars.camY);
        z = vars.camZ+u*(point.z-vars.camZ);
        a=0;
        for(var k=0;k<vars.shapes[i].osegs.length;++k){
          var v1 = [vars.shapes[i].x+vars.shapes[i].osegs[k].a.x-x,
                vars.shapes[i].y+vars.shapes[i].osegs[k].a.y-y,
                vars.shapes[i].z+vars.shapes[i].osegs[k].a.z-z];
          var v2 = [vars.shapes[i].x+vars.shapes[i].osegs[k].b.x-x,
                vars.shapes[i].y+vars.shapes[i].osegs[k].b.y-y,
                vars.shapes[i].z+vars.shapes[i].osegs[k].b.z-z];
          d = Math.sqrt(v1[0]*v1[0]+v1[1]*v1[1]+v1[2]*v1[2]);
          v1[0] /= d;
          v1[1] /= d;
          v1[2] /= d;
          d = Math.sqrt(v2[0]*v2[0]+v2[1]*v2[1]+v2[2]*v2[2]);
          v2[0] /= d;
          v2[1] /= d;
          v2[2] /= d;
          a += Math.acos(v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]);
        }
        if(a>=Math.PI*2-.01){
          for(var m=0;m<i;++m) vars.shapes[m].selected=0;
          vars.shapes[i].selected=1;
          vars.selected[j]=i;
        }
      }
    }

    
    for(var i = 0; i<vars.attractors.length; ++i){
      vars.attractors[i].X+=vars.attractors[i].VX;
      vars.attractors[i].Y+=vars.attractors[i].VY;
      var a =0;
      for(var j=0;j<vars.container.segs.length;++j){
        var x = vars.attractors[i].x;
        var y = vars.attractors[i].y;
        var z = vars.attractors[i].z;
        var v1 = [vars.container.x+vars.container.osegs[j].a.x-x,
              vars.container.y+vars.container.osegs[j].a.y-y,
              vars.container.z+vars.container.osegs[j].a.z-z];
        var v2 = [vars.container.x+vars.container.osegs[j].b.x-x,
              vars.container.y+vars.container.osegs[j].b.y-y,
              vars.container.z+vars.container.osegs[j].b.z-z];
        d = Math.sqrt(v1[0]*v1[0]+v1[1]*v1[1]+v1[2]*v1[2]);
        v1[0] /= d;
        v1[1] /= d;
        v1[2] /= d;
        d = Math.sqrt(v2[0]*v2[0]+v2[1]*v2[1]+v2[2]*v2[2]);
        v2[0] /= d;
        v2[1] /= d;
        v2[2] /= d;
        a += Math.acos(v1[0] * v2[0] + v1[1] * v2[1] + v1[2] * v2[2]);

        var x1 = vars.attractors[i].X;
        var y1 = vars.attractors[i].Y;
        var x2 = vars.attractors[i].X+vars.attractors[i].VX*2;
        var y2 = vars.attractors[i].Y+vars.attractors[i].VY*2;
        var x3 = vars.container.segs[j].a.x;
        var y3 = vars.container.segs[j].a.y;
        var x4 = vars.container.segs[j].b.x;
        var y4 = vars.container.segs[j].b.y;
        var uc = (y4-y3)*(x2-x1)-(x4-x3)*(y2-y1);
        var ua = ((x4-x3)*(y1-y3)-(y4-y3)*(x1-x3))/uc;
        var ub = ((x2-x1)*(y1-y3)-(y2-y1)*(x1-x3))/uc;
        if(ua >= 0 && ua <= 1 && ub >= 0 && ub <= 1){
          var v = Math.hypot(vars.attractors[i].VX,vars.attractors[i].VY);
          var rix=x1-x2;
          var riy=y2-y1;
          var d=Math.hypot(rix,riy);
          rix/=d;
          riy/=d;
          var nx=y4-y3
          var ny=x4-x3
          var d=Math.hypot(nx,ny);
          nx/=d;
          ny/=d;
          d=rix*nx+riy*ny;
          rx=rix-2*nx*d;
          ry=riy-2*nx*d;
          d=Math.hypot(rx,ry);
          vars.attractors[i].VX = -rx/d*v;
          vars.attractors[i].VY = -ry/d*v;
        }
      }
      if(a>=Math.PI*2-.01 || Math.hypot(vars.attractors[i].X,vars.attractors[i].Y)>vars.containerRadius){
        vars.attractors[i].X=0;
        vars.attractors[i].Y=0;
      }
    }

    for(var i=0;i<vars.shapes.length;++i) vars.shapes[i].visited = 0;
      vars.path = [];
      tracePath(vars.selected[0], vars.selected[1],vars);
  }

  
  function tracePath(current,target,vars){
    if(vars.shapes[current].visited) return;
    vars.shapes[current].visited = 1;
    if(current == target) return 1;
    for(var i = 0; i < vars.shapes[current].connectingNodes.length; ++i){
      var t1 = vars.shapes[current].connectingNodes[i];
      if(tracePath(t1,target,vars)){
        vars.path.push({x:vars.shapes[t1].x,y:vars.shapes[t1].y,z:vars.shapes[t1].z});
        return 1;
      }
    }
  }


  function draw(vars){

    vars.ctx.globalAlpha=1;
    vars.ctx.fillStyle="#000";
    vars.ctx.fillRect(0, 0, c.width, c.height);

    var x,y,z,pt1,pt2;
    
    vars.ctx.globalAlpha=1;
    vars.ctx.strokeStyle=`hsl(${t*599},2%,30%`;
    for(var i=0;i<vars.shapes.length;++i){
      for(var j=0;j<vars.shapes[i].segs.length;++j){
        x=vars.shapes[i].x+vars.shapes[i].segs[j].a.x;
        y=vars.shapes[i].y+vars.shapes[i].segs[j].a.y;
        z=vars.shapes[i].z+vars.shapes[i].segs[j].a.z;
        pt1=project3D(x,y,z,vars);
        if(pt1.d != -1){
          x=vars.shapes[i].x+vars.shapes[i].segs[j].b.x;
          y=vars.shapes[i].y+vars.shapes[i].segs[j].b.y;
          z=vars.shapes[i].z+vars.shapes[i].segs[j].b.z;
          pt2=project3D(x,y,z,vars);
          vars.ctx.lineWidth=1+20/(1+pt1.d);
          vars.ctx.beginPath();
          vars.ctx.moveTo(pt1.x,pt1.y);
          vars.ctx.lineTo(pt2.x,pt2.y);
          vars.ctx.stroke();
        }
      }
    }
    
    if(vars.path.length){
      var X = vars.path[0].x;
      var Y = vars.path[0].y;
      var Z = vars.path[0].z;
      var point = project3D(X,Y,Z,vars);
      for(var i = 1; i < vars.path.length; ++i){
        vars.ctx.strokeStyle=`hsl(${180/vars.path.length*i+t*1000},100%,${66+Math.sin(t*8)*33}%)`;
        vars.ctx.beginPath();
        vars.ctx.lineWidth = 1+50/(1+point.d);
        vars.ctx.lineTo(point.x,point.y);
        X = vars.path[i].x;
        Y = vars.path[i].y;
        Z = vars.path[i].z;
        point = project3D(X,Y,Z,vars);
        vars.ctx.lineTo(point.x,point.y);
        vars.ctx.stroke();
      }
    }

    for(var i = 0; i < vars.attractors.length; ++i){
      X = vars.attractors[i].X;
      Y = vars.attractors[i].Y;
      Z = vars.attractors[i].Z;
      var point = project3D(X,Y,Z,vars);
      if(point.d != -1){
        vars.attractors[i].rx = point.x;
        vars.attractors[i].ry = point.y;
        var s=8000/(1+point.d);
        vars.ctx.drawImage(vars.star,point.x-s/2,point.y-s/2,s,s);
      }
    }
  }


  function createShape(x,y,z,sides,multiplier,theta=0){

    var shape={},ls=multiplier/2,x1,y1,z1,x2,y2,z2;
    shape.segs=[];
    shape.osegs=[];
    shape.x=x;
    shape.y=y;
    shape.z=z;
    shape.pathed=0;
    shape.visited = 0;
    shape.connectingNodes = [];
    for(var i=0;i<sides;++i){
      p=Math.PI*2/sides*i+theta;
      x1=Math.sin(p)*ls;
      y1=Math.cos(p)*ls;
      z1=0;
      p=Math.PI*2/sides*(i+1)+theta;
      x2=Math.sin(p)*ls;
      y2=Math.cos(p)*ls;
      z2=0;
      shape.segs.push(new Seg(x1,y1,z1,x2,y2,z2));
      shape.osegs.push(new Seg(x1,y1,z1,x2,y2,z2));
    }
    return shape;
  }


  function loadMaze(vars){
    
    vars.shapes=[];
    var p,sd=6,ls,x,y,z,x1,y1,z1,x2,y2,z2,x3,y3,z3,x4,y4,z4,size=Math.floor(160*(1/sd)),spacing;
    vars.sd=sd;
    var multiplier = 1;
    switch(sd){
      case 4: spacing=0.70710678118654752440084436210485*multiplier; break;
      case 6: spacing=0.86602540378443864676372317075294*multiplier; break;
    }
    vars.containerRadius = size*2*spacing*multiplier;
    vars.container = createShape(0,0,0,sd,vars.containerRadius,Math.PI/sd);
    for(var m=size;m>0;--m){
      ls=m*spacing;
      for(var j=0;j<sd;++j){
        p=Math.PI*2/sd*j+Math.PI/sd;
        x1=Math.sin(p)*ls;
        y1=Math.cos(p)*ls;
        z1=0;
        p=Math.PI*2/sd*(j+1)+Math.PI/sd;
        x2=Math.sin(p)*ls;
        y2=Math.cos(p)*ls;
        z2=0;
        for(var k=0;k<m;++k){
          x=x1+(x2-x1)/m*k;
          y=y1+(y2-y1)/m*k;
          z=z1+(z2-z1)/m*k;
          vars.shapes.push(createShape(x,y,z,sd,multiplier));
        }
      }
    }
    vars.shapes.push(createShape(0,0,0,sd,multiplier));
    
    var stepFound,d,t,t2=0,tries=0,subPathLength;
    vars.pathSegs=[];
    ls=spacing;
    x1=vars.shapes[t2].x;
    y1=vars.shapes[t2].y;
    z1=vars.shapes[t2].z;
    vars.shapes[t2].pathed=0;
    do{
      stepFound=0;
      for(var i=0;i<sd*2&&!stepFound;++i){
        t=Math.floor(Math.random()*sd);
        p=Math.PI*2/sd*t+Math.PI/sd;
        x2=x1+Math.sin(p)*ls;
        y2=y1+Math.cos(p)*ls;
        z2=z1;
        for(var j=0;j<vars.shapes.length&&!stepFound;++j){
          if(!vars.shapes[j].pathed){
            x3=vars.shapes[j].x;
            y3=vars.shapes[j].y;
            z3=vars.shapes[j].z;
            d=Math.sqrt((x3-x2)*(x3-x2)+(y3-y2)*(y3-y2));
            if(d<.001){
              stepFound=1;
              subPathLength++;
              tries=0;
              vars.pathSegs.push(new Seg(x1,y1,z1,x3,y3,z3));
              vars.pathSegs[vars.pathSegs.length-1].a.index=t2;
              vars.pathSegs[vars.pathSegs.length-1].b.index=j;
              vars.shapes[t2].segs[t].del=1;
              vars.shapes[j].segs[(t+sd/2)%sd].del=1;
              t2=j;
              x1=vars.shapes[t2].x;
              y1=vars.shapes[t2].y;
              z1=vars.shapes[t2].z;
              vars.shapes[t2].pathed=vars.pathSegs.length;
            }
          }
        }
      }
      if(subPathLength>12||tries>sd*2){
        subPathLength=0;
        t2=vars.pathSegs[Math.ceil(Math.random()*(vars.pathSegs.length-1))].b.index;
        x1=vars.shapes[t2].x;
        y1=vars.shapes[t2].y;
        z1=vars.shapes[t2].z;
      }
      tries++;
      complete=1;
      for(var i=1;i<vars.shapes.length&&complete;++i){
        if(!vars.shapes[i].pathed)complete=0;
      }
    }while(!complete);
    for(var i=0;i<vars.shapes.length;++i){
      for(var j=vars.shapes[i].segs.length-1;j>=0;--j){
        if(vars.shapes[i].segs[j].del) vars.shapes[i].segs.splice(j,1);
      }
    }
    
    for(var i = 0; i < vars.pathSegs.length; ++i){
      vars.shapes[vars.pathSegs[i].a.index].connectingNodes.push(vars.pathSegs[i].b.index);
    }
    for(var i = 0; i < vars.shapes.length; ++i){
      for(var j = 0; j < vars.pathSegs.length; ++j){
        if(vars.pathSegs[j].b.index == i)vars.shapes[i].connectingNodes.push(vars.pathSegs[j].a.index);
      }
      for(var m = 0;m<vars.shapes[i].segs.length;++m){
        for(var j = 0; j < vars.shapes.length; ++j){
          if(i!=j && Math.hypot(vars.shapes[i].x-vars.shapes[j].x,vars.shapes[i].y-vars.shapes[j].y)<spacing*2.1){
            for(var n = 0;n<vars.shapes[j].segs.length;++n){
              var X1 = vars.shapes[i].x+vars.shapes[i].segs[m].a.x;
              var Y1 = vars.shapes[i].y+vars.shapes[i].segs[m].a.y;
              var X2 = vars.shapes[i].x+vars.shapes[i].segs[m].b.x;
              var Y2 = vars.shapes[i].y+vars.shapes[i].segs[m].b.y;
              var X3 = vars.shapes[j].x+vars.shapes[j].segs[n].a.x;
              var Y3 = vars.shapes[j].y+vars.shapes[j].segs[n].a.y;
              var X4 = vars.shapes[j].x+vars.shapes[j].segs[n].b.x;
              var Y4 = vars.shapes[j].y+vars.shapes[j].segs[n].b.y;
              var X =Math.abs((X4-X1)+(Y4-Y1))+Math.abs((X3-X2)+(Y3-Y2));
              if(X<.01)vars.shapes[j].segs.splice(n,1);
            }
          }
        }
      }
    }
    var totalSegs = 0;
    for(var i = 0; i < vars.shapes.length; ++i){
      totalSegs += vars.shapes[i].segs.length;
    }
  }


  function frame(vars) {

    if(vars === undefined){
      var vars={};
      vars.ctx = c.getContext("2d");
      c.width = window.innerWidth;
      c.height = window.innerHeight;
      window.addEventListener("resize", function(){
        c.width = window.innerWidth;
        c.height = window.innerHeight;
        vars.cx=c.width/2;
        vars.cy=c.height/2;
      }, true);
      vars.camX = 0;
      vars.camY = 0;
      vars.camZ = -65;
      vars.pitch = 0;
      vars.yaw = 0;
      vars.cx=c.width/2;
      vars.cy=c.height/2;
      vars.scale=600;
      vars.frameNo=0;
      vars.mx=0;
      vars.my=0;
      vars.path = [];
      vars.star = new Image();
      vars.star.src = "http://cantelope.net/space/star3.png";
      var p = Math.PI*2*Math.random();
      var VX1 = Math.sin(p)/4;
      var VY1 = Math.cos(p)/4;
      var p = Math.PI*2*Math.random();
      var VX2 = Math.sin(p)/3;
      var VY2 = Math.cos(p)/3;
      vars.attractors = [
        {X:0,Y:0,Z:0,VX:VX1,VY:VY1,rx:vars.cx,ry:vars.cy},
        {X:0,Y:0,Z:0,VX:VX2,VY:VY2,rx:vars.cx,ry:vars.cy}
      ];
      vars.selected=Array(2);
      loadMaze(vars);
    }

    vars.frameNo++;
    requestAnimationFrame(function() {
      frame(vars);
    });

    process(vars);
    draw(vars);
    t+=1/60;
  }
  frame();
}
t=0;
D();
  </script>
 </BODY>
</HTML>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
  • 21
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
HTML+JS页面放大缩小
急急如律令
01-28 1045
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title></title> </head> <body id="img" bgcolor="#CCCCCC" onmousewheel="return bbimg(this)" > <h1>测试放大缩小</h1> <div style="wi
HTML5设计注册/登录界面
热门推荐
m0_62101200的博客
06-25 2万+
因为我们注册或者登录时是需要提交信息给后台的，所以需要用到表单form标签 span标签是一个基本的文本标签 如果需要登录是要点登录进行页面跳转的，所以我们需要使用a标签进行网址跳转 input标签也就是需要用户进行自行输入信息，并且可以通过type属性进行指定输入文本框的类型，比如我们输入密码时需要进行屏蔽，因而可以设置password属性，在输入密码期间可以不显示具体文本，达到隐私隐藏效果 设置按钮需要用到button标签，其实也可以用input标签，然后设置属性为button，也可以达到同样的
html 案例 --- 网页简历 、简历信息填写
GoodManS的CSDN
10-26 489
html 案例 --- 网页简历 、简历信息填写。练习、复习 html
html标签汇总
突破吧！次元壁
03-12 305
标题标签 <h1> - <h6> 加了标签之后会变大变粗，越小越大哦 段落标签 在html中多个空格视为一个，不识别回车，分段需要段落标签 <p> </p> 换行标签 将文字强制换行,标签为单标签 只有段落与段落之间有较大空隙，而换行没有 <br /> 文本格式化 粗体 <strong> </...
html元素从小变大,JS点击让元素变大
weixin_30444697的博客
06-19 586
这个例子，点一次按钮，图就变大一点html>#kk{/*width:300px;*/height:280px;background:#DDA0DD;margin:100pxauto;}window.onload=function(){//为了方便,把能用到的先抓元素,先存到一个变量里!变量的名字可以随便取，取跟id名字一样是为了好用vardd=document.getEl...
html&css学习 5
weixin_44679038的博客
09-26 89
伪类选择器 伪类专门用来表示元素的一种特殊的状态 比如：访问过的链接，普通超链接，获取焦点的文本框，当我们需要为处在这些特殊状态的元素设置样式时就可以使用伪类 给链接定义样式： 有四个伪类可以让你根据访问者与该链接的交互方式，将连接设置成4种不同的状态 正常链接：a:link 访问过的链接：a:visited(只能定义字体颜色) 鼠标划过的链接：a:hover 正在点击的链接：a:...
vue中v-on的参数问题
Firoly的博客
02-24 9611
vue中v-on:clock的使用最近在学习vue.js框架。记下其中遇到的一些问题，以便以后查阅。 首先，这是一个页面(为了便于观察，将各个标签都一一着色)： 其中html代码：<div class="groupbody "> <ul class="list "> <li v-for="cell in todo.groupbody " class="page
2021-01-09
qq_51707222的博客
01-09 78
css的引入方式： 在head标签内使用link标签来引入外部样式表 rel：取值为stylesheet时说明其是一个样式脚本 type：text/css是一个css文本 herf：给定引入资源的路径 例如： ！内部样式标定义在html当中的head标签内，使用一对style标签内部样式表 ！type属性当中给定text/css说明当前时css文本 css样式分两部分：大括号前为选择器，大括号当中是css对象 css称为层叠样式表 css的三种引入方式：内联样式(直接放在标签内) 内部样式(用选择器) 外部
html+JS实现点击按钮实现文字持续变大变小实例
仿站、源码搭建/迁移技术博客
09-14 1596
前言 html+JS实现点击按钮实现文字持续变大变小实例 实例代码 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script> window.onload = function(){ var o
电击手环-电路方案
04-20
利用Zigbee 透传，发送串口指令，用于VR，单兵对抗中的惩戒，增加趣味性
电子功用-电击检测器
09-15
行业资料-电子功用-电击检测器
鼠标左键电击器-自动点击
04-23
鼠标左键电击器-自动点击
电子政务-电击线结构.zip
09-17
电子政务-电击线结构.zip
电子政务-催泪电击棍.zip
09-14
电子政务-催泪电击棍.zip
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 932
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
前端基础入门三大核心之HTML篇：深入解析PNG8、PNG16、PNG24与PNG32的差异及网页应用指南
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-23 1072
理解PNG格式的不同变体及其适用场景，是前端开发者必备的基础技能之一。通过合理的选用，不仅能提升网站的视觉效果，还能确保良好的性能体验。在实际工作中，你还遇到过哪些关于图像格式选择的挑战？或是有独到的优化策略？欢迎在评论区分享你的见解和经验，让我们一起探讨前端图像优化的更多可能性。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页(5个页面)
weixin_42283461的博客
05-22 1072
HTML静态网页成品作业(HTML+CSS)——动漫海绵宝宝介绍网页(5个页面)
动态插入HTML内容有哪些常见用法
codemami的博客
05-22 530
动态列表和表格：对于需要从服务器获取数据并在页面上显示的列表或表格，可以使用JavaScript动态插入HTML内容。当用户滚动到页面底部或点击“加载更多”按钮时，可以使用JavaScript动态加载并插入新的内容块。用户交互反馈：当用户在网页上进行某些操作时（如点击按钮、提交表单等），可以使用JavaScript动态插入HTML内容来提供即时的反馈或结果。实时更新：对于需要实时更新的网页内容（如聊天室、股票行情等），可以使用JavaScript定时从服务器获取最新数据，并动态更新页面上的HTML元素。
ul 943-2018下载
12-09
UL 943-2018是一项关于低压极端温度操作电击保护器的标准，该标准规定了这些保护器应该符合的最低安全要求。UL是全球性的安全科学组织，其标准在全球范围内被广泛应用和遵循。 UL 943-2018标准的下载可以帮助人们了解低压极端温度操作电击保护器的设计、测试和认证要求。这些保护器主要用于家庭和商业用途，可以避免在极端温度下发生触电事故。下载UL 943-2018标准可以帮助制造商、设计师和测试人员更好地了解如何设计和测试这些保护器，并且有助于确保它们符合国际安全标准。 此外，UL 943-2018的下载也对于消费者和最终用户非常重要。他们可以通过了解这个标准来选择符合安全要求的电击保护器，从而降低电击事故的风险。 总之，UL 943-2018标准的下载对于各个利益相关方来说都非常重要，它有助于确保低压极端温度操作电击保护器的安全性能，避免潜在的触电危险。因此，建议相关行业人员和消费者都对UL 943-2018标准进行下载并学习，以共同维护电气安全。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值