我能够找到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>
这应该足以让你开始，显而易见我模糊整个形式。
当你点击'Blur！'时按钮，它将调用脚本'blurMe（）'。这使用'setTimeout'函数暂停5秒，实际执行模糊的脚本作为回调。通过将您创建的样式“模糊”添加到表单来实现模糊。然后CSS将选择它并适当地设置样式。如果检查页面上的元素，单击按钮，您将看到要添加的类。
希望这可以帮助
$(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">以匹配您想要模糊的内容。
你可以在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秒 - 而不是为背景设置模糊。