如何使用JavaScript模糊背景几秒钟？
如何使用JavaScript模糊背景几秒钟？
提问于 2019-03-10 22:11:46
我能够找到css来模糊我的内容。但是当需要在5秒后自动模糊背景和正常背景时，我无法做到这一点。基本上，我只是想通过只使用纯javascript、html和css，在任何用户点击输入类型按钮仅5秒时模糊我的文本，并使情况正常。有人能帮我做这件事吗？
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}<HTML>
<head><title>Calculation</title>
</head>
<body>
<form>
PE Ratio
<input type="number" id="PE" /><br>
ROCE
<input type="number" id="ROCE" /><br>
Sales Growth
<input type="number" id="SG" /> <br>
<input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; top: 250;" onsubmit="return false" onclick="amount.value = (15 -( PE.valueAsNumber/2)) + (40 - (ROCE.valueAsNumber)) + (10-(SG.valueAsNumber))">
<p>Rating: <div id="div1">
<strong><output name="amount" for="hours rate vat">0</output></strong></div>
</p>
</form>
</body>
</HTML>
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-10 22:33:11
<HTML>
<head>
<title>Calculation</title>
</head>
<body>
<form id="form">
PE Ratio
<input type="number" id="PE" /><br>
ROCE
<input type="number" id="ROCE" /><br>
Sales Growth
<input type="number" id="SG" /> <br>
<input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; top: 250;" onsubmit="return false" onclick="amount.value = (15 -( PE.valueAsNumber/2)) + (40 - (ROCE.valueAsNumber)) + (10-(SG.valueAsNumber))">
<p>Rating: </p>
<div id="div1">
<strong><output name="amount" for="hours rate vat">0</output></strong>
</div>
</form>
<button onclick="blurMe()">Blur!</button>
</body>
<script>
function blurMe() {
var element = document.getElementById("form");
element.classList.add("blur");
setTimeout(function() {
element.classList.remove("blur");
}, 5000);
}
</script>
<style>
.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
</style>
</HTML>这应该足以让你入门，让你明白我模糊了整个表单。
当你点击“模糊”按钮，它将调用脚本'blurMe()‘。它使用'setTimeout‘函数来暂停5秒，而实际执行模糊处理的脚本则作为回调。模糊是通过将您创建的样式' blur‘添加到窗体中来实现的。然后，CSS会将其提取出来，并适当地设置样式。如果您检查页面上的元素，单击按钮，您将看到正在添加的类。
希望这能有所帮助
Stack Overflow用户
发布于 2019-03-10 22:37:13
$(document).ready(function() {
$("#input").click(function() {
$("#blurme").toggleClass("blur");
setTimeout(function(){ $("#blurme").toggleClass("blur"); }, 5000);
});
});.blur {
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<HTML>
<head><title>Calculation</title>
</head>
<body>
<form>
PE Ratio
<input type="number" id="PE" /><br>
ROCE
<input type="number" id="ROCE" /><br>
Sales Growth
<input type="number" id="SG" /> <br>
<input type="button" Value="Multiply" style="height: 30px; width: 150px; left: 250; top: 250;" onsubmit="return false" onclick="amount.value = (15 -( PE.valueAsNumber/2)) + (40 - (ROCE.valueAsNumber)) + (10-(SG.valueAsNumber))" id="input">
<div id="blurme">
<p>Rating: <div id="div1">
<strong><output name="amount" for="hours rate vat">0</output></strong></div>
</p></div>
</form>
</body>
</HTML>
此代码段使用jQuery，您可以重写toggleClass()函数，如下所示：
function toggleClass(el, cssClass) {
var elList = document.querySelectorAll(el);
for (var i = 0; i < elList.length; i ++) {
elList[i].classList.toggle(cssClass);
}
}您可以移动<div id="blurme">以匹配您想要模糊的内容。
Stack Overflow用户
发布于 2019-03-10 22:37:26
您可以在JS中使用事件绑定，
这里我使用了两个事件--焦点(当用户选择输入时)和模糊-(当用户取消选择输入时)
const mydiv = document.getElementsByClassName('container')[0];
document.getElementById('myinput').addEventListener('focus',()=>{
mydiv.style.filter = "blur(15px)";
})
document.getElementById('myinput').addEventListener('blur',()=>{
mydiv.style.filter = "unset";
})也可以使用setTimeout -将计时器设置为5秒-然后取消背景模糊设置。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55088528
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号