WEB前端学习

最新推荐文章于 2020-09-21 08:46:55 发布

原创最新推荐文章于 2020-09-21 08:46:55 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

0 篇文章

订阅专栏

该博客主要围绕信息技术中的前端开发知识展开，包含HTML学习，如旋转、鼠标滑入滑出变色效果，HTML标签基础、颜色及格式标签等；还有CSS学习，以及JS学习，涉及单击、鼠标移入等事件，变量定义、数组、对象等内容，最后提到小游戏。

HTML学习

旋转.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		.imgid{
			background:#888;

			transform:rotate(0deg);
			border-radius:267px;
			cursor:pointer;
		}
	</style>
	<script src='jquery.min.js'></script>
</head>
<body>
	<img src="bo.jpg"  class="imgid">
</body>
<script>
$('.imgid').click(function(){
	s=0;
	v=10;
	setInterval(function(){
		s+=v;
		document.title=s;
		$('.imgid').css({'transform':'rotate('+s+'deg)'});
	},100);
});
</script>
</html>

鼠标滑入滑出变色.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		.imgid{
			background:#888;

			/*css3样式*/
			transform:rotate(0deg);
			border-radius:256px;
			cursor:pointer;
		}
	</style>
	<script src="jquery.min.js"></script>
</head>
<body>
	<img src="cai.png"  class="imgid">
</body>
<script>
// $('.imgid').click(function(){
// 	s=0;
// 	v=10;
// 	setInterval(function(){
// 		s+=v;
// 		document.title=s;
// 		$('.imgid').css({'transform':'rotate('+s+'deg)'});

// 	},100);
// });

$('.imgid').hover(
	function(){
		$(this).css({'background':'#aaf'});
	},
	function(){
		$(this).css({'background':'#888'});

	}
);
</script>
</html>

HTML标签基础

实体标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<body>
	<h1>&lt;</h1>
	<h1>&gt;</h1>
	<h1>a&nbsp;&nbsp;&nbsp;b</h1>
	<h1>&laquo;</h1>
	<h1>&raquo;</h1>
	<h1>&times;</h1>
</body>
</html>

颜色

红 绿 蓝
#ff00ff紫色
#ff0000红色
#00ff00绿色
#0000ff蓝色
#cccccc灰色
#ffff00黄色
#00ffff青色
#000000黑色
#ffffff白色

格式标签

br    		//换行
nobr		//不换行
center	//居中
pre		//按源格式输出
ul			//无序列表
ol			//有序列表
dl			//自定义列表
dt			//自定义标题
dd		//自定义列表内容
hr 		//导航线

CSS学习
JS学习
js单击事件.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="img">
		<img src="hack.jpg" onclick="alert(123)">
	</div>
</html>

js鼠标移入事件.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class="img">
		<img src="hack.jpg" onmouseenter="alert(123)">
	</div>
</html>

js内部嵌套.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<div class="img">
		<img src="hack.jpg" id='hackid'>
	</div>
</body>
<script>
	//找到图片
	hackobj=document.getElementById('hackid');
	//给图片加事件
	hackobj.onclick=function(){
		//代码段
		alert(1);
	}
	//触发事件
	</script>
</html>

js外部包含.html

</head>
<body>
	<div class="img">
		<img src="hack.jpg" id='hackid'>
	</div>
</body>
<script src='1.js'></script>
</html>

1.js

//找到图片
	hackobj=document.getElementById('hackid');
	//给图片加事件
	hackobj.onclick=function(){
		//代码段
		alert(123);
	}
	//触发事件

变量定义：

username='hack';

字符串连接变量:

'my name is '+username

输出变量：

alert(str);
document.write(str);

JS如何输出变量：

1、alert(username);
2、document.write(username);
	document.write('<h1>'+username+'</h1>');

js中字符串连接符用：+
js中注释符：
1、// 单行注释
2、/* 多行注释 */

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
	<div class="img">
		<img src="hack.jpg" id='hackid'>
	</div>
</body>
<script>
id=100;
document.write(id+5);  //105
document.write(id+'5');//1005
</script>
</html>

数组

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	
</head>
<body>
</body>
<script>
ps = new Array('tom','hack','bilibili');   //定义数组方式1
as=['jack','john','lilei'];   //定义数组方式2
document.write(ps+'<br>');
document.write(as);
</script>
</html>

js对象
1、js对象

obj = new Object();

2、DOM对象

eleobj = document;

3、json对象

jsobj={
		'username':'user1',
		'age':'20',
		'sex':'nan',
		'say':function(){
			alert(1);
		}
};

小游戏：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{
			cursor:pointer;
			position:absolute;
			top:0px;
			left:0px;
		}
	</style>
</head>
<body>
	<img src="xx.jpg" id="hack">
</body>
<script>
imgobj=document.getElementById('hack');

x=0;
y=30;
a=0;
b=40;
document.onkeydown=function(event){
	kc=event.keyCode;
	document.title=kc;

	switch(kc){
		case 37:
			x-=y;
			imgobj.style.left=x+'px';
			document.body.style.background='#f00';
			break;
		case 38:
			a-=b;
			imgobj.style.top=a+'px';
			document.body.style.background='#0f0';
			break;
		case 39:
			x+=y;
			imgobj.style.left=x+'px';
			document.body.style.background='#00f';
			break;
		case 40:
			a+=b;
			imgobj.style.top=a+'px';
			document.body.style.background='#f0f';
			break;
	}
}

</script>
</html>