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 开发和移动应用开发的原理和流程,同时也可以增强我们的编程能力和思维能力。