前言
大部分人都有喜欢的人，学会这些表白代码，下次表白你肯定会成功。希望你有个女朋友
效果图及部分源码
1.博客式表白
部分源码
function lovetime() {
window.setTimeout("lovetime()", 1000);
var seconds = 1000
var minutes = seconds * 60
var hours = minutes * 60
var days = hours * 24
var years = days * 365
var today = new Date()
var todayYear = today.getFullYear()
var todayMonth = today.getMonth() + 1
var todayDate = today.getDate()
var todayHour = today.getHours()
var todayMinute = today.getMinutes()
var todaySecond = today.getSeconds()
var t1 = Date.UTC(2023, 1, 20, 16, 52, 21)
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
var diff = t2 - t1
var diffYears = Math.floor(diff / years)
var diffDays = Math.floor((diff / days) - diffYears * 365)
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes *
minutes) / seconds)
document.getElementById("lovetime1").innerHTML = "我们已经在一起 " + diffYears + "年" + diffDays + "天" +
diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦"
document.getElementById("lovetime2").innerHTML = "我们已经在一起 " + diffYears + "年" + diffDays + "天" +
diffHours + "小时" + diffMinutes + "分钟" + diffSeconds + "秒啦"
}
lovetime();
2.彩色画图表白
部分源码
<script type="text/javascript">
; (function (window) {
var ctx,
hue,
logo,
form,
buffer,
target = {},
tendrils = [],
settings = {};
settings.debug = true;
settings.friction = 0.5;
settings.trails = 20;
settings.size = 50;
settings.dampening = 0.25;
settings.tension = 0.98;
Math.TWO_PI = Math.PI * 2;
// ========================================================================================
// Oscillator 何问起
// ----------------------------------------------------------------------------------------
function Oscillator(options) {
this.init(options || {});
}
Oscillator.prototype = (function () {
var value = 0;
return {
init: function (options) {
this.phase = options.phase || 0;
this.offset = options.offset || 0;
this.frequency = options.frequency || 0.001;
this.amplitude = options.amplitude || 1;
},
update: function () {
this.phase += this.frequency;
value = this.offset + Math.sin(this.phase) * this.amplitude;
return value;
},
value: function () {
return value;
}
};
})();
3.在线写代码表白
部分代码
import React from 'react';
import StyleEditor from './styleEditor';
import Heart from './heart';
import HeartRain from './heartRain';
const isPc = (function () {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"
];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}());
export default class App extends React.Component {
fullStyle = [
`/*
* Hi。宝贝！
* 这么久了。还没和宝贝说过我的工作呢！
* 我是个前端工程师。俗称程序员。网页相关。
* 如这个页面。就是个什么也没有的网页。
* 我的工作就是给这种空白的页面加点儿东西。
* 嗯。说起来手机和电脑还得区分一下。
* 你现在用的是。。。${isPc ? '电脑' : '手机'}
*/
/* 首先给所有元素加上过渡效果 */
* {
-webkit-transition: all .5s;
transition: all .5s;
}
/* 白色背景太单调了。来点背景 */
body, html {
color: #fff;
background-color: darkslategray;
}
/* 文字太近了 */
.styleEditor {
overflow: auto;
${ isPc ? `width: 48vw;
height: 96vh;` : `width: 96vw;
height: 48vh;` }
border: 1px solid;
font-size: 14px;
line-height: 1.5;
padding: 10px;
}
/* 这些代码颜色都一样。加点儿高亮区别来 */
.token.selector{ color: rgb(133,153,0) }
.token.property{ color: rgb(187,137,0) }
.token.punctuation{ color: yellow }
.token.function{ color: rgb(42,161,152) }
.token.comment{ color: rgb(177,177,177) }
4.沙雕式表白
部分源码
// JavaScript Document
var Dianji=0;
window.onload=function(){
var buhao = document.getElementById("buhao");
var hao = document.getElementById("hao");
buhao.onclick=function(){
Dianji++;
if(Dianji==1){
alert("能够遇见你");
}else if(Dianji==2){
alert("对我来说是最大的幸福!");
}else if(Dianji==3){
alert("有了你，我的生活变的无限宽广!");
}else if(Dianji==4){
alert("有了你，世界变得如此迷人!");
}else if(Dianji==5){
alert("你是世界，世界是你!");
}else if(Dianji==6){
alert("我愿意用自己的心，好好的陪着你，爱着你。");
}else if(Dianji==7){
alert("你考虑一下呗");
Dianji=1;
}
}
hao.onclick=function(){
alert("❤❤❤ 终于同意了，我爱你 ❤❤❤");
}
}
5.月光下表白
部分源码
@charset "utf-8";
body{background-color: #f4f4f4; margin: 0; font-family:'΢ÈíÑźÚ','ËÎÌå',sans-serif; overflow:hidden;}
#bgc{width: 100%; height: 100%; background: url(../img/bg.jpg) center top #f4f4f4; overflow: hidden;}
.mb-box{width: 416px; height: auto; padding:15px; position: absolute; top: 8%; left: 50%; margin-left: -208px; z-index: 2; overflow: hidden;}
.bb{margin: 0 auto; width: 416px; max-height: 560px; border-radius: 10px; box-shadow: 0px 0px 20px #999; overflow: hidden; background: url(../images/alpha-bg.png);}
.bb h2{margin: 15px auto 0px; padding: 20px 0px 10px; width: 280px; font-size:18px; text-align: center; color: #883a78; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.bb_text{height: auto; min-height: 180px; max-height: 300px; padding:20px 40px; text-indent:2em; line-height:28px; font-size: 16px; color:#303030; overflow: auto;}
.bb_myname{text-align: right; padding: 0px 40px 20px; line-height: 30px; color: #883a78;}
.mb-x{width: 500px; height: auto; overflow: hidden; margin-top: 260px;}
.love_time{width: 100%; text-align: center; font-size: 14px; color:#da8e9c;}
.love_time span{color:#da8e9c;}
.musicbg{margin-left: -120px; filter: alpha(opacity=50); opacity: .5; position: fixed; bottom: 60px; left: 50%}
.musicbg:hover{filter: alpha(opacity=90); opacity: .9}
.banquan{width: 100%; text-align: center; color: #888; position: fixed; bottom: 30px; font-size:14px;}
.banquan a{color: #888; text-decoration: none;}
领取源码
5款网页表白代码4 领取地址：https://www.123pan.com/s/ji8kjv-6OPU3.html提取码:关注微信公众号祖龙科技工作室回复表白代码4即可获取
下期更新预报
5款网页表白代码5（附带源码）
- 📢博客主页：孤客网络科技工作室官方账号
- 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正！
- 📢本文由孤客原创，若侵权联系作者，首发于CSDN博客
- 📢停下休息的时候不要忘了别人还在奔跑，希望大家抓紧时间学习，全力奔赴更好的生活💻