What's a doctype do?

来源:w3c
8.1.1 The DOCTYPE

DOCTYPE is a required preamble.

DOCTYPEs are required for legacy reasons. When omitted, browsers tend to use a different rendering mode that is incompatible with some specifications. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications.

A DOCTYPE must consist of the following components, in this order:

  1. A string that is an ASCII case-insensitive match for the string "<!DOCTYPE".
  2. One or more space characters.
  3. A string that is an ASCII case-insensitive match for the string "html".
  4. Optionally, a DOCTYPE legacy string or an obsolete permitted DOCTYPE string (defined below).
  5. Zero or more space characters.
  6. A ">" (U+003E) character.

In other words, <!DOCTYPE html>, case-insensitively.


For the purposes of HTML generators that cannot output HTML markup with the short DOCTYPE "<!DOCTYPE html>", a DOCTYPE legacy string may be inserted into the DOCTYPE (in the position defined above). This string must consist of:

  1. One or more space characters.
  2. A string that is an ASCII case-insensitive match for the string "SYSTEM".
  3. One or more space characters.
  4. A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the quote mark).
  5. The literal string "about:legacy-compat".
  6. A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled quote mark).

In other words, <!DOCTYPE html SYSTEM "about:legacy-compat"> or <!DOCTYPE html SYSTEM 'about:legacy-compat'>, case-insensitively except for the part in single or double quotes.

The DOCTYPE legacy string should not be used unless the document is generated from a system that cannot output the shorter string.


To help authors transition from HTML4 and XHTML1, an obsolete permitted DOCTYPE string can be inserted into the DOCTYPE (in the position defined above). This string must consist of:

  1. One or more space characters.
  2. A string that is an ASCII case-insensitive match for the string "PUBLIC".
  3. One or more space characters.
  4. A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the first quote mark).
  5. The string from one of the cells in the first column of the table below. The row to which this cell belongs is the selected row.
  6. A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled first quote mark).
  7. If a system identifier is used,
    1. One or more space characters.
    2. A U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (the third quote mark).
    3. The string from the cell in the second column of the selected row.
    4. A matching U+0022 QUOTATION MARK or U+0027 APOSTROPHE character (i.e. the same character as in the earlier step labeled third quote mark).
Allowed values for public and system identifiers in an  obsolete permitted DOCTYPE string.
Public identifier System identifier System identifier optional?
-//W3C//DTD HTML 4.0//EN http://www.w3.org/TR/REC-html40/strict.dtd Yes
-//W3C//DTD HTML 4.01//EN http://www.w3.org/TR/html4/strict.dtd Yes
-//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd No
-//W3C//DTD XHTML 1.1//EN http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd No

DOCTYPE containing an obsolete permitted DOCTYPE string is an obsolete permitted DOCTYPE. Authors should not use obsolete permitted DOCTYPEs, as they are unnecessarily long.



Why?

Why specify a doctype? Because it defines which version of (X)HTML your document is actually using, and this is a critical piece of information needed by some tools processing the document.

For example, specifying the doctype of your document allows you to use tools such as the Markup Validator to check the syntax of your (X)HTML. Such tools won't be able to work if they do not know what kind of document you are using.

But the most important thing is that with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a "standard" rendering mode.


参考:http://www.w3.org/QA/2002/04/valid-dtd-list.html


