淘先锋技术网

首页 1 2 3 4 5 6 7

Javascript是一种非常重要的编程语言,它被广泛应用于 Web 开发和移动应用开发等领域。Javascript 的特点是简洁、灵活、易学易用,同时也具备很强的动态性和互动性。以下是几个 Javascript 常用的实例,它们展示了 Javascript 的灵活和易用性。

// 实例1: 实现日期格式的转换
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = month< 10 ? '0' + month : month;
var day = date.getDate();
day = day< 10 ? '0' + day : day;
var formatDate = year + '-' + month + '-' + day;
console.log(formatDate); // 2021-05-01
// 实例2: 实现获取URL参数值
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
var id = getQueryString('id'); // 获取URL参数id的值
// 实例3: 实现置顶功能的按钮
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var $backToTop = document.getElementById('back-to-top');
if (scrollTop >100) {
$backToTop.style.display = 'block';
} else {
$backToTop.style.display = 'none';
}
};
// HTML代码:置顶

Javascript 可以实现各种复杂的功能,也可以轻松地与 HTML 和 CSS 配合使用。例如,我们可以通过事件来控制 HTML 元素的集体变化。

// 实例4: 实现鼠标悬停时图片的切换
var imgArray = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
var $img = document.getElementById('img');
$img.setAttribute('src', imgArray[0]);
var i = 1;
setInterval(function() {
$img.setAttribute('src', imgArray[i]);
i++;
if (i >= imgArray.length) {
i = 0;
}
}, 2000);
// HTML代码: 
// 实例5: 实现鼠标悬停时显示提示框
var $title = document.getElementById('title');
$title.onmouseover = function() {
var $tip = document.createElement('div');
$tip.setAttribute('class', 'tip');
$tip.innerHTML = '这是一个提示框';
document.body.appendChild($tip);
var titleLeft = $title.offsetLeft;
var titleTop = $title.offsetTop;
$tip.style.left = titleLeft + 'px';
$tip.style.top = (titleTop + 30) + 'px';
};
$title.onmouseout = function() {
var $tip = document.getElementsByClassName('tip')[0];
document.body.removeChild($tip);
};
// HTML代码:

Javascript 实例

// CSS代码: .tip {position:absolute;background-color:#fff;color:#000;padding:5px;border:1px solid #666;}

Javascript 还可以与 Ajax 等技术配合使用,实现异步加载数据、局部刷新等功能。例如,我们可以通过 Ajax 技术向服务器发送请求,获取数据并将其显示在页面上。

// 实例6: 实现异步加载数据并显示
function loadXMLDoc(url, callback) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
callback(xmlhttp.responseText);
}
}
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
loadXMLDoc('http://example.com/data.json', function(response) {
var data = JSON.parse(response);
var $list = document.getElementById('list');
for (var i = 0; i< data.length; i++) {
var item = data[i];
var $li = document.createElement('li');
$li.innerHTML = item.name + ' ' + item.age;
$list.appendChild($li);
}
});
// HTML代码:

    以上实例仅是 Javascript 的冰山一角,Javascript 还有很多强大而又实用的功能。学习 Javascript 可以让我们更好地理解 Web 开发和移动应用开发的原理和流程,同时也可以增强我们的编程能力和思维能力。