gitea/cici
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[init] initial commit

Browse Source
This commit is contained in:
gitea 2023-06-16 09:39:28 +08:00
commit 860d5d351d
13 changed files with 605 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
README.md Normal file
View File

@ -0,0 +1,13 @@
## A website for my girlfriend to memorize our first anniversary of love.
demo：[https://ain-crad.github.io/First-Anniversary-of-Love](https://ain-crad.github.io/First-Anniversary-of-Love)
文件目录：
* css：css源码
* js/date.js：显示恋爱时长
* js/playImg.js：循环播放照片
* js/stars.js：背景部分
* js/typeWriter.js：模拟打字效果
* music：背景音乐
* pic：图片
* index.html：html源码

140
css/format.css Normal file
View File

@ -0,0 +1,140 @@
#typeDiv {
position: absolute;
top: 45%;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 20%;
text-align: center;
}
#txt1 {
font-size: 24px;
text-align: center;
color: white;
}
#txt2 {
font-size: 24px;
text-align: center;
color: white;
}
#content{
position: absolute;
top: 1%;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 20%;
}
#together{
font-size: 32px;
text-align: center;
color: white;
}
#timer{
text-align: center;
color: white;
}
#d{
font-size: 24px;
}
#h{
font-size: 24px;
}
#m{
font-size: 24px;
}
#s{
font-size: 24px;
}
#heartTxt{
position: absolute;
display: table;
vertical-align: middle;
top: 80%;
left: 0;
right: 0;
margin: auto;
width: 10%;
height: 8%;
}
#clickMe{
display: inline-block;
font-size: 16px;
width: 100%;
text-align: center;
color: white;
}
#heart{
width: 100%;
height: 100%;
}
#button{
background-image: url("../pic/love.png");
background-repeat: no-repeat;
background-size: contain;
background-color: transparent;
border: none;
outline: none;
background-position: center;
transition: 0.1s;
width: 100%;
height: 100%;
}
#button:active {
width: 92%;
height: 92%;
}
#imgTxt{
position: absolute;
display: table;
vertical-align: middle;
top: 20%;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 50%;
}
#img{
display: block;
top: 30%;
left: 0;
right: 0;
margin: auto;
width: auto;
height: auto;
}
#Txt{
display: inline-block;
font-size: 17px;
width: 100%;
text-align: center;
color: white;
}
#tmp{
display: inline-block;
font-size: 17px;
width: 100%;
text-align: center;
color: white;
}

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

79
index.html Normal file
View File

@ -0,0 +1,79 @@
<!DOCTYPE HTML>
<html lang="en" style="overflow:hidden;">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta charset="UTF-8">
<title>Love Stories</title>
<link rel="stylesheet" type="text/css" href="css/format.css">
</head>
<body style="margin:0px">
<!--
<audio autoplay loop>
<source src="music/music.mp3" type="audio/mpeg">
Your browser does not support the audio.
</audio>
controls="controls"
type="audio/mpeg"
<a href='music.html'>Music</a>
-->
<audio autoplay="autoplay" loop="" preload="auto">
<source src="music/music.mp3">
Your browser does not support the audio.
</audio>
<canvas></canvas>
<div id="content">
<h2 id="together">We have been together</h2>
<div id="timer">
<b id="d"></b> Days
<b id="h"></b> Hours
<b id="m"></b> Minutes
<b id="s"></b> Seconds
</div>
</div>
<div id = "typeDiv">
<span id="txt1"></span> <br />
<span id="txt2"></span>
</div>
<div id="imgTxt">
<span id="Txt"></span> <br />
<span id="tmp"></span>
<img id="img" src="">
</div>
<div id="heartTxt">
<span id="clickMe"></span>
<div id="heart">
<button id="button" onclick="play()"></button>
</div>
</div>
<script >
var ok = 0;
var flag = 1;
var myImage = document.getElementById("img");
var myTxt = document.getElementById("Txt");
var imageArray = [
"pic/pic1.jpg",
"pic/pic2.jpg",
"pic/pic3.jpg"
];
var imageIndex = 0;
var txtArray = [
"2023年1月24日 - 你好哇，小可爱~",
"2023年1月28日 - 情侣头像上线啦，真好看！",
"2023年2月2日 - 你下班的时候被车撞到了，手机也摔的不开机了，我好担心，第一次感到非常的无力。"
];
var len = imageArray.length;
var t = 0;
</script>
<script type="text/javascript" src="js/stars.js"></script>
<script type="text/javascript" src="js/typeWriter.js"></script>
<script type="text/javascript" src="js/date.js"></script>
<script type="text/javascript" src="js/playImg.js"></script>
</body>
</html>

