前端還能這麼玩？(女朋友生日，用前端寫了一個好玩的送給了她，高興壞了)

TrueDei發表於2020-05-09

前端

一年一度的生日到了

該送啥禮物好呢？
該送啥禮物好呢？
該送啥禮物好呢？
該送啥禮物好呢？

哎呀，有了
注意：圖片是百度上找的

在這裡插入圖片描述

效果圖：
在這裡插入圖片描述

可以訪問：https://8042965.github.io/happy/ 檢視哦

準備素材

可以是你女朋友的美照（我是百度找的個圖）

可以是表情包

在這裡插入圖片描述

注意圖片大小：最好是90*90的，如果不是，我教你怎麼修改：
1、用windows自帶的照片檢視軟體開啟圖片
2、調整大小
在這裡插入圖片描述

差不多就行

動手實操

專案結構如下

在這裡插入圖片描述

修改index.html中的圖片

在這裡插入圖片描述

修改main.html的圖片

在這裡插入圖片描述

程式碼給你

index.html

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<style type="text/css">
	div{
		display:inline;
	}
</style>

</head>

<body style="background:#000;">

	<div style="width:550px;">
		<marquee width=400 scrollamount=5> 
			<img src="skin/images//a.jpg"/>
		</marquee>
	</div>	

	<div style="width:550px;margin:20px auto 0 auto;">
		<object width="550" height="400"  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553544800">
			<param value="flash236.swf" name="movie">
			<param value="high" name="quality">
			<param value="transparent" name="wmode">
			<embed width="550" height="400" wmode="transparent" type="application/x-shockwave-flash"  quality="high" src="flash236.swf">
		</object>
	</div>
	<marquee width=400 scrollamount=5> 
		<a href="main.html">
			<FONT face=楷體_GB2312 color=#ff0000 size=3>
				<STRONG>祝你生日快樂，祝你生日快樂！這是一個帶著驚喜來的連結，請點選我試試。</STRONG>
			</FONT>
		</a>　　　　　　
	</marquee>

</body>
</html>

main.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,hight=device-hight,minimum-scale=1.0,maximum-scale=1.0,ser-scalable=none"/>
<title>生日快樂</title>

<style type="text/css">
body { margin: 0; padding: 0; position: relative; background-image: url(skin/images/xh.jpg); background-position: center; /*background-repeat: no-repeat;*/ width: 100%; height: 100%; background-size: 100% 100%; }

#jk {
    width: 30%;
    position: fixed;
    right: 10px;
    bottom: 40px;
}


</style>

</head>
<body id="body" onLoad="init()">
    
<script type="text/javascript" src="skin/js/threecanvas.js"></script>
<script type="text/javascript" src="skin/js/snow.js"></script>

