HTML5
如果不想用jq版本，可以把代码发给chatgpt让它转为js语法。
普通html5模板
1<!DOCTYPE html>
2<html lang="zh">
3 <head>
4 <meta charset="utf-8" />
5 <title>title</title>
6 <style>
7 body {
8 margin: 0;
9 }
10 </style>
11 </head>
12
13 <body>
14 <script>
15
16 </script>
17 </body>
18</html>添加左上角FPS
1<script>
2 document.body.insertAdjacentHTML('afterbegin', '<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;font-size:11px;"></div>');
3var showFPS = (function() {
4 var requestAnimationFrame =
5 window.requestAnimationFrame ||
6 window.webkitRequestAnimationFrame ||
7 window.mozRequestAnimationFrame ||
8 window.oRequestAnimationFrame ||
9 window.msRequestAnimationFrame ||
10 function(callback) {
11 window.setTimeout(callback, 1000/60);
12 };
13 var e, pe, pid, fps, last, offset, step, appendFps;
14
15 fps = 0;
16 last = Date.now();
17 step = function() {
18 offset = Date.now() - last;
19 fps += 1;
20 if (offset >= 1000) {
21 last += offset;
22 appendFps(fps);
23 fps = 0;
24 }
25 requestAnimationFrame(step);
26 };
27 appendFps = function(fps) {
28 document.getElementById('fps').innerHTML = fps + 'FPS';
29 };
30 step();
31})();
32</script>jQ版本
1<script>
2 // $('body').before('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;font-size:11px;color:white"></div>');
3 jQuery('body').prepend('<div id="fps" style="z-index:10000;position:fixed;top:3;left:3;font-weight:bold;font-size:11px;"></div>');
4 var showFPS = (function(){
5 var requestAnimationFrame =
6 window.requestAnimationFrame ||
7 window.webkitRequestAnimationFrame ||
8 window.mozRequestAnimationFrame ||
9 window.oRequestAnimationFrame ||
10 window.msRequestAnimationFrame ||
11 function(callback) {
12 window.setTimeout(callback, 1000/60);
13 };
14 var e,pe,pid,fps,last,offset,step,appendFps;
15
16 fps = 0;
17 last = Date.now();
18 step = function(){
19 offset = Date.now() - last;
20 fps += 1;
21 if( offset >= 1000 ){
22 last += offset;
23 appendFps(fps);
24 fps = 0;
25 }
26 requestAnimationFrame( step );
27 };
28 appendFps = function(fps){
29 // console.log(fps+'FPS');
30 $('#fps').html(fps+'FPS');
31 };
32 step();
33})();
34</script>鼠标特效 jQ
需要安装jQ
富强民主文明
1<script type="text/javascript">
2//定义获取词语下标
3var a_idx = 0;
4jQuery(document).ready(function($) {
5 //点击body时触发事件
6 $("body").click(function(e) {
7 //需要显示的词语
8 var a = new Array("富强","民主", "文明", "和谐","自由", "平等", "公正","法治", "爱国", "敬业","诚信", "友善");
9 //设置词语给span标签
10 var $i = $("<span/>").text(a[a_idx]);
11 //下标等于原来下标+1 余 词语总数
12 a_idx = (a_idx + 1)% a.length;
13 //获取鼠标指针的位置，分别相对于文档的左和右边缘。
14 //获取x和y的指针坐标
15 var x = e.pageX, y = e.pageY;
16 //在鼠标的指针的位置给$i定义的span标签添加css样式
17 $i.css({"z-index" : 999999999999999999999999999999999999999999999999999999999999999999999,
18 "top" : y - 25,
19 "left" : x,
20 "position" : "absolute",
21 "font-weight" : "bold",
22 "color" : "#ff6651"
23 });
24 //在body添加这个标签
25 $("body").append($i);
26 //animate() 方法执行 CSS 属性集的自定义动画。
27 //该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
28 //详情请看http://www.w3school.com.cn/jquery/effect_animate.asp
29 $i.animate({
30 //将原来的位置向上移动180
31 "top" : y - 180,
32 "opacity" : 0
33 //1500动画的速度
34 }, 1500, function() {
35 //时间到了自动删除
36 $i.remove();
37 });
38 });
39});
40</script>会变色的富强民主文明
1<script type="text/javascript">
2/* 鼠标特效 */
3var a_idx = 0;
4jQuery(document).ready(function($) {
5 $("body").click(function(e) {
6 var a = new Array("富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
7 var b = new Array("red","aqua","yellow","green","pink","maroon","orange");
8 var $i = $("<span/>").text(a[a_idx]);
9 a_idx = (a_idx + 1) % a.length;
10 b_idx = (a_idx+1)%7;/* 七中颜色变色 */
11 var x = e.pageX,
12 y = e.pageY;
13 $i.css({
14 "z-index": 9999,
15 "top": y - 25,
16 "left": x,
17 "position": "absolute",
18 "font-weight": "bold",
19 "color": b[b_idx]
20 });
21 $("body").append($i);
22 $i.animate({
23 "top": y - 180,
24 "opacity": 0
25 },
26 1500,
27 function() {
28 $i.remove();
29 });
30 });
31});
32</script>随机二进制数字点击特效
1<script>
2 jQuery(document).ready(function($) {
3 var _click_count=0;
4 $("body").bind("click",function(e){
5 var n=Math.round(Math.random()*100)+1;//生成100以内的随机数
6 if(n == 0) res= '0';
7 var res = '';
8 while(n != 0) {
9 res = n % 2 + res
10 n = parseInt(n / 2)
11 }//将n转化为二进制数res
12 var $i=$("<b>").text("+"+(res));
13 var x=e.pageX,y=e.pageY;//鼠标点击的坐标
14 $i.css({
15 "z-index":99999,
16 "top":y-15,
17 "left":x,
18 "position":"absolute",
19 "color":"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"//颜色随机
20 //"#2299DD" //固定颜色
21 });
22 $("body").append($i);
23 $i.animate({
24 "top":y-180,
25 "opacity":0
26 },
27 1500,
28 function(){$i.remove();}
29 );
30 e.stopPropagation();
31 });
32 });
33</script>鼠标点击爆炸效果
1<script>
2 function clickEffect() {
3 let balls = [];
4 let longPressed = false;
5 let longPress;
6 let multiplier = 0;
7 let width, height;
8 let origin;
9 let normal;
10 let ctx;
11 const colours = ["#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"];
12 const canvas = document.createElement("canvas");
13 document.body.appendChild(canvas);
14 canvas.setAttribute("style", "width: 100%; height: 100%; top: 0; left: 0; z-index: 99999; position: fixed; pointer-events: none;");
15 const pointer = document.createElement("span");
16 pointer.classList.add("pointer");
17 document.body.appendChild(pointer);
18
19 if (canvas.getContext && window.addEventListener) {
20 ctx = canvas.getContext("2d");
21 updateSize();
22 window.addEventListener('resize', updateSize, false);
23 loop();
24 window.addEventListener("mousedown", function(e) {
25 pushBalls(randBetween(10, 20), e.clientX, e.clientY);
26 document.body.classList.add("is-pressed");
27 longPress = setTimeout(function(){
28 document.body.classList.add("is-longpress");
29 longPressed = true;
30 }, 500);
31 }, false);
32 window.addEventListener("mouseup", function(e) {
33 clearInterval(longPress);
34 if (longPressed == true) {
35 document.body.classList.remove("is-longpress");
36 pushBalls(randBetween(50 + Math.ceil(multiplier), 100 + Math.ceil(multiplier)), e.clientX, e.clientY);
37 longPressed = false;
38 }
39 document.body.classList.remove("is-pressed");
40 }, false);
41 window.addEventListener("mousemove", function(e) {
42 let x = e.clientX;
43 let y = e.clientY;
44 pointer.style.top = y + "px";
45 pointer.style.left = x + "px";
46 }, false);
47 } else {
48 console.log("canvas or addEventListener is unsupported!");
49 }
50
51
52 function updateSize() {
53 canvas.width = window.innerWidth * 2;
54 canvas.height = window.innerHeight * 2;
55 canvas.style.width = window.innerWidth + 'px';
56 canvas.style.height = window.innerHeight + 'px';
57 ctx.scale(2, 2);
58 width = (canvas.width = window.innerWidth);
59 height = (canvas.height = window.innerHeight);
60 origin = {
61 x: width / 2,
62 y: height / 2
63 };
64 normal = {
65 x: width / 2,
66 y: height / 2
67 };
68 }
69 class Ball {
70 constructor(x = origin.x, y = origin.y) {
71 this.x = x;
72 this.y = y;
73 this.angle = Math.PI * 2 * Math.random();
74 if (longPressed == true) {
75 this.multiplier = randBetween(14 + multiplier, 15 + multiplier);
76 } else {
77 this.multiplier = randBetween(6, 12);
78 }
79 this.vx = (this.multiplier + Math.random() * 0.5) * Math.cos(this.angle);
80 this.vy = (this.multiplier + Math.random() * 0.5) * Math.sin(this.angle);
81 this.r = randBetween(8, 12) + 3 * Math.random();
82 this.color = colours[Math.floor(Math.random() * colours.length)];
83 }
84 update() {
85 this.x += this.vx - normal.x;
86 this.y += this.vy - normal.y;
87 normal.x = -2 / window.innerWidth * Math.sin(this.angle);
88 normal.y = -2 / window.innerHeight * Math.cos(this.angle);
89 this.r -= 0.3;
90 this.vx *= 0.9;
91 this.vy *= 0.9;
92 }
93 }
94
95 function pushBalls(count = 1, x = origin.x, y = origin.y) {
96 for (let i = 0; i < count; i++) {
97 balls.push(new Ball(x, y));
98 }
99 }
100
101 function randBetween(min, max) {
102 return Math.floor(Math.random() * max) + min;
103 }
104
105 function loop() {
106 ctx.fillStyle = "rgba(255, 255, 255, 0)";
107 ctx.clearRect(0, 0, canvas.width, canvas.height);
108 for (let i = 0; i < balls.length; i++) {
109 let b = balls[i];
110 if (b.r < 0) continue;
111 ctx.fillStyle = b.color;
112 ctx.beginPath();
113 ctx.arc(b.x, b.y, b.r, 0, Math.PI * 2, false);
114 ctx.fill();
115 b.update();
116 }
117 if (longPressed == true) {
118 multiplier += 0.2;
119 } else if (!longPressed && multiplier >= 0) {
120 multiplier -= 0.4;
121 }
122 removeBall();
123 requestAnimationFrame(loop);
124 }
125
126 function removeBall() {
127 for (let i = 0; i < balls.length; i++) {
128 let b = balls[i];
129 if (b.x + b.r < 0 || b.x - b.r > width || b.y + b.r < 0 || b.y - b.r > height || b.r < 0) {
130 balls.splice(i, 1);
131 }
132 }
133 }
134 }
135 clickEffect();//调用特效函数
136</script>浏览量：加载中... 评论数：加载中...