js有趣的代码
时间: 2023-08-25 20:11:35 浏览: 37
以下是一些有趣的 JavaScript 代码:
1. 在控制台上输出彩虹色的字体:
```javascript
console.log("%c彩虹文字", "color: red; font-size: 50px; font-weight: bold; text-shadow: 3px 3px 0 #ff0000, -3px -3px 0 #00ff00, 3px -3px 0 #0000ff, -3px 3px 0 #ffff00");
```
2. 制作一个可拖动的元素:
```javascript
let dragItem = document.querySelector(".item");
let container = document.querySelector(".container");
let active = false;
let currentX;
let currentY;
let initialX;
let initialY;
let xOffset = 0;
let yOffset = 0;
container.addEventListener("mousedown", dragStart);
container.addEventListener("mouseup", dragEnd);
container.addEventListener("mousemove", drag);
function dragStart(e) {
initialX = e.clientX - xOffset;
initialY = e.clientY - yOffset;
if (e.target === dragItem) {
active = true;
}
}
function dragEnd(e) {
initialX = currentX;
initialY = currentY;
active = false;
}
function drag(e) {
if (active) {
e.preventDefault();
currentX = e.clientX - initialX;
currentY = e.clientY - initialY;
xOffset = currentX;
yOffset = currentY;
setTranslate(currentX, currentY, dragItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
```
3. 实现一个随机颜色生成器:
```javascript
function getRandomColor() {
let letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
console.log(getRandomColor());
```
4. 制作一个倒计时器:
```javascript
let countDownDate = new Date("Jan 1, 2022 00:00:00").getTime();
let x = setInterval(function() {
let now = new Date().getTime();
let distance = countDownDate - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s ");
if (distance < 0) {
clearInterval(x);
console.log("Happy New Year!");
}
}, 1000);
```