Edited at

カウントボタンのhtml、CSS、Javascriptのメモ

More than 1 year has passed since last update.


index.html

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Count</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="btn">0</div>
<script src="js/main.js"></script>
</body>


main.js

(function() {

var btn = document.getElementById('btn');
var n = 0;
btn.addEventListener('click', function() {
n++;
this.textContent = n;
});
btn.addEventListener('mousedown', function() {
this.className = 'pushed';
});
btn.addEventListener('click', function() {
this.className = '';
});
})();


styles.css

@charset "UTF-8";

#btn {
/* 中央ぞろえ 上からマージン30px */
margin: 30px auto 0;
width: 100px;
height: 100px;
border-radius: 50%;
background: #ef454a;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 42px;
font-weight: bold;
cursor: pointer;
opacity: 0.9;
box-shadow: 0 10px 0 #d1483e;
border: 3px solid #d1483e;
/* 連打した時にテキストが選択されるのを防ぐ*/
user-select: none;
}

#btn:hover {
opacity: 1;
}

/* クリックした時の動き。6px下へ。30px+6px。*/
#btn.pushed {
margin-top: 36px;
box-shadow: 0 4px 0 #d1483e;
}


結果