当前位置:   article > 正文

5款网页表白代码4(附带源码)_表白信源码

表白信源码

前言

大部分人都有喜欢的人,学会这些表白代码,下次表白你肯定会成功。希望你有个女朋友


效果图及部分源码

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();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

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;
                    }
                };

            })();
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

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) }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63

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("❤❤❤ 终于同意了,我爱你 ❤❤❤");
	}
	

}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

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;}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

领取源码

5款网页表白代码4 领取地址:https://www.123pan.com/s/ji8kjv-6OPU3.html提取码:关注微信公众号祖龙科技工作室回复表白代码4即可获取


下期更新预报

5款网页表白代码5(附带源码)

推荐阅读
相关标签