asp建网站,肇庆市住房和城乡建设局网站,建设项目咨询公司网站,搬家网站建设思路JavaScript 网页设计案例
1. 动态时钟
功能描述#xff1a;在网页上显示一个动态更新的时钟#xff0c;包括小时、分钟和秒。实现思路#xff1a; 使用 setInterval 函数每秒更新时间。获取当前时间并更新页面上的文本。 代码示例#xff1a;div idclock…JavaScript 网页设计案例
1. 动态时钟
功能描述在网页上显示一个动态更新的时钟包括小时、分钟和秒。实现思路 使用 setInterval 函数每秒更新时间。获取当前时间并更新页面上的文本。 代码示例div idclock/div
scriptfunction updateClock() {const now new Date();const hours now.getHours().toString().padStart(2, 0);const minutes now.getMinutes().toString().padStart(2, 0);const seconds now.getSeconds().toString().padStart(2, 0);document.getElementById(clock).textContent ${hours}:${minutes}:${seconds};}setInterval(updateClock, 1000);updateClock(); // 初始化时立即更新一次
/script2. 菜单切换效果
功能描述点击菜单项时显示或隐藏相应的内容区域。实现思路 使用事件监听器监听点击事件。根据点击的菜单项显示或隐藏相应的内容。 代码示例ul idmenuli onclickshowContent(home)首页/lili onclickshowContent(about)关于我们/lili onclickshowContent(contact)联系我们/li
/ul
div idcontentdiv idhome classcontent-item欢迎来到首页/divdiv idabout classcontent-item styledisplay: none;关于我们的一些信息。/divdiv idcontact classcontent-item styledisplay: none;联系方式和地址。/div
/div
scriptfunction showContent(id) {const contentItems document.querySelectorAll(.content-item);contentItems.forEach(item item.style.display none);document.getElementById(id).style.display block;}
/script3. 表单验证
功能描述在用户提交表单前进行简单的输入验证。实现思路 使用 addEventListener 监听表单的提交事件。检查输入是否符合要求如非空、邮箱格式等。 代码示例form idmyFormlabel forname姓名:/labelinput typetext idname requiredbrlabel foremail邮箱:/labelinput typeemail idemail requiredbrbutton typesubmit提交/button
/form
scriptdocument.getElementById(myForm).addEventListener(submit, function(event) {event.preventDefault(); // 阻止表单默认提交行为const name document.getElementById(name).value;const email document.getElementById(email).value;if (name || email ) {alert(姓名和邮箱不能为空);return;}if (!email.includes()) {alert(请输入有效的邮箱地址);return;}alert(表单提交成功);this.submit(); // 提交表单});
/script4. 图片轮播
功能描述在网页上实现图片轮播效果。实现思路 使用 setInterval 定时切换图片。使用 CSS 控制图片的显示和隐藏。 代码示例div idcarouselimg srcimage1.jpg classcarousel-image styledisplay: block;img srcimage2.jpg classcarousel-image styledisplay: none;img srcimage3.jpg classcarousel-image styledisplay: none;
/div
scriptlet currentIndex 0;const images document.querySelectorAll(.carousel-image);function showNextImage() {images[currentIndex].style.display none;currentIndex (currentIndex 1) % images.length;images[currentIndex].style.display block;}setInterval(showNextImage, 3000); // 每3秒切换一次图片
/script5. 模态框Modal
功能描述点击按钮后弹出一个模态框模态框内可以显示内容或表单。实现思路 使用 CSS 控制模态框的显示和隐藏。使用 JavaScript 监听按钮点击事件显示或隐藏模态框。 代码示例button idopenModal打开模态框/button
div idmodal classmodaldiv classmodal-contentspan classclosetimes;/spanp这是一个模态框/p/div
/divstyle.modal {display: none;position: fixed;z-index: 1;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgba(0,0,0,0.4);}.modal-content {background-color: #fefefe;margin: 15% auto;padding: 20px;border: 1px solid #888;width: 80%;}.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}.close:hover,.close:focus {color: black;text-decoration: none;cursor: pointer;}
/stylescriptconst modal document.getElementById(modal);const openModalBtn document.getElementById(openModal);const closeModalBtn document.querySelector(.close);openModalBtn.addEventListener(click, () {modal.style.display block;});closeModalBtn.addEventListener(click, () {modal.style.display none;});window.addEventListener(click, (event) {if (event.target modal) {modal.style.display none;}});
/script6. 滚动加载更多
功能描述当用户滚动到页面底部时自动加载更多内容。实现思路 使用 IntersectionObserver API 监听元素是否进入视口。当元素进入视口时加载更多内容。 代码示例div idcontentdiv classitem内容1/divdiv classitem内容2/divdiv classitem内容3/divdiv idload-more classload-more加载更多/div
/divstyle.item {height: 200px;border: 1px solid #ccc;margin: 10px 0;}
/stylescriptconst loadMore document.getElementById(load-more);const observer new IntersectionObserver((entries) {entries.forEach(entry {if (entry.isIntersecting) {loadMoreContent();}});}, { threshold: 0.1 });observer.observe(loadMore);function loadMoreContent() {const content document.getElementById(content);for (let i 0; i 3; i) {const newItem document.createElement(div);newItem.className item;newItem.textContent 新内容${i 1};content.appendChild(newItem);}}
/script7. 拖放排序
功能描述允许用户通过拖放操作对列表项进行排序。实现思路 使用 dragstart、dragover 和 drop 事件处理拖放操作。在 drop 事件中更新列表项的顺序。 代码示例ul idsortable-listli draggabletrue项目1/lili draggabletrue项目2/lili draggabletrue项目3/li
/ulstyleul {list-style-type: none;padding: 0;}li {background-color: #f1f1f1;margin: 5px 0;padding: 10px;cursor: move;}
/stylescriptconst sortableList document.getElementById(sortable-list);const items sortableList.querySelectorAll(li);items.forEach(item {item.addEventListener(dragstart, dragStart);item.addEventListener(dragover, dragOver);item.addEventListener(drop, drop);});function dragStart(e) {e.dataTransfer.setData(text/plain, e.target.id);setTimeout(() {e.target.classList.add(hide);}, 0);}function dragOver(e) {e.preventDefault();e.target.classList.add(over);}function drop(e) {e.preventDefault();const draggedItem document.getElementById(e.dataTransfer.getData(text/plain));const dropItem e.target.closest(li);const parent dropItem.parentNode;if (dropItem.classList.contains(over)) {parent.insertBefore(draggedItem, dropItem);} else {parent.appendChild(draggedItem);}items.forEach(item {item.classList.remove(over, hide);});}
/script8. 实时搜索过滤
功能描述在用户输入搜索关键词时实时过滤列表中的项目。实现思路 使用 input 事件监听搜索框的输入变化。根据输入的关键词过滤列表项并更新显示。 代码示例input typetext idsearch placeholder搜索...
ul idlistli苹果/lili香蕉/lili橙子/lili葡萄/lili西瓜/li
/ulscriptconst searchInput document.getElementById(search);const list document.getElementById(list);const items list.querySelectorAll(li);searchInput.addEventListener(input, filterList);function filterList() {const filterValue searchInput.value.toLowerCase();items.forEach(item {if (item.textContent.toLowerCase().includes(filterValue)) {item.style.display block;} else {item.style.display none;}});}
/script所有的现代前端框架不管是数据驱动还是事件驱动底层都是基于原生的html和javascript进行封装和管理所以了解最底层的原理很重要。
