【HTML】長押しで実行されるボタン【震え+長押し】

前置き

この記事を書いている自分はプログラミング歴4年で、プログラミングには自信があります。自分がHTMLを作るとき、使ってみたかった長押しで実行されるボタンの作り方をブログで公開します。

大体の機能は、長押しでJavaScriptのコードが実行されるというようなものです。後は長押ししている間は「震える」という機能が付いています。実際にコードを紹介していきます。

完成形

See the Pen LongPressButton by totokukumumu (@totokukumumu) on CodePen.

HTML

<button id="button">長押しして実行</button>

CSS

#button {
  margin: 0 auto 20px;
  width: 500px;
  height: 50px;
  transition: 2s;
  background: linear-gradient( #333, #333, #fff, #fff);
  background-size: 200px 350%;
  color: white;
}
#button.active {
    animation: hurueru .1s  infinite;
    background-position:0 100%;
/*     animation: time .3s  infinite; */
}
#r {
  text-align: center;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

@keyframes time {
  0% {background-color: #00a}
  100% {background-color: #0aa}
}

JavaScript

let count = 0;
let timer;
const ua = navigator.userAgent.toLowerCase();
const isSP = /iphone|ipod|ipad|android/.test(ua);
const b = document.getElementById('button');
const eventStart = isSP ? 'touchstart' : 'mousedown';
const eventEnd   = isSP ? 'touchend' : 'mouseup';
const eventLeave = isSP ? 'touchmove' : 'mouseleave';
 
b.addEventListener(eventStart, e => {
  e.preventDefault();
  b.classList.add('active');
  timer = setInterval(() => {
    count++;
    if (count == 200) { // 2秒 100 = 1秒
      b.classList.remove('active');
      clearInterval(timer);
      count = 0;
      
      // ここのプログラムが実行されます
      run();
      
    }
  }, 10);
})
 
b.addEventListener(eventEnd, e => {
  e.preventDefault();
  if (count) {
    b.classList.remove('active');
    clearInterval(timer);
    count = 0;
  }
});
 
b.addEventListener(eventLeave, e => {
  e.preventDefault();
  let el;
  el = isSP ? document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY) : b;
  if (!isSP || el !== b) {
    b.classList.remove('active');
    clearInterval(timer);
    count = 0;
  }
});

function run()
{
  
}

最後に

このプログラムを二次配布したりしない限り、自分の名前を書かなくても使って大丈夫です。(できれば自分のブログのサイトを張っていただけると嬉しいです)
記事がいいと思ったら是非拡散お願いします!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です