用户:Nannnnn/代码测试/common.js - 版本历史

Nannnnn：撤销Nannnnn（讨论）的版本33167

2022-08-23T19:52:28Z

撤销Nannnnn（讨论）的版本33167

←上一版本		2022年8月24日 (三) 03:52的版本
第1行：		第1行：
	~~const cursor = document.querySelector('.cursor')~~		是谁没半个小时就真香回来乱试了（目移）
	~~const shape = document.querySelectorAll('.shape')~~		还是坏的，但是存一下这里

	~~document.body.addEventListener(~~"~~mousemove~~"~~, evt =~~> {		<meta charset="UTF-8">
	~~const mouseX~~ = ~~evt.clientX;~~		/**
	~~const mouseY~~ = ~~evt.clientY;~~		* 当屏幕的宽度 >= 960，页面的背景颜色为红色
			* 当屏幕的宽度 >= 640，页面的背景颜色为蓝色
	/~~/ cursor~~.~~style = `transform: translate~~(~~${mouseX}px~~, ${~~mouseY}px~~);`		* 当屏幕的宽度 < 640，页面的背景颜色为绿色
			*/
	// ~~shape~~.~~forEach(item => {~~		window.addEventListener('load',function (ev) {
	~~// item~~.~~style = `transform: translate~~(~~${mouseX}px~~, ~~${mouseY}px~~);`		changeColor();
	// })		// 1. 监听窗口尺寸发生改变
			window.onresize('resize',changeColor);
	~~gsap~~.~~set~~(".~~cursor",~~ {		});
	~~x: mouseX,~~		function changeColor() {
	~~y: mouseY~~		if (myTool.client().width >= 960){
	})		document.body.style.backgroundColor = 'red';
			}else if(myTool.client().width >= 640){
	~~gsap~~.to(".~~shape",~~ {		document.body.style.backgroundColor = 'blue';
	~~x: mouseX,~~		}else{
	~~y: mouseY,~~		document.body.style.backgroundColor = 'green';
	~~stagger: -0~~.1		}
	})		}
	})

2022年8月23日 (二) 19:46 Nannnnn

2022-08-23T19:46:12Z

←上一版本		2022年8月24日 (三) 03:46的版本
第1行：		第1行：
	~~是谁没半个小时就真香回来乱试了（目移）~~		const cursor = document.querySelector('.cursor')
	~~还是坏的，但是存一下这里~~		const shape = document.querySelectorAll('.shape')

	~~<meta charset=~~"~~UTF-8~~">		document.body.addEventListener("mousemove", evt => {
	/**		const mouseX = evt.clientX;
	* 当屏幕的宽度 >= ~~960，页面的背景颜色为红色~~		const mouseY = evt.clientY;
	* 当屏幕的宽度 >= ~~640，页面的背景颜色为蓝色~~
	* 当屏幕的宽度 < 640，页面的背景颜色为绿色		// cursor.style = `transform: translate(${mouseX}px, ${mouseY}px);`
	*/
	~~window~~.~~addEventListener~~(~~'load'~~,~~function (ev)~~ {		// shape.forEach(item => {
	~~changeColor(~~);		// item.style = `transform: translate(${mouseX}px, ${mouseY}px);`
	// 1. ~~监听窗口尺寸发生改变~~		// })
	~~window~~.~~onresize~~(~~'resize'~~,~~changeColor~~);
	});		gsap.set(".cursor", {
	~~function changeColor() {~~		x: mouseX,
	~~if (myTool~~.~~client~~().~~width >= 960)~~{		y: mouseY
	~~document.body.style.backgroundColor = 'red';~~		})
	}~~else if(myTool~~.~~client~~().~~width >= 640)~~{
	~~document.body.style.backgroundColor = 'blue';~~		gsap.to(".shape", {
	~~}else{~~		x: mouseX,
	~~document~~.~~body.style.backgroundColor = 'green';~~		y: mouseY,
	}		stagger: -0.1
	}		})
			})

2022年8月23日 (二) 19:28 Nannnnn

2022-08-23T19:28:22Z

