随机运动小球 - html
目的是为了训练眼球运动
直接将如下代码到保存为html文件打开即可
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机运动小球</title>
<style>
body {
background-color: black;
margin: 0;
height: 100vh;
width: 100vw;
overflow: hidden;
}
</style>
</head>
<body >
<svg id="mySVG" height="200" width="200">
<circle id="myCircle1" cx="50" cy="50" r="40" fill="#27202075" />
<circle id="myCircle" cx="50" cy="50" r="40" fill="#27202075" />
<text id="myCircle1Text" x="50" y="55" font-size="20px" text-anchor="middle" fill="pink">·</text>
<text id="myCircleText" x="50" y="55" font-size="20px" text-anchor="middle" fill="pink">·</text>
</svg>
<script>
var svg = document.getElementById('mySVG');
var circle = document.getElementById('myCircle');
var circle1 = document.getElementById('myCircle1');
var text = document.getElementById('myCircleText');
var text1 = document.getElementById('myCircle1Text');
// Function to get random number up to max
var random = function(max) {
return Math.floor(Math.random() * max);
}
// Set svg and circle size
svg.setAttribute('width', window.innerWidth - 50);
svg.setAttribute('height', window.innerHeight - 50);
// Animate the circle to a new position, and repeat
var animate = function() {
let width = random(window.innerWidth - 100)
let height = random(window.innerHeight - 100)
circle.setAttribute('cx', width);
circle.setAttribute('cy', height);
let time = random(5) + 1
// Apply a random duration for the next animation
circle.style.transitionDuration = (time) + 's';
setTimeout(animate, (time) * 1000);
text.setAttribute('x', width);
text.setAttribute('y', height + 5);
text.style.transitionDuration = (time) + 's';
}
// Animate the circle to a new position, and repeat
var animate1 = function() {
let width = random(window.innerWidth - 100)
let height = random(window.innerHeight - 100)
circle1.setAttribute('cx', width);
circle1.setAttribute('cy', height);
// Apply a random duration for the next animation
let time1 = random(5) + 1
circle1.style.transitionDuration = (time1) + 's';
text1.setAttribute('x', width);
text1.setAttribute('y', height + 5);
text1.style.transitionDuration = (time1) + 's';
setTimeout(animate1, (time1) * 1000);
}
// Start the animation
animate();
animate1();
</script>
</body>
</html>
