前端页面修饰以及整体变灰效果

原因

每当公祭日或者国家有社么大的事情发生，我们日常生活所访问的网页都会变灰，它的实现原理也非常简单，只需要一行代码就可以了

实现

1	style="filter:grayscale(100%)"

这个css样式就可以使页面变灰，括号里面的100%是变灰的程度，可以根据页面效果进行调节
通常这个样式会使用在html头标签中

1
2
3

<html style="filter:grayscale(100%)">
    
</html>

这样可以做到使全部页面陡变成灰色

类似于这样：

效果图

一般我们访问一个比较大的网站时，会发现它上面的banner图会自动地横向切换，这个功能都是由JS代码来实现的
实现横向切换效果的方式有很多种，如果想高效并且快速的实现这个功能需要用到JQuery的封装
jquery.cycle.js与jquery.js文件，我把他们放到百度网盘中，有需要开以来取
链接：https://pan.baidu.com/s/1A1GiAqsbc8ErDSeVyYK4OQ
提取码：hytz

前端代码应用

//js部分代码   html代码中对应图片id为banner
<script type="text/javascript">
			$(function() {
				$('#banner').cycle({
					fx: 'scrollLeft'
				});
			})
</script>

//html代码
<div id="banner">
	<img src="images/banner2.bmp" alt="">
	<img src="images/banner3.bmp" alt="">
	<img src="images/banner4.bmp" alt="">
</div>

//css部分
<style type="text/css">
	#banner
	{
		width:1000px;
		margin:0px auto;
		height:600px;
		overflow:hidden;
		z-index:2;
	}	
</style>

JS实现倒计时功能

这个也是纯JS实现的功能

<script type="text/javascript">
		function showTime() {
			var spans = document.querySelectorAll('sp');				//获取html中所有<sp>标签
			var endTime = new Date('2023-3-1 12:00:00').getTime();		//自己设计的倒计时结束时间戳
			var newTime = new Date().getTime();						//获取现在的时间戳
			var diffTime = (endTime - newTime) / 1000;				//两时间戳相减
			var day = parseInt(diffTime / 60 / 60 / 24);			//换算成对应的时分秒
			var honur = parseInt(diffTime / 60 / 60 % 24);
			var min = parseInt(diffTime / 60 % 60);
			var sen = parseInt(diffTime % 60);
			spans[0].innerText = day;							//输出到相应的地方
			spans[1].innerText = honur;
			spans[2].innerText = min;
			spans[3].innerText = sen;
			console.log(spans[0]);
		}

		setInterval(showTime, 1000)
	</script>

<div class="onfont">
	<h1>在线订购</h1>
	<p>秒杀倒计时：<sp>0</sp>天<sp>0</sp>时<sp>0</sp>分<sp>0</sp>秒</p>
	<img src="images/cc2.svg" alt="箭头">
</div>
//还可以加一点css样式