<!DOCTYPE html> <html lang="zh - CN"> <head> <meta charset="UTF - 8"> <meta name="viewport" content="width=device - width, initial - scale = 1.0"> <title>单词卡片</title> <style> body { font - family: Arial, sans - serif; display: flex; justify - content: center; align - items: center; min - height: 100vh; margin: 0; background - color: #f4f4f4; } .card { width: 300px; height: 400px; position: relative; transform - style: preserve - 3d; transition: transform 0.5s ease; } .card.flipped { transform: rotateY(180deg); } .card - face { position: absolute; width: 100%; height: 100%; backface - visibility: hidden; display: flex; justify - content: center; align - items: center; font - size: 24px; box - shadow: 0 0 10px rgba(0, 0, 0, 0.2); } .front { background - color: #fff; z - index: 2; } .back { background - color: #e0e0e0; transform: rotateY(180deg); } button { margin - top: 20px; padding: 10px 20px; font - size: 16px; background - color: #007bff; color: #fff; border: none; border - radius: 5px; cursor: pointer; } </style> </head> <body> <div class="card" id="card"> <div class="card - face front" id="front"> <span id="word"></span> </div> <div class="card - face back" id="back"> <p><strong>释义:</strong> <span id="meaning"></span></p> <p><strong>例句:</strong> <span id="example"></span></p> </div> </div> <button id="nextButton">下一个</button> <script> const words = [ { word: "bandage", meaning: "n. 绷带;v. 用绷带包扎", example: "The doctor bandaged his wound carefully." }, { word: "break", meaning: "n. 间歇;休息;v. 打破", example: "Let's take a break." }, { word: "breathe", meaning: "v. 呼吸", example: "We need to breathe fresh air." }, { word: "climber", meaning: "n. 登山者;攀登者", example: "The climber reached the top of the mountain." }, { word: "cough", meaning: "n. & v. 咳嗽", example: "She has a bad cough." }, { word: "fever", meaning: "n. 发烧", example: "He has a fever and needs to see a doctor." }, { word: "foot", meaning: "n. 脚;足(复数形式为feet)", example: "He hurt his foot while running." }, { word: "get into", meaning: "陷入;参与", example: "Don't get into trouble." }, { word: "get off", meaning: "下车", example: "Please get off the bus at the next stop." }, { word: "headache", meaning: "n. 头痛", example: "I have a terrible headache." }, { word: "herself", meaning: "pron. (she的反身代词) 她自己", example: "She can do it herself." }, { word: "hurt", meaning: "v. (hurt /hurt/) (使) 疼痛;受伤", example: "My leg hurts." }, { word: "matter", meaning: "n. 问题;事情", example: "What's the matter?" }, { word: "onto", meaning: "prep. 向;朝", example: "He jumped onto the stage." }, { word: "passenger", meaning: "n. 乘客;旅客", example: "There are many passengers on the train." } ]; let currentIndex = 0; const card = document.getElementById('card'); const front = document.getElementById('front'); const back = document.getElementById('back'); const wordElement = document.getElementById('word'); const meaningElement = document.getElementById('meaning'); const exampleElement = document.getElementById('example'); const nextButton = document.getElementById('nextButton'); function showWord(index) { const wordObj = words[index]; wordElement.textContent = wordObj.word; meaningElement.textContent = wordObj.meaning; exampleElement.textContent = wordObj.example; } function flipCard() { card.classList.toggle('flipped'); } function nextWord() { currentIndex = (currentIndex + 1) % words.length; showWord(currentIndex); card.classList  
05-03
<!doctype html> <html> <head> <meta charset="utf-8"> <title>祝看到这个的新年快乐</title> <style> html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } </style> </head> <body> <canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas> <canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas" ></canvas> <audio id="myAudio" controls autoplay style="display: none;"> <source src="https://webfs.ali.kugou.com/202212311401/c12fd67b0106b68294c3eb354aec3786/part/0/1516896/KGTX/CLTX001/clip_488850641544fb4c6e14e6b8356d084f.mp3" type="audio/mpeg"> </audio> <div class="overlay"> <div class="tabs"> <div class="tabs-labels"><span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div> <div class="tabs-panels"> <ul class="tabs-panel commands"> </ul> </div> </div> </div> <script> function initVars(){ pi=Math.PI; ctx=canvas.getContext("2d"); canvas.width=canvas.clientWidth; canvas.height=canvas.clientHeight; cx=canvas.width/2; cy=canvas.height/2; playerZ=-25; playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0; scale=600; seedTimer=0;seedInterval=5,seedLife=100;gravity=.02; seeds=new Array(); sparkPics=new Array(); s="https://cantelope.org/NYE/"; for(i=1;i<=10;++i){ sparkPic=new Image(); sparkPic.src=s+"spark"+i+".png"; sparkPics.push(sparkPic); } sparks=new Array(); pow1=new Audio(s+"pow1.ogg"); pow2=new Audio(s+"pow2.ogg"); pow3=new Audio(s+"pow3.ogg"); pow4=new Audio(s+"pow4.ogg"); frames = 0; } function rasterizePoint(x,y,z){ var p,d; x-=playerX; y-=playerY; z-=playerZ; p=Math.atan2(x,z); d=Math.sqrt(x*x+z*z); x=Math.sin(p-yaw)*d; z=Math.cos(p-yaw)*d; p=Math.atan2(y,z); d=Math.sqrt(y*y+z*z); y=Math.sin(p-pitch)*d; z=Math.cos(p-pitch)*d; var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1); if(!uc) return {x:0,y:0,d:-1}; var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc; var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc; if(!z)z=.000000001; if(ua>0&&ua<1&&ub>0&&ub<1){ return { x:cx+(rx1+ua*(rx2-rx1))*scale, y:cy+y/z*scale, d:Math.sqrt(x*x+y*y+z*z) }; }else{ return { x:cx+(rx1+ua*(rx2-rx1))*scale, y:cy+y/z*scale, d:-1 }; } } function spawnSeed(){ seed=new Object(); seed.x=-50+Math.random()*100; seed.y=25; seed.z=-50+Math.random()*100; seed.vx=.1-Math.random()*.2; seed.vy=-1.5;//*(1+Math.random()/2); seed.vz=.1-Math.random()*.2; seed.born=frames; seeds.push(seed); } function splode(x,y,z){ t=5+parseInt(Math.random()*150); sparkV=1+Math.random()*2.5; type=parseInt(Math.random()*3); switch(type){ case 0: pic1=parseInt(Math.random()*10); break; case 1: pic1=parseInt(Math.random()*10); do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1); break; case 2: pic1=parseInt(Math.random()*10); do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1); do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2); break; } for(m=1;m<t;++m){ spark=new Object(); spark.x=x; spark.y=y; spark.z=z; p1=pi*2*Math.random(); p2=pi*Math.random(); v=sparkV*(1+Math.random()/6) spark.vx=Math.sin(p1)*Math.sin(p2)*v; spark.vz=Math.cos(p1)*Math.sin(p2)*v; spark.vy=Math.cos(p2)*v; switch(type){ case 0: spark.img=sparkPics[pic1]; break; case 1: spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2]; break; case 2: switch(parseInt(Math.random()*3)){ case 0: spark.img=sparkPics[pic1]; break; case 1: spark.img=sparkPics[pic2]; break; case 2: spark.img=sparkPics[pic3]; break; } break; } spark.radius=25+Math.random()*50; spark.alpha=1; spark.trail=new Array(); sparks.push(spark); } switch(parseInt(Math.random()*4)){ case 0: pow=new Audio(s+"pow1.ogg"); break; case 1: pow=new Audio(s+"pow2.ogg"); break; case 2: pow=new Audio(s+"pow3.ogg"); break; case 3: pow=new Audio(s+"pow4.ogg"); break; } d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ)); /*pow.volume=1.5/(1+d/10)*/; pow.play(); } function doLogic(){ if(seedTimer<frames){ seedTimer=frames+seedInterval*Math.random()*10; spawnSeed(); } for(i=0;i<seeds.length;++i){ seeds[i].vy+=gravity; seeds[i].x+=seeds[i].vx; seeds[i].y+=seeds[i].vy; seeds[i].z+=seeds[i].vz; if(frames-seeds[i].born>seedLife){ splode(seeds[i].x,seeds[i].y,seeds[i].z); seeds.splice(i,1); } } for(i=0;i<sparks.length;++i){ if(sparks[i].alpha>0 && sparks[i].radius>5){ sparks[i].alpha-=.01; sparks[i].radius/=1.02; sparks[i].vy+=gravity; point=new Object(); point.x=sparks[i].x; point.y=sparks[i].y; point.z=sparks[i].z; if(sparks[i].trail.length){ x=sparks[i].trail[sparks[i].trail.length-1].x; y=sparks[i].trail[sparks[i].trail.length-1].y; z=sparks[i].trail[sparks[i].trail.length-1].z; d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z)); if(d>9){ sparks[i].trail.push(point); } }else{ sparks[i].trail.push(point); } if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1); sparks[i].x+=sparks[i].vx; sparks[i].y+=sparks[i].vy; sparks[i].z+=sparks[i].vz; sparks[i].vx/=1.075; sparks[i].vy/=1.075; sparks[i].vz/=1.075; }else{ sparks.splice(i,1); } } p=Math.atan2(playerX,playerZ); d=Math.sqrt(playerX*playerX+playerZ*playerZ); d+=Math.sin(frames/80)/1.25; t=Math.sin(frames/200)/40; playerX=Math.sin(p+t)*d; playerZ=Math.cos(p+t)*d; yaw=pi+p+t; } function rgb(col){ var r = parseInt((.5+Math.sin(col)*.5)*16); var g = parseInt((.5+Math.cos(col)*.5)*16); var b = parseInt((.5-Math.sin(col)*.5)*16); return "#"+r.toString(16)+g.toString(16)+b.toString(16); } function draw(){ ctx.clearRect(0,0,cx*2,cy*2); ctx.fillStyle="#ff8"; for(i=-100;i<100;i+=3){ for(j=-100;j<100;j+=4){ x=i;z=j;y=25; point=rasterizePoint(x,y,z); if(point.d!=-1){ size=250/(1+point.d); d = Math.sqrt(x * x + z * z); a = 0.75 - Math.pow(d / 100, 6) * 0.75; if(a>0){ ctx.globalAlpha = a; ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } } } ctx.globalAlpha=1; for(i=0;i<seeds.length;++i){ point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z); if(point.d!=-1){ size=200/(1+point.d); ctx.fillRect(point.x-size/2,point.y-size/2,size,size); } } point1=new Object(); for(i=0;i<sparks.length;++i){ point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z); if(point.d!=-1){ size=sparks[i].radius*200/(1+point.d); if(sparks[i].alpha<0)sparks[i].alpha=0; if(sparks[i].trail.length){ point1.x=point.x; point1.y=point.y; switch(sparks[i].img){ case sparkPics[0]:ctx.strokeStyle="#f84";break; case sparkPics[1]:ctx.strokeStyle="#84f";break; case sparkPics[2]:ctx.strokeStyle="#8ff";break; case sparkPics[3]:ctx.strokeStyle="#fff";break; case sparkPics[4]:ctx.strokeStyle="#4f8";break; case sparkPics[5]:ctx.strokeStyle="#f44";break; case sparkPics[6]:ctx.strokeStyle="#f84";break; case sparkPics[7]:ctx.strokeStyle="#84f";break; case sparkPics[8]:ctx.strokeStyle="#fff";break; case sparkPics[9]:ctx.strokeStyle="#44f";break; } for(j=sparks[i].trail.length-1;j>=0;--j){ point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z); if(point2.d!=-1){ ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2; ctx.beginPath(); ctx.moveTo(point1.x,point1.y); ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d); ctx.lineTo(point2.x,point2.y); ctx.stroke(); point1.x=point2.x; point1.y=point2.y; } } } ctx.globalAlpha=sparks[i].alpha; ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size); } } } function frame(){ if(frames>100000){ seedTimer=0; frames=0; } frames++; draw(); doLogic(); requestAnimationFrame(frame); } window.addEventListener("resize",()=>{ canvas.width=canvas.clientWidth; canvas.height=canvas.clientHeight; cx=canvas.width/2; cy=canvas.height/2; }); initVars(); frame(); window.onload = function(){ setInterval("toggleSound()",100); } function toggleSound() { var music = document.getElementById("myAudio");//获取ID if (music.paused) { //判读是否播放 music.paused=false; music.play(); //没有就播放 } } </script> <script > /* author:sakura */ var S = { init: function () { var action = window.location.href, i = action.indexOf('?a='); S.Drawing.init('.canvas'); document.body.classList.add('body--ready'); if (i !== -1) { S.UI.simulate(decodeURI(action).substring(i + 3)); } else { S.UI.simulate('|#countdown 10||2026|新年快乐'); } S.Drawing.loop(function () { S.Shape.render(); }); } }; S.Drawing = (function () { var canvas, context, renderFn requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; return { init: function (el) { canvas = document.querySelector(el); context = canvas.getContext('2d'); this.adjustCanvas(); window.addEventListener('resize', function (e) { S.Drawing.adjustCanvas(); }); }, loop: function (fn) { renderFn = !renderFn ? fn : renderFn; this.clearFrame(); renderFn(); requestFrame.call(window, this.loop.bind(this)); }, adjustCanvas: function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }, clearFrame: function () { context.clearRect(0, 0, canvas.width, canvas.height); }, getArea: function () { return { w: canvas.width, h: canvas.height }; }, drawCircle: function (p, c) { context.fillStyle = c.render(); context.beginPath(); context.arc(p.x, p.y, p.z, 0, 2 * Math.PI, true); context.closePath(); context.fill(); } } }()); S.UI = (function () { var canvas = document.querySelector('.canvas'), interval, isTouch = false, //('ontouchstart' in window || navigator.msMaxTouchPoints), currentAction, resizeTimer, time, maxShapeSize = 30, firstAction = true, sequence = [], cmd = '#'; function formatTime(date) { var h = date.getHours(), m = date.getMinutes(), m = m < 10 ? '0' + m : m; return h + ':' + m; } function getValue(value) { return value && value.split(' ')[1]; } function getAction(value) { value = value && value.split(' ')[0]; return value && value[0] === cmd && value.substring(1); } function timedAction(fn, delay, max, reverse) { clearInterval(interval); currentAction = reverse ? max : 1; fn(currentAction); if (!max || (!reverse && currentAction < max) || (reverse && currentAction > 0)) { interval = setInterval(function () { currentAction = reverse ? currentAction - 1 : currentAction + 1; fn(currentAction); if ((!reverse && max && currentAction === max) || (reverse && currentAction === 0)) { clearInterval(interval); } }, delay); } } function reset(destroy) { clearInterval(interval); sequence = []; time = null; destroy && S.Shape.switchShape(S.ShapeBuilder.letter('')); } function performAction(value) { var action, value, current; // overlay.classList.remove('overlay--visible'); sequence = typeof(value) === 'object' ? value : sequence.concat(value.split('|')); // input.value = ''; // checkInputWidth(); timedAction(function (index) { current = sequence.shift(); action = getAction(current); value = getValue(current); switch (action) { case 'countdown': value = parseInt(value) || 10; value = value > 0 ? value : 10; timedAction(function (index) { if (index === 0) { if (sequence.length === 0) { S.Shape.switchShape(S.ShapeBuilder.letter('')); } else { performAction(sequence); } } else { S.Shape.switchShape(S.ShapeBuilder.letter(index), true); } }, 1000, value, true); break; case 'rectangle': value = value && value.split('x'); value = (value && value.length === 2) ? value : [maxShapeSize, maxShapeSize / 2]; S.Shape.switchShape(S.ShapeBuilder.rectangle(Math.min(maxShapeSize, parseInt(value[0])), Math.min(maxShapeSize, parseInt(value[1])))); break; case 'circle': value = parseInt(value) || maxShapeSize; value = Math.min(value, maxShapeSize); S.Shape.switchShape(S.ShapeBuilder.circle(value)); break; case 'time': var t = formatTime(new Date()); if (sequence.length > 0) { S.Shape.switchShape(S.ShapeBuilder.letter(t)); } else { timedAction(function () { t = formatTime(new Date()); if (t !== time) { time = t; S.Shape.switchShape(S.ShapeBuilder.letter(time)); } }, 1000); } break; default: S.Shape.switchShape(S.ShapeBuilder.letter(current[0] === cmd ? 'What?' : current)); } }, 2000, sequence.length); } function checkInputWidth(e) { if (input.value.length > 18) { ui.classList.add('ui--wide'); } else { ui.classList.remove('ui--wide'); } if (firstAction && input.value.length > 0) { ui.classList.add('ui--enter'); } else { ui.classList.remove('ui--enter'); } } function bindEvents() { document.body.addEventListener('keydown', function (e) { input.focus(); if (e.keyCode === 13) { firstAction = false; reset(); performAction(input.value); } }); // input.addEventListener('input', checkInputWidth); // input.addEventListener('change', checkInputWidth); // input.addEventListener('focus', checkInputWidth); // help.addEventListener('click', function (e) { // overlay.classList.toggle('overlay--visible'); // overlay.classList.contains('overlay--visible') && reset(true); // }); // commands.addEventListener('click', function (e) { // var el, // info, // demo, // tab, // active, // url; // // if (e.target.classList.contains('commands-item')) { // el = e.target; // } else { // el = e.target.parentNode.classList.contains('commands-item') ? e.target.parentNode : e.target.parentNode.parentNode; // } // // info = el && el.querySelector('.commands-item-info'); // demo = el && info.getAttribute('data-demo'); // url = el && info.getAttribute('data-url'); // // if (info) { // overlay.classList.remove('overlay--visible'); // // if (demo) { // input.value = demo; // // if (isTouch) { // reset(); // performAction(input.value); // } else { // input.focus(); // } // } else if (url) { // //window.location = url; // } // } // }); canvas.addEventListener('click', function (e) { overlay.classList.remove('overlay--visible'); }); } function init() { bindEvents(); // input.focus(); isTouch && document.body.classList.add('touch'); } // Init init(); return { simulate: function (action) { performAction(action); } } }()); S.UI.Tabs = (function () { var tabs = document.querySelector('.tabs'), labels = document.querySelector('.tabs-labels'), triggers = document.querySelectorAll('.tabs-label'), panels = document.querySelectorAll('.tabs-panel'); function activate(i) { triggers[i].classList.add('tabs-label--active'); panels[i].classList.add('tabs-panel--active'); } function bindEvents() { labels.addEventListener('click', function (e) { var el = e.target, index; if (el.classList.contains('tabs-label')) { for (var t = 0; t < triggers.length; t++) { triggers[t].classList.remove('tabs-label--active'); panels[t].classList.remove('tabs-panel--active'); if (el === triggers[t]) { index = t; } } activate(index); } }); } function init() { activate(0); bindEvents(); } // Init init(); }()); S.Point = function (args) { this.x = args.x; this.y = args.y; this.z = args.z; this.a = args.a; this.h = args.h; }; S.Color = function (r, g, b, a) { this.r = r; this.g = g; this.b = b; this.a = a; }; S.Color.prototype = { render: function () { return 'rgba(' + this.r + ',' + + this.g + ',' + this.b + ',' + this.a + ')'; } }; S.Dot = function (x, y) { this.p = new S.Point({ x: x, y: y, z: 5, a: 1, h: 0 }); this.e = 0.07; this.s = true; this.c = new S.Color(135, 206, 235, this.p.a); this.t = this.clone(); this.q = []; }; S.Dot.prototype = { clone: function () { return new S.Point({ x: this.x, y: this.y, z: this.z, a: this.a, h: this.h }); }, _draw: function () { this.c.a = this.p.a; S.Drawing.drawCircle(this.p, this.c); }, _moveTowards: function (n) { var details = this.distanceTo(n, true), dx = details[0], dy = details[1], d = details[2], e = this.e * d; if (this.p.h === -1) { this.p.x = n.x; this.p.y = n.y; return true; } if (d > 1) { this.p.x -= ((dx / d) * e); this.p.y -= ((dy / d) * e); } else { if (this.p.h > 0) { this.p.h--; } else { return true; } } return false; }, _update: function () { if (this._moveTowards(this.t)) { var p = this.q.shift(); if (p) { this.t.x = p.x || this.p.x; this.t.y = p.y || this.p.y; this.t.z = p.z || this.p.z; this.t.a = p.a || this.p.a; this.p.h = p.h || 0; } else { if (this.s) { this.p.x -= Math.sin(Math.random() * 3.142); this.p.y -= Math.sin(Math.random() * 3.142); } else { this.move(new S.Point({ x: this.p.x + (Math.random() * 50) - 25, y: this.p.y + (Math.random() * 50) - 25, })); } } } d = this.p.a - this.t.a; this.p.a = Math.max(0.1, this.p.a - (d * 0.05)); d = this.p.z - this.t.z; this.p.z = Math.max(1, this.p.z - (d * 0.05)); }, distanceTo: function (n, details) { var dx = this.p.x - n.x, dy = this.p.y - n.y, d = Math.sqrt(dx * dx + dy * dy); return details ? [dx, dy, d] : d; }, move: function (p, avoidStatic) { if (!avoidStatic || (avoidStatic && this.distanceTo(p) > 1)) { this.q.push(p); } }, render: function () { this._update(); this._draw(); } } S.ShapeBuilder = (function () { var gap = 13, shapeCanvas = document.createElement('canvas'), shapeContext = shapeCanvas.getContext('2d'), fontSize = 500, fontFamily = 'Avenir, Helvetica Neue, Helvetica, Arial, sans-serif'; function fit() { shapeCanvas.width = Math.floor(window.innerWidth / gap) * gap; shapeCanvas.height = Math.floor(window.innerHeight / gap) * gap; shapeContext.fillStyle = 'red'; shapeContext.textBaseline = 'middle'; shapeContext.textAlign = 'center'; } function processCanvas() { var pixels = shapeContext.getImageData(0, 0, shapeCanvas.width, shapeCanvas.height).data; dots = [], pixels, x = 0, y = 0, fx = shapeCanvas.width, fy = shapeCanvas.height, w = 0, h = 0; for (var p = 0; p < pixels.length; p += (4 * gap)) { if (pixels[p + 3] > 0) { dots.push(new S.Point({ x: x, y: y })); w = x > w ? x : w; h = y > h ? y : h; fx = x < fx ? x : fx; fy = y < fy ? y : fy; } x += gap; if (x >= shapeCanvas.width) { x = 0; y += gap; p += gap * 4 * shapeCanvas.width; } } return { dots: dots, w: w + fx, h: h + fy }; } function setFontSize(s) { shapeContext.font = 'bold ' + s + 'px ' + fontFamily; } function isNumber(n) { return !isNaN(parseFloat(n)) && isFinite(n); } function init() { fit(); window.addEventListener('resize', fit); } // Init init(); return { imageFile: function (url, callback) { var image = new Image(), a = S.Drawing.getArea(); image.onload = function () { shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); shapeContext.drawImage(this, 0, 0, a.h * 0.6, a.h * 0.6); callback(processCanvas()); }; image.onerror = function () { callback(S.ShapeBuilder.letter('What?')); } image.src = url; }, circle: function (d) { var r = Math.max(0, d) / 2; shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); shapeContext.beginPath(); shapeContext.arc(r * gap, r * gap, r * gap, 0, 2 * Math.PI, false); shapeContext.fill(); shapeContext.closePath(); return processCanvas(); }, letter: function (l) { var s = 0; setFontSize(fontSize); s = Math.min(fontSize, (shapeCanvas.width / shapeContext.measureText(l).width) * 0.8 * fontSize, (shapeCanvas.height / fontSize) * (isNumber(l) ? 1 : 0.45) * fontSize); setFontSize(s); shapeContext.clearRect(0, 0, shapeCanvas.width, shapeCanvas.height); shapeContext.fillText(l, shapeCanvas.width / 2, shapeCanvas.height / 2); return processCanvas(); }, rectangle: function (w, h) { var dots = [], width = gap * w, height = gap * h; for (var y = 0; y < height; y += gap) { for (var x = 0; x < width; x += gap) { dots.push(new S.Point({ x: x, y: y, })); } } return { dots: dots, w: width, h: height }; } }; }()); S.Shape = (function () { var dots = [], width = 0, height = 0, cx = 0, cy = 0; function compensate() { var a = S.Drawing.getArea(); cx = a.w / 2 - width / 2; cy = a.h / 2 - height / 2; } return { shuffleIdle: function () { var a = S.Drawing.getArea(); for (var d = 0; d < dots.length; d++) { if (!dots[d].s) { dots[d].move({ x: Math.random() * a.w, y: Math.random() * a.h }); } } }, switchShape: function (n, fast) { var size, a = S.Drawing.getArea(); width = n.w; height = n.h; compensate(); if (n.dots.length > dots.length) { size = n.dots.length - dots.length; for (var d = 1; d <= size; d++) { dots.push(new S.Dot(a.w / 2, a.h / 2)); } } var d = 0, i = 0; while (n.dots.length > 0) { i = Math.floor(Math.random() * n.dots.length); dots[d].e = fast ? 0.25 : (dots[d].s ? 0.14 : 0.11); if (dots[d].s) { dots[d].move(new S.Point({ z: Math.random() * 20 + 10, a: Math.random(), h: 18 })); } else { dots[d].move(new S.Point({ z: Math.random() * 5 + 5, h: fast ? 18 : 30 })); } dots[d].s = true; dots[d].move(new S.Point({ x: n.dots[i].x + cx, y: n.dots[i].y + cy, a: 1, z: 5, h: 0 })); n.dots = n.dots.slice(0, i).concat(n.dots.slice(i + 1)); d++; } for (var i = d; i < dots.length; i++) { if (dots[i].s) { dots[i].move(new S.Point({ z: Math.random() * 20 + 10, a: Math.random(), h: 20 })); dots[i].s = false; dots[i].e = 0.04; dots[i].move(new S.Point({ x: Math.random() * a.w, y: Math.random() * a.h, a: 0.3, //.4 z: Math.random() * 4, h: 0 })); } } }, render: function () { for (var d = 0; d < dots.length; d++) { dots[d].render(); } } } }()); S.init(); </script> </body> </html> 在这个代码里面加一个字幕完了之后字幕炸开放烟花特效
11-26
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值