51
js/date.js Normal file
View File

@ -0,0 +1,51 @@
var dv = document.getElementById("content");
dv.style.opacity = 0;
var val = 0;
function timer(){
var start = new Date(2023, 0, 24, 19, 20, 00);
var t = new Date() - start;
var d = Math.floor(t / 1000 / 60 / 60 / 24);
var h = Math.floor(t / 1000 / 60 / 60 % 24);
if(h < 10){
h = "0" + h;
}
var m = Math.floor(t / 1000 / 60 % 60);
if(m < 10){
m = "0" + m;
}
var s = Math.floor(t / 1000 % 60);
if(s < 10){
s = "0" + s;
}
document.getElementById("d").innerHTML = d;
document.getElementById("h").innerHTML = h;
document.getElementById("m").innerHTML = m;
document.getElementById("s").innerHTML = s;
}
function fadein(){
if(val < 1){
val += 0.025;
dv.style.opacity = val;
}
else{
clearInterval(fadeinInterval);
if(ok == 2){
ok += 1;
}
}
}
var fadeInterval;
var fadeinInterval;
timer();
setInterval(timer, 1000);
fadeInterval = setInterval(function(){
if(ok == 2){
clearInterval(fadeInterval);
fadeinInterval = setInterval(fadein, 50);
}
}, 50)

77
js/playImg.js Normal file
View File

@ -0,0 +1,77 @@
var btn = document.getElementById("heartTxt");
btn.style.opacity = 0;
var btnVal = 0;
function showImage(){
//document.getElementById("imgTxt").style.opacity = 0;
myImage.setAttribute("src", imageArray[imageIndex]);
myTxt.innerHTML = txtArray[imageIndex];
//document.getElementById("imgTxt").style.opacity = 1 - flag;
imageIndex++;
if(imageIndex >= len){
imageIndex = 0;
}
}
function play(){
if(t == 0){
myImage.setAttribute("src", "");
myTxt.innerHTML = "";
imageIndex = 0;
clearInterval(showImageInterval);
}
flag = 1 - flag;
document.getElementById("typeDiv").style.opacity = flag;
document.getElementById("imgTxt").style.opacity = 1 - flag;
if(t == 0){
//setTimeout(showImage, 1000);
setInterval(showImage, 7000);
}
t++;
}
function preshowImage(){
document.getElementById("imgTxt").style.opacity = 0;
myImage.setAttribute("src", imageArray[imageIndex]);
myTxt.innerHTML = txtArray[imageIndex];
imageIndex++;
if(imageIndex >= len){
imageIndex = 0;
}
}
function buttonFadeIn(){
if(btnVal < 1){
btnVal += 0.025;
btn.style.opacity = btnVal;
}
else{
clearInterval(buttonInterval);
if(ok == 3){
ok += 1;
}
}
}
function event(){
showImageInterval = setInterval(preshowImage, 300);
imgInterval = setInterval(function (){
if(ok == 3){
setTimeout(function(){buttonInterval = setInterval(buttonFadeIn, 90);}, 1500);
clearInterval(imgInterval);
}
}, 50);
}
var showImageInterval;
var imgInterval;
var buttonInterval;
event();

209
js/stars.js Normal file
View File

