62 lines
1.7 KiB
HTML
62 lines
1.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-hans">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport"
|
|
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
|
|
|
|
<title>魔碑</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
img {
|
|
/* max-height: 80%; */
|
|
/* height: auto; */
|
|
width: 400px;
|
|
/* flex-grow: 1; */
|
|
transition: transform 0.05s ease-in-out;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>当大家想魔子了，就回来肘一下</h1>
|
|
<img src="/img" alt="" id="img">
|
|
<h2>肘击次数:</h2>
|
|
<h3 id="counter"></h3>
|
|
<script>
|
|
function count() {
|
|
fetch('/c').then(response => response.text()).then(data => {
|
|
var counter = document.getElementById('counter');
|
|
counter.innerHTML = data;
|
|
})
|
|
}
|
|
function add(){
|
|
fetch('/a').then(response => response.text()).then(data => {
|
|
var counter = document.getElementById('counter');
|
|
counter.innerHTML = data;
|
|
})
|
|
}
|
|
count()
|
|
//初始化数据
|
|
var image = document.getElementById('img');
|
|
image.addEventListener('click', () => {
|
|
add()
|
|
image.style.transform = image.style.transform === 'scale(1.3)' ? 'scale(1)' : 'scale(1.3)';
|
|
setTimeout(() => {
|
|
image.style.transform = 'scale(1)';
|
|
}, 50);
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
|
|
</html> |