三大家族相关案例

最新推荐文章于 2022-01-22 13:54:32 发布

原创最新推荐文章于 2022-01-22 13:54:32 发布 · 4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#三大家族

前端技术专栏收录该内容

24 篇文章

订阅专栏

博客主要提及了进度条和返回头部小火箭相关内容，这些都属于信息技术领域前端交互元素，能提升用户体验。

进度条

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#progress{
			width: 250px;
			height: 40px;
			border: thin solid green;
			left: 50%;
			top:100px;
			transform:translateX(-50%);
			position: relative;
		}
		#bar{
			width: 20px;
			height: 40px;
			background-color: green;
			position: absolute;
			top:0;
			left: 0;
		}
		#percent{
			position: absolute;
			left: 250px;
			line-height: 40px;
		}
	</style>
</head>
<body>
	<div id="progress">
		<div id="bar"></div>
		<span id='percent'>0%</span>
	</div>
	<script>
		function $(id){
			return document.getElementById(id);
		}

		var timer =setInterval(function(){
			$('bar').style.width = $('bar').clientWidth+2+'px';
			$('percent').innerHTML =parseInt(100*$('bar').clientWidth/$('progress').clientWidth)+'%';

			if($('bar').clientWidth>=250){
				clearInterval(timer);
			}
		},10)
		
	</script>
</body>
</html>

返回头部小火箭

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img{
			position: fixed;
			bottom: 0;
			right: 20px;
			display: none;
		}
	</style>
</head>
<body>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<p>4444444444</p>
	<img src="Top.jpg" alt="" class='getTop'>
	<script>
	var gt = document.querySelector('.getTop');
	
		onscroll = function(){
	var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
	console.log(scrollTop);	
			if(scrollTop > 0){
				gt.style.display = 'block';
			}else{
				gt.style.display = 'none'
			}
		}
		gt.onclick = function(){
			document.documentElement.scrollTop = 0;
			document.body.scrollTop = 0;
		}
	</script>
</body>
</html>