←上一版本		2022年8月24日 (三) 03:28的版本
第1行：		第1行：
			是谁没半个小时就真香回来乱试了（目移）
			还是坏的，但是存一下这里

	<meta charset="UTF-8">		<meta charset="UTF-8">
	/**		/**

2022年8月23日 (二) 19:23 Nannnnn

2022-08-23T19:23:57Z

←上一版本		2022年8月24日 (三) 03:23的版本
第1行：		第1行：
			<meta charset="UTF-8">
	/**		/**
	* 当屏幕的宽度 >= 960，页面的背景颜色为红色		* 当屏幕的宽度 >= 960，页面的背景颜色为红色

2022年8月23日 (二) 19:20 Nannnnn

2022-08-23T19:20:35Z

←上一版本		2022年8月24日 (三) 03:20的版本
第1行：		第1行：

			/**
			* 当屏幕的宽度 >= 960，页面的背景颜色为红色
			* 当屏幕的宽度 >= 640，页面的背景颜色为蓝色
			* 当屏幕的宽度 < 640，页面的背景颜色为绿色
			*/
			window.addEventListener('load',function (ev) {
			changeColor();
			// 1. 监听窗口尺寸发生改变
			window.onresize('resize',changeColor);
			});
	function changeColor() {		function changeColor() {
	if (myTool.client().width >= 960){		if (myTool.client().width >= 960){

2022年8月23日 (二) 19:15 Nannnnn

2022-08-23T19:15:23Z

←上一版本		2022年8月24日 (三) 03:15的版本
第1行：		第1行：
	/**
	* 当屏幕的宽度 >= 960，页面的背景颜色为红色
	* 当屏幕的宽度 >= 640，页面的背景颜色为蓝色
	* 当屏幕的宽度 < 640，页面的背景颜色为绿色
	*/

	function changeColor() {		function changeColor() {
	if (myTool.client().width >= 960){		if (myTool.client().width >= 960){

2022年8月23日 (二) 19:14 Nannnnn

2022-08-23T19:14:32Z

←上一版本		2022年8月24日 (三) 03:14的版本
第4行：		第4行：
	* 当屏幕的宽度 < 640，页面的背景颜色为绿色		* 当屏幕的宽度 < 640，页面的背景颜色为绿色
	*/		*/
	~~window.addEventListener('load',function (ev) {~~
	~~changeColor();~~
	~~// 1. 监听窗口尺寸发生改变~~
	~~});~~
	function changeColor() {		function changeColor() {
	if (myTool.client().width >= 960){		if (myTool.client().width >= 960){

2022年8月23日 (二) 19:12 Nannnnn

2022-08-23T19:12:19Z

←上一版本		2022年8月24日 (三) 03:12的版本
第7行：		第7行：
	changeColor();		changeColor();
	// 1. 监听窗口尺寸发生改变		// 1. 监听窗口尺寸发生改变
	~~window.addEventListener('resize',changeColor)~~
	});		});
	function changeColor() {		function changeColor() {

Nannnnn：创建页面，内容为“/** * 当屏幕的宽度 >= 960，页面的背景颜色为红色 * 当屏幕的宽度 >= 640，页面的背景颜色为蓝色 * 当屏幕的宽度 < 640，页面的背景颜色为绿色 */ window.addEventListener('load',function (ev) { changeColor(); // 1. 监听窗口尺寸发生改变 window.addEventListener('resize',changeColor) }); function changeColor() { if (myTool.client().width >= 960){…”

2022-08-23T19:10:33Z

创建页面，内容为“* * 当屏幕的宽度 >= 960，页面的背景颜色为红色 * 当屏幕的宽度 >= 640，页面的背景颜色为蓝色 * 当屏幕的宽度 < 640，页面的背景颜色为绿色： window.addEventListener('load',function (ev) { changeColor(); // 1. 监听窗口尺寸发生改变 window.addEventListener('resize',changeColor) }); function changeColor() { if (myTool.client().width >= 960){…”

新页面

/**
* 当屏幕的宽度 >= 960，页面的背景颜色为红色
* 当屏幕的宽度 >= 640，页面的背景颜色为蓝色
* 当屏幕的宽度 < 640，页面的背景颜色为绿色
*/
window.addEventListener('load',function (ev) {
changeColor();
// 1. 监听窗口尺寸发生改变
window.addEventListener('resize',changeColor)
});
function changeColor() {
if (myTool.client().width >= 960){
document.body.style.backgroundColor = 'red';
}else if(myTool.client().width >= 640){
document.body.style.backgroundColor = 'blue';
}else{
document.body.style.backgroundColor = 'green';
}
}