Question

我能够找到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>

Answer 1

    <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将对此进行选择并适当地设置样式。如果您检查页面上的元素，请单击按钮，您将看到正在添加的类。

希望这会有所帮助

Answer 2

$(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">使其与要模糊的内容匹配。

Answer 3

您可以在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";
})

Link to working code

此外，您还可以使用setTimeout-将计时器设置为5秒-然后取消设置背景模糊。

如何使用JavaScript模糊背景几秒钟？

3 个答案: