自定义博客皮肤VIP专享

*博客头图：

点击选择上传的图片

格式为PNG、JPG，宽度*高度大于1920*100像素，不超过2MB，主视觉建议放在右侧，请参照线上博客头图

请上传大于1920*100像素的图片！

博客底图：

点击选择上传的图片

图片格式为PNG、JPG，不超过1MB，可上下左右平铺至整个背景

栏目图：

点击选择上传的图片

图片格式为PNG、JPG，图片宽度*高度为300*38像素，不超过0.5MB

主标题颜色：

RGB颜色，例如：#AFAFAF

Hover：

RGB颜色，例如：#AFAFAF

副标题颜色：

RGB颜色，例如：#AFAFAF

预览取消提交

自定义博客皮肤

上一步保存

weixin_63984309的博客

原创 HTML实现“流星雨”

马上跨年了和喜欢的人一起看“流星雨”

2022-12-12 22:21:08 6732 3

原创 HTML实现的“圣诞树”

HTML实现的“圣诞树”

2022-12-12 21:54:21 6558 1

原创第五届“传智杯”练习题--平等的交易

第五届“传智杯”练习题--平等的交易

2022-11-19 17:41:45 366

原创第五届“传智杯”练习题--树的变迁

第五届“传智杯”练习题--树的变迁

2022-11-19 17:00:36 421

原创第五届“传智杯”练习题--复读

第五届“传智杯”练习题--复读

2022-11-19 16:27:41 604 1

final.rar

2022-11-15

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

南安@ CSDN认证博客专家 CSDN认证企业博客

码龄3年

暂无认证

IP 属地：福建省

IP属地以运营商信息为准，境内显示到省（区、市），境外显示到国家（地区）

5: 原创

153万+: 周排名

60万+: 总排名

1万+: 访问

: 等级

73: 积分

406: 粉丝

17: 获赞

5: 评论

93: 收藏

私信

关注

分类专栏

情人节 1篇
节日 1篇
跨年 1篇

最新评论

HTML实现“流星雨”
月老.664: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>流星雨</title> <script> var context; var arr = new Array(); var starCount = 800; var rains = new Array(); var rainCount = 20; function init() { var stars = document.getElementById("stars"); windowWidth = window.innerWidth; //当前的窗口的高度 stars.width = windowWidth; stars.height = window.innerHeight; context = stars.getContext("2d"); } //创建一个星星对象 var Star = function () { this.x = windowWidth * Math.random();//横坐标 this.y = 5000 * Math.random();//纵坐标 this.text = ".";//文本 this.color = "white";//颜色 this.getColor = function () { var _r = Math.random(); if (_r < 0.5) { this.color = "#333"; } else { this.color = "white"; } } //初始化 this.init = function () { this.getColor(); } //绘制 this.draw = function () { context.fillStyle = this.color; context.fillText(this.text, this.x, this.y); } } //画月亮 function drawMoon() { var moon = new Image(); moon.src = "./images/moon.jpg" context.drawImage(moon, -5, -10); } //页面加载的时候 window.onload = function () { init(); //画星星 for (var i = 0; i < starCount; i++) { var star = new Star(); star.init(); star.draw(); arr.push(star); } //画流星 for (var i = 0; i < rainCount; i++) { var rain = new MeteorRain(); rain.init(); rain.draw(); rains.push(rain); } drawMoon();//绘制月亮 playStars();//绘制闪动的星星 playRains();//绘制流星 } //星星闪起来 function playStars() { for (var n = 0; n < starCount; n++) { arr[n].getColor(); arr[n].draw(); } setTimeout("playStars()", 100); } /*流星雨开始*/ var MeteorRain = function () { this.x = -1; this.y = -1; this.length = -1;//长度 this.angle = 30; //倾斜角度 this.width = -1;//宽度 this.height = -1;//高度 this.speed = 1;//速度 this.offset_x = -1;//横轴移动偏移量 this.offset_y = -1;//纵轴移动偏移量 this.alpha = 1; //透明度 this.color1 = "";//流星的色彩 this.color2 = ""; //流星的色彩 /****************初始化函数********************/ this.init = function () //初始化 { this.getPos(); this.alpha = 1;//透明度 this.getRandomColor(); //最小长度，最大长度 var x = Math.random() * 80 + 150; this.length = Math.ceil(x); // x = Math.random()*10+30; this.angle = 30; //流星倾斜角 x = Math.random() + 0.5; this.speed = Math.ceil(x); //流星的速度 var cos = Math.cos(this.angle * 3.14 / 180); var sin = Math.sin(this.angle * 3.14 / 180); this.width = this.length * cos; //流星所占宽度 this.height = this.length * sin;//流星所占高度 this.offset_x = this.speed * cos; this.offset_y = this.speed * sin; } /**************获取随机颜色函数*****************/ this.getRandomColor = function () { var a = Math.ceil(255 - 240 * Math.random()); //中段颜色 this.color1 = "rgba(" + a + "," + a + "," + a + ",1)"; //结束颜色 this.color2 = "black"; } /***************重新计算流星坐标的函数******************/ this.countPos = function ()// { //往左下移动,x减少，y增加 this.x = this.x - this.offset_x; this.y = this.y + this.offset_y; } /*****************获取随机坐标的函数*****************/ this.getPos = function () // { //横坐标200--1200 this.x = Math.random() * window.innerWidth; //窗口高度 //纵坐标小于600 this.y = Math.random() * window.innerHeight; //窗口宽度 } /****绘制流星***************************/ this.draw = function () //绘制一个流星的函数 { context.save(); context.beginPath(); context.lineWidth = 1; //宽度 context.globalAlpha = this.alpha; //设置透明度 //创建横向渐变颜色,起点坐标至终点坐标 var line = context.createLinearGradient(this.x, this.y, this.x + this.width, this.y - this.height); //分段设置颜色 line.addColorStop(0, "white"); line.addColorStop(0.3, this.color1); line.addColorStop(0.6, this.color2); context.strokeStyle = line; //起点 context.moveTo(this.x, this.y); //终点 context.lineTo(this.x + this.width, this.y - this.height); context.closePath(); context.stroke(); context.restore(); } this.move = function () { //清空流星像素 var x = this.x + this.width - this.offset_x; var y = this.y - this.height; context.clearRect(x - 3, y - 3, this.offset_x + 5, this.offset_y + 5); // context.strokeStyle="red"; // context.strokeRect(x,y-1,this.offset_x+1,this.offset_y+1); //重新计算位置，往左下移动 this.countPos(); //透明度增加 this.alpha -= 0.002; //重绘 this.draw(); } } //绘制流星 function playRains() { for (var n = 0; n < rainCount; n++) { var rain = rains[n]; rain.move();//移动 if (rain.y > window.innerHeight) {//超出界限后重来 context.clearRect(rain.x, rain.y - rain.height, rain.width, rain.height); rains[n] = new MeteorRain(); rains[n].init(); } } setTimeout("playRains()", 2); } /*流星雨结束*/ </script> <style type="text/css"> body { background-color: black; } body, html { width: 100%; height: 100%; overflow: hidden; } </style> </head> <b
HTML实现“流星雨”
徐大姐姐哇: 必须给你点赞加关注
HTML实现“流星雨”
qq_65487943: 运行不出，大佬
HTML实现的“圣诞树”
诸葛不亮006: 音乐无法播放为啥啊？
第五届“传智杯”练习题--复读
CSDN-Ada助手: 不知道算法技能树是否可以帮到你：https://edu.csdn.net/skill/algorithm?utm_source=AI_act_algorithm

原创 HTML实现“流星雨”

原创 HTML实现的“圣诞树”

原创 第五届“传智杯”练习题--平等的交易

原创 第五届“传智杯”练习题--树的变迁

原创 第五届“传智杯”练习题--复读

final.rar

空空如也

原创第五届“传智杯”练习题--平等的交易

原创第五届“传智杯”练习题--树的变迁

原创第五届“传智杯”练习题--复读