@ -0,0 +1,209 @@
//import utils from "./utils"
const canvas = document.querySelector('canvas')
const c = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
init()
});
/*
const mouse = {
x: innerWidth / 2,
y: innerHeight / 2
}
// Event Listeners
addEventListener('mousemove', event => {
mouse.x = event.clientX
mouse.y = event.clientY
})
*/
// Objects
function Star(x, y, radius, color) {
this.x = x
this.y = y
this.radius = radius
this.color = color
this.velocity = {
x: (Math.random() - 0.5) * 8,
y: 3
}
this.friction = 0.8
this.gravity = 1
}
Star.prototype.draw = function() {
c.save()
c.beginPath()
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
c.fillStyle = this.color
c.shadowColor = '#E3EAEF'
c.shadowBlur = 20
c.fill()
c.closePath()
c.restore()
}
Star.prototype.update = function() {
this.draw()
//When ball hits bottom of screen
if(this.y + this.radius + this.velocity.y > canvas.height - groundHeight){
this.velocity.y = -this.velocity.y * this.friction
this.shatter()
}
else{
this.velocity.y += this.gravity
}
//Hits side of screen
if(this.x + this.radius + this.velocity.x > canvas.width || this.x - this.radius <= 0){
this.velocity.x = -this.velocity.x * this.friction
this.shatter()
}
this.x += this.velocity.x
this.y += this.velocity.y
}
Star.prototype.shatter = function(){
this.radius -= 3
for(let i = 0; i < 8; i++){
miniStars.push(new MiniStar(this.x, this.y, 2))
}
}
function MiniStar(x, y, radius, color){
Star.call(this, x, y, radius, color)
this.velocity = {
x: (Math.random() - 0.5) * 10,
y: (Math.random() - 0.5) * 30
}
this.friction = 0.8
this.gravity = 0.1
this.ttl = 100
this.opacity = 1
}
MiniStar.prototype.draw = function() {
c.save()
c.beginPath()
c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)
c.fillStyle = `rgba(227,234, 239, ${this.opacity})`
c.shadowColor = '#E3EAEF'
c.shadowBlur = 20
c.fill()
c.closePath()
c.restore()
}
MiniStar.prototype.update = function() {
this.draw()
if(this.y + this.radius + this.velocity.y > canvas.height - groundHeight){
this.velocity.y = -this.velocity.y * this.friction
}
else{
this.velocity.y += this.gravity
}
this.x += this.velocity.x
this.y += this.velocity.y
this.ttl -= 1
this.opacity -= 0.0001 * this.ttl
}
function creatMountainRange(mountainAmount, height, color){
for(let i = 0; i < mountainAmount; i++){
const mountainWidth = canvas.width / mountainAmount
c.beginPath()
c.moveTo(i * mountainWidth, canvas.height)
c.lineTo(i * mountainWidth + mountainWidth + 0.2*canvas.height, canvas.height)
c.lineTo(i * mountainWidth + mountainWidth / 2, canvas.height - height)
c.lineTo(i * mountainWidth - 0.2*canvas.height, canvas.height)
c.fillStyle = color
c.fill()
c.closePath()
}
}
// Implementation
const backgroundGradient = c.createLinearGradient(0, 0, canvas.width, canvas.height)
backgroundGradient.addColorStop(0, '#171e26')
backgroundGradient.addColorStop(1, '#3f586b')
let stars
let miniStars
let backgroundStars
let ticker = 0
let randomSpawnRate = 75
const groundHeight = 0.06 * canvas.height
let inf = 1e9
function init() {
stars = []
miniStars = []
backgroundStars = []
for(let i = 0; i < 200; i++){
const x = Math.random() * canvas.width
const y = Math.random() * canvas.height
const radius = Math.random() * 3
backgroundStars.push(new Star(x, y, radius, 'white'))
}
}
// Animation Loop
function animate() {
c.clearRect(0, 0, 0, canvas.height)
c.fillStyle = backgroundGradient
c.fillRect(0, 0, canvas.width, canvas.height)
backgroundStars.forEach(backgroundStar => {
backgroundStar.draw()
})
if(flag) creatMountainRange(1, canvas.height * 0.7, '#384551')
if(flag) creatMountainRange(2, canvas.height * 0.6, '#2B3843')
if(flag) creatMountainRange(3, canvas.height * 0.4, '#26333E')
c.fillStyle = '#182028'
c.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight)
stars.forEach((star, index) => {
star.update();
if(star.radius == 0){
stars.splice(index, 1)
}
});
miniStars.forEach((miniStar, index) => {
miniStar.update();
if(miniStar.ttl == 0){
miniStars.splice(index, 1)
}
});
ticker++
if(ticker >= inf){
ticker = 0
}
if(ticker % randomSpawnRate == 0){
const radius = 9
const x = Math.max(radius, Math.random() * canvas.width - radius)
stars.push(new Star(x, -100, 9, '#E3EAEF'))
randomSpawnRate = Math.floor(Math.random() * (200 - 125 + 1) + 125)
}
requestAnimationFrame(animate)
}
init()
animate()

36
js/typeWriter.js Normal file
View File

@ -0,0 +1,36 @@
let i = 0;
let text1 = "你好啊，小扈同学，很高兴认识你！";
let text2 = "愿我们每一天都是值得纪念的，也是值得怀念的。"
let speed = 100;
function typeWriter(text, para){
if(ok == 2){
clearInterval(typeInterval);
}
if(i < text.length){
document.getElementById(para).innerHTML += text.charAt(i);
i++;
speed = Math.random() * 50 + 100;
}
else{
if(ok == 0){
i = 0;
}
ok += 1;
}
}
var typeInterval;
//window.onload = function() {
// window.onload = function(){};
typeInterval = setInterval(function(){
if(ok == 0){
typeWriter(text1, "txt1");
}
else if(ok == 1){
typeWriter(text2, "txt2");
}
}, 300);
//};

BIN
music/music.mp3 Normal file
View File

Binary file not shown.

BIN
pic/love.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
pic/pic1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 112 KiB

BIN
pic/pic2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

BIN
pic/pic3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB