как размыть фон за несколько секунд с помощью JavaScript? - PullRequest
Новая
       1

как размыть фон за несколько секунд с помощью JavaScript?

0 голосов
/ 10 марта 2019

Я смог найти 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>

Ответы [ 3 ]

0 голосов
/ 10 марта 2019 

$(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"> в соответствии с тем, что вы хотели бы размыть.

0 голосов
/ 10 марта 2019

Вы можете использовать привязку событий в 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 секунд - и затем сбросить размытие для фона.

0 голосов
/ 10 марта 2019 
    <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 тогда подберет это и стилизует соответственно. Если вы осмотрите элемент на странице, нажмите кнопку, вы увидите добавляемый класс.

Надеюсь, это поможет

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...