简单实现网站变灰的代码(JS)

非常简单,在网页中增加如下代码:


<script type="text/javascript">
var ht = document.getElementsByTagName("html")[0];
ht.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
</script>
( 只支持ie)

完整示例:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<img id="img1" src="http://blog.readnovel.com/image/style/logo_blogrn.gif" alt="文学博客" />
<font color="red">dsfsf</font>
</body>
</html>
<script type="text/javascript">...
<!-- 注意,开头的DOCTYPE描述不可少,否则对html的滤镜将不起作用,不过对body还是可以的 -->
var ht = document.getElementsByTagName("html")[0];
ht.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
</script>

如果您的网页顶部没有加:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

那么你可以用:


<script type="text/javascript">
var ht = document.getElementsByTagName("body")[0];
ht.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)";
</script>

赶紧加一下吧,为地震中遇难同胞哀悼……

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的在线选座位功能的示例代码: HTML: ```html <div class="seat-map"> <div class="screen">屏幕</div> <div class="seats"> <div class="seat-row"> <div class="seat unavailable"></div> <div class="seat unavailable"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> </div> <div class="seat-row"> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> </div> <div class="seat-row"> <div class="seat"></div> <div class="seat"></div> <div class="seat"></div> <div class="seat unavailable"></div> <div class="seat unavailable"></div> <div class="seat"></div> </div> </div> </div> ``` CSS: ```css .seat-map { margin: 20px; font-size: 14px; } .screen { text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 10px; } .seats { display: flex; flex-direction: column; } .seat-row { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; } .seat { width: 40px; height: 40px; border-radius: 5px; margin-right: 10px; background-color: #ccc; cursor: pointer; } .unavailable { background-color: #aaa; cursor: not-allowed; } .selected { background-color: blue; } ``` JavaScript: ```javascript const seats = document.querySelectorAll('.seat:not(.unavailable)'); seats.forEach((seat) => { seat.addEventListener('click', () => { if (seat.classList.contains('selected')) { seat.classList.remove('selected'); } else { seat.classList.add('selected'); } }); }); ``` 这段代码实现了以下功能: - 显示一个座位地图,包括屏幕和多排座位。 - 座位用带圆角的矩形表示,色表示未选座,浅色表示已选座但不可用,蓝色表示已选座且可用。 - 点击一个未选中的座位会将其标记为已选中,点击一个已选中的座位会将其取消选中。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值