0

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

4

3 回答 3

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

希望这可以帮助

于 2019-03-10T14:33:10.910 回答
0 

$(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">以匹配您想要模糊的内容。

于 2019-03-10T14:37:13.363 回答
0

您可以在 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 秒 - 而不是为背景设置模糊。

于 2019-03-10T14:37:25.690 回答