<script type="text/javascript">
	var SCREEN_WIDTH = window.innerWidth;//
	var SCREEN_HEIGHT = window.innerHeight;
	var container;
	var particle;//粒子

	var camera;
	var scene;
	var renderer;

	var starSnow = 1;

	var particles = []; 

	var particleImage = new Image();
	//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
	// particleImage.src = 'skin/images/ParticleSmoke.png'; 
	particleImage.src = 'skin/images/a1.jpg'; 

	function init() {
		//alert("message3");
		container = document.createElement('div');//container：畫布例項;
		document.body.appendChild(container);

		camera = new THREE.PerspectiveCamera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
		camera.position.z = 1000;
		//camera.position.y = 50;

		scene = new THREE.Scene();
		scene.add(camera);
			
		renderer = new THREE.CanvasRenderer();
		renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
		var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
			//alert("message2");
		for (var i = 0; i < 500; i++) {
			//alert("message");
			particle = new Particle3D( material);
			particle.position.x = Math.random() * 2000-1000;
			
			particle.position.z = Math.random() * 2000-1000;
			particle.position.y = Math.random() * 2000-1000;
			//particle.position.y = Math.random() * (1600-particle.position.z)-1000;
			particle.scale.x = particle.scale.y =  1;
			scene.add( particle );
			
			particles.push(particle); 
		}

		container.appendChild( renderer.domElement );


		//document.addEventListener( 'mousemove', onDocumentMouseMove, false );
		document.addEventListener( 'touchstart', onDocumentTouchStart, false );
		document.addEventListener( 'touchmove', onDocumentTouchMove, false );
		document.addEventListener( 'touchend', onDocumentTouchEnd, false );
		
		setInterval( loop, 1000 / 60 );
		
	}

	var touchStartX;
	var touchFlag = 0;//儲存當前是否滑動的狀態;
	var touchSensitive = 80;//檢測滑動的靈敏度;
	//var touchStartY;
	//var touchEndX;
	//var touchEndY;
	function onDocumentTouchStart( event ) {

		if ( event.touches.length == 1 ) {

			//event.preventDefault();//取消預設關聯動作;
			touchStartX = 0;
			touchStartX = event.touches[ 0 ].pageX ;
			//touchStartY = event.touches[ 0 ].pageY ;
		}
	}


	function onDocumentTouchMove( event ) {

		if ( event.touches.length == 1 ) {
			//event.preventDefault();
			var direction = event.touches[ 0 ].pageX - touchStartX;
			if (Math.abs(direction) > touchSensitive) {
				if (direction>0) {touchFlag = 1;}
				else if (direction<0) {touchFlag = -1;};
				//changeAndBack(touchFlag);
			}	
		}
	}

	function onDocumentTouchEnd (event) {
		// if ( event.touches.length == 0 ) {
		// 	event.preventDefault();
		// 	touchEndX = event.touches[ 0 ].pageX ;
		// 	touchEndY = event.touches[ 0 ].pageY ;
	
		// }這裡存在問題
		var direction = event.changedTouches[ 0 ].pageX - touchStartX;

		changeAndBack(touchFlag);
	}


	function changeAndBack (touchFlag) {
		var speedX = 25*touchFlag;
		touchFlag = 0;
		for (var i = 0; i < particles.length; i++) {
			particles[i].velocity=new THREE.Vector3(speedX,-10,0);
		}
		var timeOut = setTimeout(";", 800);
		clearTimeout(timeOut);

		var clearI = setInterval(function () {
			if (touchFlag) {
				clearInterval(clearI);
				return;
			};
			speedX*=0.8;

			if (Math.abs(speedX)<=1.5) {
				speedX=0;
				clearInterval(clearI);
			};
			
			for (var i = 0; i < particles.length; i++) {
				particles[i].velocity=new THREE.Vector3(speedX,-10,0);
			}
		},100);


	}


	function loop() {
		for(var i = 0; i<particles.length; i++){
			var particle = particles[i]; 
			particle.updatePhysics(); 

			with(particle.position)
			{
				if((y<-1000)&&starSnow) {y+=2000;}

				if(x>1000) x-=2000; 
				else if(x<-1000) x+=2000;
				if(z>1000) z-=2000; 
				else if(z<-1000) z+=2000;
			}			
		}

		camera.lookAt(scene.position); 

		renderer.render( scene, camera );
	}
</script>

</body>
</html>

js

snow.js

Particle3D=function(material){
	THREE.Particle.call(this,material);
	this.velocity=new THREE.Vector3(0,0,0);//速度;
	this.velocity.rotateX(10);//旋轉;
	this.gravity=new THREE.Vector3(0,0,0.5);//加速度;
	this.drag=1;//速度相乘係數;
};
//Particle:粒子;
//prototype:原形;
Particle3D.prototype=new THREE.Particle();
Particle3D.prototype.constructor=Particle3D;//建構函式
Particle3D.prototype.updatePhysics=function(){
	this.velocity.multiplyScalar(this.drag);//向量相乘函式
	this.velocity.addSelf(this.gravity);//向量相加函式
	this.position.addSelf(this.velocity);//向量相加函式
}
var TO_RADIANS=Math.PI/180;//角度向弧度轉換系數*
THREE.Vector3.prototype.rotateY=function(angle){
	//繞Y軸順時針旋轉angle;
	cosRY=Math.cos(angle*TO_RADIANS);
	sinRY=Math.sin(angle*TO_RADIANS);
	var tempz=this.z;
	var tempx=this.x;
	this.x=(tempx*cosRY)+(tempz*sinRY);
	this.z=(tempx*-sinRY)+(tempz*cosRY);
}
THREE.Vector3.prototype.rotateX=function(angle){
	//繞X軸順時針旋轉angle;
	cosRY=Math.cos(angle*TO_RADIANS);
	sinRY=Math.sin(angle*TO_RADIANS);
	var tempz=this.z;;
	var tempy=this.y;
	this.y=(tempy*cosRY)+(tempz*sinRY);
	this.z=(tempy*-sinRY)+(tempz*cosRY);
}
THREE.Vector3.prototype.rotateZ=function(angle){
	//繞Z軸順時針旋轉angle;
	cosRY=Math.cos(angle*TO_RADIANS);
	sinRY=Math.sin(angle*TO_RADIANS);
	var tempx=this.x;;
	var tempy=this.y;
	this.y=(tempy*cosRY)+(tempx*sinRY);
	this.x=(tempy*-sinRY)+(tempx*cosRY);
}
function randomRange(min,max){
	return((Math.random()*(max-min))+ min);
}

注意：這裡順便送大家一套2020最新企業web前端全棧開發專案實戰視訊教程，點選此處進來獲取跟著練習下，希望大家一起進步哦！

threecanvas.js

因為這個js的程式碼有點長，是官方提供的，就不直接放了，地址：
https://github.com/8042965/8042965.github.io/tree/master/happy

所有程式碼都在
在這裡插入圖片描述

花了20分鐘，給女朋友們寫了一個web版群聊程式
2020-01-14
Web
精讀《Serverless 給前端帶來了什麼》
2019-03-11
Server前端
為什麼Web前端薪資如此高呢？總結了這4個原因
2022-01-24
Web前端
雙十二來了，你的表格可以這樣玩！這個工具還能提升Excel的效能
2021-12-13
Excel
這個好玩又實用的jupyter外掛我真的愛了
2022-03-19
Flutter | 日誌還能這麼列印，太秀了！
2021-05-17
Flutter
收益 or 挑戰？Serverless 究竟給前端帶來了什麼
2019-10-31
Server前端
給喜歡的女孩子寫了一段python程式碼，不用我表白，就成我女朋友了
2019-01-04
Python
快端午了，用Python畫一盤粽子送給你
2022-06-02
Python
我造了個前端 Mock 工具
2022-05-11
前端Mock
於是，我們給前端分享會定義了一個未定義的名字
2018-07-16
前端
微信小程式的出現給前端帶來了什麼
2019-02-27
微信小程式前端
用 vuetifyjs 擼了個前端介面，感覺對前端不是很精通的後端還是可以用一用，元件基本夠用
2020-07-04
VueJS前端後端元件
前端linux基礎，這一篇就夠了
2019-03-21
前端Linux
Web 前端單元測試到底要怎麼寫？看這一篇就夠了
2018-08-16
Web前端
2018你成長了麼？一份給你的前端技術清單
2018-11-04
前端
SpringAI 她來了，真的來了
2024-04-15
SpringAI
微信和Python之間，還能這樣玩的嘛，漲見識了！
2018-12-17
Python
快過年了，用Python寫副春聯&福字送給你~
2022-01-24
Python
為了讓她10分鐘入門canvas，我熬夜寫了3個小專案和這篇文章
2022-01-23
Canvas
人工智慧ChatGPT被玩壞了
2022-12-08
人工智慧ChatGPT
寫了這麼多年 JavaScript ，竟然還不知道這些技巧？
2021-02-04
JavaScript
都用vue3了，還這樣用emit麼？
2024-11-25
VueMIT
懷疑前端元件把我的excel檔案搞壞了，怎麼證明
2021-07-24
前端元件Excel
用 Laravel 6 寫了一個部落格
2020-05-07
Laravel
用Python寫個了紅包提醒，再不怕錯過一個億了
2019-01-28
Python
現在的AI工具還能寫劇本殺了？
2024-06-25
AI
前端的夥伴們, chrome canary 控制檯新增了一個非常實用的功能
2018-05-16
前端Chrome
寫文章一年了，我用到的工具都在這兒了！
2021-02-15
寫了一個 WebSocket 框架
2021-09-28
Web框架
寫了一個 MySQL 代理
2021-02-02
MySql
手機沒網了，卻還能支付，這是什麼原理？
2020-09-03
用 Node.js 給樹莓派寫了個控制檯
2018-10-29
Node.js樹莓派
學了幾個月還是很迷茫？一個前端實習生應該具備怎麼樣的能力?
2019-05-10
前端
為什麼Java有了synchronized之後還造了Lock鎖這個輪子？
2022-05-26
Javasynchronized
關於 nginx 前端知道這些就夠了
2019-01-19
Nginx前端
Redis壞了怎麼辦？
2022-07-13
Redis
國風潮流興起？！這款手遊提供了一個方案
2023-12-13

前端還能這麼玩？(女朋友生日，用前端寫了一個好玩的送給了她，高興壞了)

一年一度的生日到了

可以訪問：https://8042965.github.io/happy/ 檢視哦

準備素材

動手實操

專案結構如下

修改index.html中的圖片

修改main.html的圖片

程式碼給你

index.html

main.html

js

snow.js

threecanvas.js

相關文章