网页常用js代码

var element = document.getElementById('myElement');

element.innerHTML = '新的内容';

element.addEventListener('click', function() {
    alert('元素被点击了！');
});

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    }
};
xhr.send();

document.querySelector('form').addEventListener('submit', function(event) {
    var input = document.querySelector('#myInput').value;
    if (input === '') {
        event.preventDefault(); // 阻止表单提交
        alert('输入不能为空！');
    }
});

var elem = document.getElementById('animate');
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
    if (pos == 350) {
        clearInterval(id);
    } else {
        pos++;
        elem.style.top = pos + 'px';
        elem.style.left = pos + 'px';
    }
}

window.addEventListener('resize', function() {
    if (window.innerWidth < 600) {
        // 在小屏幕上的操作
    } else {
        // 在大屏幕上的操作
    }
});

// 使用箭头函数
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(number => number * 2);

// 使用Promise处理异步操作
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));