这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
❤ 【作者主页——🔥获取更多优质源码】
❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】
❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 1.HTML代码
- 2.js代码
- 三、精彩专栏
一、网页介绍
1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>spaceman</title> <style> #box{ width:500px; height:500px; position:absolute; margin:0 auto; left:0; right:0; top:10px; } </style> </head> <body> <div id='box'></div> </body> <script type="text/javascript" src='spaceman.js'></script> <script type="text/javascript"> var box = document.getElementById('box'); spaceMan.init(box); </script> </html>
2.js代码
;(function(global){ var spaceMan = new SpaceMan(); function SpaceMan(){ this.urlObj={}//图片路径对象 this.imgObj={};//图片对象 this.otherCount=6;//其他图片数 this.count=60;//太空人图片数，比较多，用来旋转 this.startCount=2;//太空人图片开始数 this.imageKey=2;//默认起始图片下标 this.renderArr=[];//渲染数组1 this.renderArr2=[];//渲染数组2 this.hourObj={};//小时对象 this.minuteObj={};//分钟对象 this.secondObj={};//秒钟对象 this.weekDayObj={};//星期对象 larDay); return GetcDateString(); } } return {getLunarDay:GetLunarDay} } //图片对象ImageDraw构造函数 function ImageDraw(o,obj){ this.id='', this.image=0,//图片对象（必填） this.sx=0,//图片切片开始x位置（显示整个图片的时候不需要填） this.sy=0,//图片切片开始y位置（显示整个图片的时候不需要填） this.sWidth=0, //图片切片开始宽度（显示整个图片的时候不需要填） this.sHeight=0,//图片切片开始高度（显示整个图片的时候不需要填） this.dx=0, //图片目标x位置（必填） this.dy=0, //图片目标y位置（必填） this.dWidth=0,//图片目标显示宽度（宽度不缩放时不必填） this.dHeight=0//图片目标高度高度（高度不缩放时不必填） this.init(o,obj); } ImageDraw.prototype.init=function(o,obj){ this.lol=obj; for(var key in o){ this[key]=o[key]; } return this; } ImageDraw.prototype.render=function(context){ draw(context,this); function draw(context,obj) { var ctx=context; ctx.save(); if(!obj.image || getType(obj.dx)=='undefined' || getType(obj.dy)=='undefined'){ throw new Error("绘制图片缺失参数"); return; } ctx.translate(obj.dx,obj.dy); if(getType(obj.sx)!='undefined' && getType(obj.sy)!='undefined' && obj.sWidth && obj.sHeight && obj.dWidth && obj.dHeight){ //裁剪图片，显示时候有缩放 ctx.drawImage(obj.image, obj.sx, obj.sy, obj.sWidth, obj.sHeight, 0, 0, obj.dWidth, obj.dHeight); }else if(obj.dWidth && obj.dHeight){ ctx.drawImage(obj.image, 0, 0, obj.dWidth, obj.dHeight);//原始图片，显示时候有缩放 }else{ ctx.drawImage(obj.image,0, 0);//原始图片，显示时候无缩放 } ctx.restore(); } } ImageDraw.prototype.isPoint=function(pos){ //鼠标位置的x、y要分别大于dx、dy 且x、y要分别小于 dx+dWidth、dy+dHeight if(pos.x>this.dx && pos.y>this.dy && pos.x<this.dx+this.dWidth && pos.y<this.dy+this.dHeight ){//表示处于当前图片对象范围内 return true; } return false; } //文字的构造函数 function Text(o){ this.x=0,//x坐标 this.y=0,//y坐标 this.disX=0,//x坐标偏移量 this.disY=0,//y坐标偏移量 this.text='',//内容 this.font=null;//字体 this.textAlign=null;//对齐方式 this.init(o); } Text.prototype.init=function(o){ for(var key in o){ this[key]=o[key]; } } Text.prototype.render=function(context){ this.ctx=context; innerRender(this); function innerRender(obj){ var ctx=obj.ctx; ctx.save() ctx.beginPath(); ctx.translate(obj.x,obj.y); if(obj.angle){//根据旋转角度来执行旋转 ctx.rotate(-obj.angle*Math.PI/180); } if(obj.font){ ctx.font=obj.font; } if(obj.textAlign){ ctx.textAlign=obj.textAlign; } if(obj.fill){//是否填充 obj.fillStyle?(ctx.fillStyle=obj.fillStyle):null; ctx.fillText(obj.text,obj.disX,obj.disY); } if(obj.stroke){//是否描边 obj.strokeStyle?(ctx.strokeStyle=obj.strokeStyle):null; ctx.strokeText(obj.text,obj.disX,obj.disY); } ctx.restore(); } return this; } //直线的构造 function Line(o){ this.x=0,//x坐标 this.y=0,//y坐标 this.startX=0,//开始点x位置 this.startY=0, //开始点y位置 this.endX=0,//结束点x位置 this.endY=0;//结束点y位置 this.thin=false;//设置变细系数 this.init(o); } Line.prototype.init=function(o){ for(var key in o){ this[key]=o[key]; } } Line.prototype.render=function(ctx){ innerRender(this); function innerRender(obj){ ctx.save() ctx.beginPath(); ctx.translate(obj.x,obj.y); if(obj.thin){ ctx.translate(0.5,0.5); } if(obj.lineWidth){//设定线宽 ctx.lineWidth=obj.lineWidth; } if(obj.strokeStyle){ ctx.strokeStyle=obj.strokeStyle; } //划线 ctx.moveTo(obj.startX, obj.startY); ctx.lineTo(obj.endX, obj.endY); ctx.stroke(); ctx.restore(); } return this; } //构造函数 function Circle(o){ this.x=0,//圆心X坐标 this.y=0,//圆心Y坐标 this.r=0,//半径 this.startAngle=0,//开始角度 this.endAngle=0,//结束角度 this.anticlockwise=false;//顺时针，逆时针方向指定 this.stroke=false;//是否描边 this.fill=false;//是否填充 this.scaleX=1;//缩放X比例 this.scaleY=1;//缩放Y比例 this.rotate=0; this.init(o); } //初始化 Circle.prototype.init=function(o){ for(var key in o){ this[key]=o[key]; } } //绘制 Circle.prototype.render=function(context){ var ctx=context;//获取上下文 ctx.save(); ctx.beginPath(); ctx.translate(this.x,this.y); if(this.fill){ ctx.moveTo(0,0); } //ctx.moveTo(this.x,this.y); ctx.scale(this.scaleX,this.scaleY);//设定缩放 ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆 if(this.lineWidth){//线宽 ctx.lineWidth=this.lineWidth; } if(this.fill){//是否填充 this.fillStyle?(ctx.fillStyle=this.fillStyle):null; ctx.fill(); } if(this.stroke){//是否描边 this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null; ctx.stroke(); } ctx.restore(); return this; } var _= util = { //获取属性值 getStyle:function (obj, prop) { var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle; return prevComputedStyle[prop]; }, getRandom:function(min,max){ return parseInt(Math.random()*(max-min)+min); }, getRandomColor:function(){ return '#' + Math.random().toString(16).substr(2, 6).toUpperCase(); }, //获取鼠标信息 getOffset:function(e){ return { x:e.offsetX, y:e.offsetY }; }, //循环 each:function(arr,fn){ var len = arr.length; for(var i=0;i<len;i++){ fn(arr[i],i); } }, getDecimals:function(value){ return (value!=Math.floor(value))?(value.toString()).split('.')[1].length:0; } } var class2type={}; _.each("Boolean Number String Function Array Date RegExp Object".split(" "), function(name) { class2type[ "[object " + name + "]" ] = name; }); function getType( obj ) { return obj == null ? String( obj ) : class2type[ Object.prototype.toString.call(obj) ] || "undefined"; } global.spaceMan=spaceMan; })(window);
三、精彩专栏
看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。—— `
