趣味小例子

最新推荐文章于 2023-10-08 13:16:32 发布

Ena-coder

最新推荐文章于 2023-10-08 13:16:32 发布

阅读量221

点赞数

分类专栏：向前端大佬看齐

本文链接：https://blog.csdn.net/weixin_37702998/article/details/103109531

版权

向前端大佬看齐专栏收录该内容

20 篇文章 0 订阅

订阅专栏

例1：

<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<script type = "text/javascript" src="test.js"></script>
</body>

var div = document.getElementsByTagName('div');
div[0].style.width="50px";
div[0].style.height="50px";
div[0].style.borderRadius = '50%';
div[0].style.backgroundColor="orange";
var count = 0;
//实现多次点击两色交替变换
div[0].onclick = function(){
	//谁调用onclick方法，this就是谁，这里的this是div[0]
	//方法一：三目运算符
	// this.style.backgroundColor = 
	//(this.style.backgroundColor == 'purple') ? 'orange' :'purple';
	//方法二：计数器
	count ++;
	if(1 == count % 2 ){
		this.style.backgroundColor = 'orange';
	}else{
		this.style.backgroundColor = 'purple';
	}
	console.log(this.style.backgroundColor);
}

在这里插入图片描述
例2：实现选项卡功能

<style type = "text/css">
	.content{
		margin-top:10px;	
		width:200px;
		height:100px;
		border-radius:5%;
		display:none;
	}
	.active{
		border:solid green 1px;
	}
	button{
		border:solid #999999 1px;
		background-color:white;
		border-radius:10%;
		width:50px;
	}
	</style>
<body>
	<div class = 'wrapper'>
		<button class = 'active'>yellow</button>
		<button>blue</button>
		<button>red</button>
		<div class = 'content' style = 'background-color:yellow;display:block'></div>
		<div class = 'content' style = 'background-color:blue;'></div>
		<div class = 'content' style = 'background-color:red;'></div>
	</div>
	<script type = "text/javascript" src="test.js"></script>
</body>

// 选项卡功能
var btn = document.getElementsByTagName('button');
var div = document.getElementsByClassName('content');
//实现每个button对应一个div
for(var i = 0; i < btn.length; i++){
	(function(n){
		btn[n].onclick = function(){
			// ①取消同伴的active
			for(var j = 0; j < btn.length; j++){
				btn[j].className = "";
				div[j].style.display = "none";
			}
			//②给自己加active
			this.className = 'active';
			//如果没有立即执行函数，这个函数执行了，但是i的值也并未传入
			div[n].style.display = "block";
			console.log(btn);
			console.log(div)
		}
	}(i))
}

在这里插入图片描述
例3：实现物体移动

var div = document.createElement('div');
document.body.appendChild(div);
div.style.width = '50px';
div.style.height = '50px';
div.style.backgroundColor = 'purple';
div.style.position = 'absolute';
div.style.top = '0';
div.style.left = '0';
var speed = 0;
var timer = setInterval(function(){//设置定时器
	speed += 1/5;//实现方块加速运动
	div.style.left = parseInt(div.style.left) + speed + 'px';
	div.style.top = parseInt(div.style.top) + speed + 'px';
	if(parseInt(div.style.top)  > 150 && parseInt(div.style.left) > 150){
		clearInterval(timer);//实现让方块运行到一定位置之内停止
	}
},100)//每隔100ms就执行一次函数

在这里插入图片描述
例4：物体与键盘绑定移动

var div = document.createElement('div');
document.body.appendChild(div);
var btn = document.getElementsByTagName('button')[0];
div.style.width = '50px';
div.style.height = '50px';
div.style.backgroundColor = 'purple';
div.style.position = 'absolute';
div.style.top = '0';
div.style.left = '0';
var speed = 5
btn.onclick = function(){
	speed += 5;
}
document.onkeydown = function(e){
	switch(e.which){
		case 38:
			div.style.top = parseInt(div.style.top) - speed + 'px';
			break;
		case 40:
			div.style.top = parseInt(div.style.top) + speed + 'px';
			break;
		case 37:
			div.style.left = parseInt(div.style.left) - speed + 'px';
			break;
		case 39:
			div.style.left = parseInt(div.style.left) + speed + 'px';
			break;
	}
}

在这里插入图片描述
例5：

<style type = "text/css">
	*{
		margin:0;
		padding:0;
	}
	ul{	
		margin-top:20px;
		margin-left:20px;
		list-style:none;
		width:200px;
		height:200px;
	}
	li{
		box-sizing:border-box;
		float:left;
		width:20px;
		height:20px;
		border:solid black 1px;
	}
	</style>
<body>
	<ul>
		<li img-data = '0'></li>
		<li img-data = '0'></li>
		<li img-data = '0'></li>
		<!--.....一共100个li -->
		<li img-data = '0'></li>
	</ul>
	<script type = "text/javascript" src="test.js"></script>
</body>

var ul = document.getElementsByTagName('ul')[0];
ul.onmouseover = function(e){
	var event = e || window.event;
	var target = event.target || event.srcElement;
	
	target.style.backgroundColor = 'rgb(255,0,' + 
	target.getAttribute('img-data') + ')';
	target.setAttribute('img-data',parseInt(
	target.getAttribute('img-data')) + 100);
}

在这里插入图片描述

Ena-coder

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
趣味小例子

例1：<body> <div>1</div> <div>2</div> <div>3</div> <script type = "text/javascript" src="test.js"></script></body>var div = document.g...
复制链接

扫一扫

专栏目录