How to create a reaction on user tap on mobile with HTML, CSS or Javascript?

问题: I have a website, full responsive (made with Bootstrap) & available in mobile-apps with Cordova. In mobile, the actions done by user are not really "dynamic" : when u...

问题:

I have a website, full responsive (made with Bootstrap) & available in mobile-apps with Cordova.

In mobile, the actions done by user are not really "dynamic" : when user "click (mobile tap)", user don't see if his action is done. They have to wait the end of the loading time to see if their "click" worked.

What I'm looking for : a dynamic behaviour on each "click", which makes appear for exemple a circle, to show the user that his click worked :

enter image description here In this exemple, a grey shadow appears on the user click.

Any ideas ? Many thanks


回答1:

You can do it by using JavaScript. First, create a loading animation using HTML & CSS and hide it.

After loading the page, select all links and buttons using document.getElementsByTagName() or document.querySelectorAll()

Now create a function to show or hide the loading animation. Then loop through the elements and add click event listener to them.

HTML:

<div id="loading" style="display:none">Loading...Please Wait</div>

JS:

var loading = document.getElementById("loading");
var elements = document.querySelectorAll("a");

function showLoading(){
    loading.style.display = "block";
}

for(var i = 0; i < elements.length; i++){
    elements[i].addEventListener("click",showLoading);
}
  • 发表于 2019-03-20 06:56
  • 阅读 ( 164 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除