fidget spinner online (1)

📌 相关文章

📜 fidget spinner online (1)

📅 最后修改于: 2023-12-03 14:41:11.307000 🧑 作者: Mango

程序员必备玩具: Fidget Spinner Online

Fidget Spinner Online是一个在线的网页版陀螺玩具，它不仅能够帮助你放松压力和焦虑，还能够恢复注意力和集中力。作为一名程序员，你肯定会经常遇到代码调试的瓶颈，或者工作压力大导致注意力难以稳定等问题。Fidget Spinner Online可以帮助你更好地应对这些问题，同时也可以增加工作乐趣。

功能介绍：

Fidget Spinner Online可以用鼠标或手指控制，通过转动陀螺的方式进行放松。你可以调整旋转速度和旋转时间，以适应不同的心理需求。
Fidget Spinner Online支持数据记录，它可以记录你的每一次使用情况，包括旋转时间、速度、次数等信息。这些数据可以帮助你更好地了解自己的工作习惯和心理状态。
Fidget Spinner Online用户界面简洁清晰，同时也支持个性化定制。你可以更改陀螺的颜色和样式，以及背景图片。

代码示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fidget Spinner Online</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="spinner"></div>
    <div id="controls"></div>
    <script src="app.js"></script>
</body>
</html>

body {
    background-image: url('bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    padding: 0;
}

#spinner {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 50px auto;
    background-color: #ffffff;
    position: relative;
    border: 5px solid #000000;
    box-sizing: border-box;
}

#controls {
    text-align: center;
    margin-top: 50px;
    font-size: 20px;
}

#controls input[type="range"] {
    width: 250px;
    background: #f5f5f5;
    height: 15px;
    border-radius: 15px;
    margin: 10px;
}

#controls button {
    background-color: #ffffff;
    color: #000000;
    border-radius: 10px;
    padding: 5px 10px;
    border: none;
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
}

let spinner = document.getElementById('spinner');
let controls = document.getElementById('controls');

let speedRange = document.createElement('input');
speedRange.type = 'range';
speedRange.min = 1;
speedRange.max = 10;
speedRange.step = 1;
speedRange.value = 5;

let timeRange = document.createElement('input');
timeRange.type = 'range';
timeRange.min = 1;
timeRange.max = 10;
timeRange.step = 1;
timeRange.value = 5;

let startButton = document.createElement('button');
startButton.innerText = 'Start';

let stopButton = document.createElement('button');
stopButton.innerText = 'Stop';

let speedText = document.createElement('p');
speedText.innerText = `Speed: ${speedRange.value}`;

let timeText = document.createElement('p');
timeText.innerText = `Time: ${timeRange.value} seconds`;

speedRange.addEventListener('input', (event) => {
    speedText.innerText = `Speed: ${event.target.value}`;
});

timeRange.addEventListener('input', (event) => {
    timeText.innerText = `Time: ${event.target.value} seconds`;
});

let spinnerObj = new Spinner(spinner, {
    speed: speedRange.value,
    time: timeRange.value,
});

startButton.addEventListener('click', () => {
    spinnerObj.start();
});

stopButton.addEventListener('click', () => {
    spinnerObj.stop();
});

controls.appendChild(speedRange);
controls.appendChild(speedText);
controls.appendChild(timeRange);
controls.appendChild(timeText);
controls.appendChild(startButton);
controls.appendChild(stopButton);

结论

Fidget Spinner Online不仅能帮助你放松和恢复注意力，而且也展示出前端技术的精髓。如需更多信息，可以访问 https://spinneronline.com/ 。