能用js写一个会动的吗
时间: 2023-05-29 18:01:46 浏览: 30
当然可以!以下是一个简单的例子:
HTML:
```
<div id="box"></div>
```
CSS:
```
#box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
```
JS:
```
const box = document.getElementById('box');
let x = 0;
let moveRight = true;
function moveBox() {
if (moveRight) {
x += 5;
if (x >= 400) {
moveRight = false;
}
} else {
x -= 5;
if (x <= 0) {
moveRight = true;
}
}
box.style.left = x + 'px';
window.requestAnimationFrame(moveBox);
}
moveBox();
```
这个例子实现了一个div元素向右移动,到达页面一侧后又向左移动,周而复始。这是通过 setInterval 或 setTimeout 实现的定时器来实现的。但是,这些定时器可能会影响其他JavaScript代码的执行,并可能会引起性能问题。使用 requestAnimationFrame 可以优化代码。
相关问题
用js写一个flash动画
现在的现代浏览器已经不再支持 Flash,因此我不建议您使用 Flash 动画。然而,您可以使用 JavaScript 和 CSS 来创建动画效果。
以下是一个简单的示例,它使用 JavaScript 和 CSS 来创建一个简单的跳动的动画:
HTML 代码:
```html
<div class="box"></div>
```
CSS 代码:
```css
.box {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: jump;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes jump {
0% {
top: 0;
}
100% {
top: 50px;
}
}
```
JavaScript 代码:
```javascript
// 请确保页面加载完毕后再执行
window.onload = function() {
// 获取元素
var box = document.querySelector('.box');
// 添加鼠标移动事件
document.addEventListener('mousemove', function(event) {
// 计算鼠标相对于盒子的位置
var x = event.clientX - box.offsetLeft;
var y = event.clientY - box.offsetTop;
// 设置盒子的位置
box.style.left = x + 'px';
box.style.top = y + 'px';
});
}
```
该示例创建了一个红色的正方形盒子,当鼠标移动时,它会跳动。您可以根据需要修改 CSS 和 JavaScript 代码,以创建自己的动画效果。
js写一个会动的指针时钟
以下是一个基于JavaScript实现的指针时钟动画:
```html
<!DOCTYPE html>
<html>
<head>
<title>指针时钟</title>
<style>
canvas {
background-color: #000;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
// 获取画布和上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 设置画布大小
canvas.width = 400;
canvas.height = 400;
// 设置钟表半径和中心坐标
var radius = canvas.width / 2 - 20;
var x = canvas.width / 2;
var y = canvas.height / 2;
// 绘制钟表外框
function drawClock() {
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);
ctx.strokeStyle = '#fff';
ctx.lineWidth = 5;
ctx.stroke();
ctx.beginPath();
ctx.arc(x, y, 10, 0, 2 * Math.PI);
ctx.fillStyle = '#fff';
ctx.fill();
}
// 绘制时针
function drawHour(hour, minute) {
var angle = (hour * 30 + minute * 0.5) * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineWidth = 7;
ctx.lineCap = 'round';
ctx.lineTo(x + Math.sin(angle) * (radius * 0.5), y - Math.cos(angle) * (radius * 0.5));
ctx.stroke();
}
// 绘制分针
function drawMinute(minute) {
var angle = minute * 6 * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.lineTo(x + Math.sin(angle) * (radius * 0.7), y - Math.cos(angle) * (radius * 0.7));
ctx.stroke();
}
// 绘制秒针
function drawSecond(second) {
var angle = second * 6 * Math.PI / 180;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineWidth = 3;
ctx.lineCap = 'round';
ctx.lineTo(x + Math.sin(angle) * (radius * 0.9), y - Math.cos(angle) * (radius * 0.9));
ctx.strokeStyle = '#f00';
ctx.stroke();
}
// 更新时间并绘制钟表
function draw() {
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawClock();
drawHour(hour, minute);
drawMinute(minute);
drawSecond(second);
requestAnimationFrame(draw);
}
// 开始绘制动画
draw();
</script>
</body>
</html>
```
该代码会绘制一个黑色的背景,白色的钟表圆框和红色的秒针。时针和分针的样式为白色,时针为粗细为7,分针为粗细为5,秒针为粗细为3。秒针每秒会转动一次,分针每分钟会转动一次,时针每小时会转动一次。