我能够找到 CSS 来模糊我的内容。但是当涉及到模糊背景并在 5 秒后自动使背景正常化时，我无法做到这一点。基本上，我只是想在任何用户单击输入类型按钮仅 5 秒时模糊我的文本，并通过仅使用纯 javascript、html 和 css 使情况正常。 谁能帮我做这件事。
.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>最佳答案
<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 秒，实际执行模糊的脚本作为回调。通过将您创建的样式“模糊”添加到表单来实现模糊。然后 CSS 将选择它并适本地设置样式。如果您检查页面上的元素，单击按钮，您将看到正在添加的类。
希望对你有帮助
关于javascript - 如何使用 JavaScript 模糊背景几秒钟？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55088528/