HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="css.css">
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div> <button id="DigitalCLOCK" class="clock-btn" onload="showTime()"></div>
<p class="mb1"></p>
<textarea class="ta" name="textarea1" id="" cols="30" rows="30"></textarea>
<textarea name="textarea2" id="" cols="30" rows="30"></textarea>
<textarea name="textarea3" id="" cols="30" rows="30"></textarea>
<!-- ライブラリの読み込み -->
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<!-- JavaScriptを記述する -->
<script>
// 時刻表示
// 今日の日付情報を取得し変数dTodayに格納する
function showTime(){
var date = new Date();
var y = date.getFullYear();
var mo = date.getMonth()+1;
var d = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
if(h == 0){
h = 12;
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = y + "年" + mo + "月" + d + "日" + h + "時" + m + "分" + s + "秒";
document.getElementById("DigitalCLOCK").innerText = time;
document.getElementById("DigitalCLOCK").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
// ClipBoard.js関連
var clipboard = new ClipboardJS('.clock-btn', {
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
var clipboard = new ClipboardJS('.btn', {
target: function() {
return document.querySelector('div');
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
</body>
</html>
CSS
.clock-btn {
width: 500px;
text-align: center;
display: block;
padding: 15px;
text-decoration: none;
color: #fff;
background-color: grey;
border: none;
font-family: 游ゴシック;
font-size: 30px;
border-radius: 5px;
margin: 0 auto;
transition: 1s;
}
.clock-btn:hover {
transition: 0.5s;
background-color: black;
width: 500px;
}
.mb1 {
padding: 10px;
}
.ta {
border: none;
}
.ta:hover {
transition: 10s;
border: 1px solid black;
}