js有趣的代码

JavaScript 是一种非常有趣和强大的编程语言，你可以用它来创建各种有趣的效果和应用。以下是一些有趣的 JavaScript 代码示例：

1. 随机颜色生成器

javascript复制代码
function getRandomColor() {  
    var letters = '0123456789ABCDEF';  
    var color = '#';  
    for (var i = 0; i < 6; i++) {  
        color += letters[Math.floor(Math.random() * 16)];  
    }  
    return color;  
}  
  
console.log(getRandomColor());

这段代码会生成一个随机的十六进制颜色代码。每次运行都会得到不同的颜色。

2. 数字猜谜游戏

javascript复制代码
var numberToGuess = Math.floor(Math.random() * 100) + 1;  
var guess;  
var numGuesses = 0;  
  
while (guess !== numberToGuess) {  
    guess = prompt('猜一个 1 到 100 之间的数字:');  
    numGuesses++;  
    if (guess < numberToGuess) {  
        alert('猜小了!');  
    } else if (guess > numberToGuess) {  
        alert('猜大了!');  
    }  
}  
  
alert('恭喜你，你猜对了！你总共猜了 ' + numGuesses + ' 次。');

这是一个简单的数字猜谜游戏。计算机会随机选择一个 1 到 100 之间的数字，然后让用户猜。如果用户猜的数字小于或大于正确答案，计算机会给出相应的提示，直到用户猜对为止。

3. 打字效果

javascript复制代码
function typeWriter(text, i = 0, speed = 100) {  
    if (i < text.length) {  
        document.body.innerHTML += text.charAt(i);  
        setTimeout(() => {  
            typeWriter(text, i + 1, speed);  
        }, speed);  
    }  
}  
  
typeWriter('Hello, world!');

这段代码会模拟打字机的效果，逐步在网页上显示文本。你可以通过修改 speed 参数来调整打字的速度。

当然，JavaScript 的有趣之处远不止于此。以下是一些更多有趣的代码示例：

4. 动态钟表

javascript复制代码
function updateClock() {  
    var now = new Date();  
    var hours = now.getHours();  
    var minutes = now.getMinutes();  
    var seconds = now.getSeconds();  
      
    hours = hours < 10 ? "0" + hours : hours;  
    minutes = minutes < 10 ? "0" + minutes : minutes;  
    seconds = seconds < 10 ? "0" + seconds : seconds;  
      
    var time = hours + ":" + minutes + ":" + seconds;  
    document.getElementById("clock").innerText = time;  
}  
  
setInterval(updateClock, 1000);

这段代码会在页面上显示一个动态更新的时钟。它每秒调用一次 updateClock 函数来更新显示的时间。

5. 彩虹文字效果

javascript复制代码
function createRainbowText(text) {  
    var span = document.createElement('span');  
    span.style.color = 'rainbow';  
    span.style.backgroundImage = 'linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet)';  
    span.style.backgroundClip = 'text';  
    span.style.color = 'transparent';  
    span.style.fontSize = '24px';  
    span.innerText = text;  
    document.body.appendChild(span);  
}  
  
createRainbowText('Hello, rainbow!');

这段代码创建了一个带有彩虹效果的文本。它使用了 CSS 的 backgroundImage 和 backgroundClip 属性来实现文本颜色的渐变效果。

6. 无限滚动页面

javascript复制代码
window.onscroll = function() {  
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {  
        var p = document.createElement('p');  
        p.innerText = '这是自动添加的新段落！';  
        document.body.appendChild(p);  
    }  
};

这段代码会在用户滚动到页面底部时自动添加新的段落。这可以作为一个简单的无限滚动页面的示例。

7. 简单的绘图应用

javascript复制代码
var canvas = document.getElementById('myCanvas');  
var ctx = canvas.getContext('2d');  
  
document.onmousedown = function(e) {  
    ctx.beginPath();  
    ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);  
    document.onmousemove = function(e) {  
        ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);  
        ctx.stroke();  
    };  
    document.onmouseup = function() {  
        document.onmousemove = null;  
    };  
};

这段代码创建了一个简单的绘图应用。用户可以通过在画布上点击并拖动鼠标来绘制线条。

这些示例只是 JavaScript 功能的冰山一角。通过学习和实践，你可以使用 JavaScript 创建各种复杂和有趣的应用和网站功能。