适合新手学习的JavaScript网页设计案例

最新推荐文章于 2024-10-12 10:41:56 发布
最新推荐文章于 2024-10-12 10:41:56 发布
阅读量599 收藏 18
点赞数 7
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xcc212/article/details/141992529
版权

适合新手学习的JavaScript网页设计案例

1. 基础交互

  • 动态按钮：

   JavaScript代码：

const button = document.getElementById('myButton');

button.addEventListener('mouseover', () => {
    button.style.backgroundColor = 'blue';
});

button.addEventListener('mouseout', () => {
    button.style.backgroundCol   or = 'white';
});

  HTML结构：

<button id="myButton">点击我</button>

  解释：

  • getElementById：通过 ID 获取 DOM 元素。
  • addEventListener：添加事件监听器，当鼠标悬停或移开时触发相应函数。
  • style.backgroundColor：设置元素的背景颜色。

  • 简单动画：

  JavaScript代码：

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

function animate() {
    element.style.transform = 'translateX(200px)';
}

const button = document.getElementById('animateButton');
button.addEventListener('click', animate);

  HTML结构：

<div id="myElement">这是一个可移动的元素</div>
<button id="animateButton">点击动画</button>

  解释：

  • transform: translateX(200px)：将元素向右移动 200 像素。

  • 动态显示时间：

  JavaScript代码：

function showTime() {
    const now = new Date();
    const timeString = now.toLocaleTimeString();
    document.getElementById('clock').textContent = timeString;
}

setInter   val(showTime, 1000);

  HTML结构：

<div id="clock"></div>

 解释：

  • Date()：创建一个日期对象。
  • toLocaleTimeString()：将日期对象转换为本地时间字符串。
  • textContent：设置元素的文本内容。

2. 表单与数据处理

  • 表单验证：

    JavaScript代码：

    const emailInput = document.getElementById('email');
const submitButton = document.getElementById('submit');

submitButton.addEventListener   ('click', () => {
    const email = emailInput.value;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('请输入正确的邮箱地址');
    }
});

      HTML结构：

<input type="email" id="email">
<button id="submit">提交</button>

  • 简单抽奖：

    JavaScript代码：

    const button = document.getElementById('draw');
const result = document.getElementById('result');

button.addEventListener('click', () => {
    const randomNum = Math.floor(Math.random() * 100) + 1;
    result.textContent = `恭喜您，抽中的号码是：${randomNum}`;
});

        HTML结构：

<button id="draw">抽奖</button>
<div id="result"></div>

  • 留言板：

    JavaScript代码：

    const messageInput = document.getElementById('message');
const messageList = document.getElementById('message-list');

messageInput.addEventListener('submit', (event) => {
    event.preventDefault();
    const message = messageInput.value;
    const li = document.createElement('li');
    li.textContent = message;
    messageList.appendChild(li);
    // 使用 localStorage 保存留言，以便刷新页面后仍能显示
    const messages = JSON.parse(localStorage.getItem('messages')) || [];
    messages.push(message);
    localStorage.setItem('messages', JSON.stringify(messages));
    mes   sageInput.value = '';
});

       HTML结构：

<input type="text" id="message">
<button type="submit">提交</button>
<ul id="message-list"></ul>

    解释：

  • localStorage：浏览器提供的本地存储，用于保存数据。
  • JSON.parse：将字符串解析为 JSON 对象。
  • JSON.stringify：将 JavaScript 对象转换为 JSON 字符串。

3. 响应式设计与布局

  • 响应式布局：

    JavaScript代码：

    const mediaQuery = window.matchMedia('(max-width: 768px)');

mediaQuery.addEventListener('change', () => {
    if (mediaQuery.matches) {
        // 手机屏幕样式
        document.body.classList.add('mobile');
    } else {
        // 桌面屏幕样式
        document.body.classList.remove('mobile');
    }
});

        HTML结构：

<body>
    <style>
        .mobile {
            /* 手机屏幕样式 */
        }
    </style>
</body>

      

  • 轮播图：

    JavaScript代码：

    const images = document.querySelectorAll('.slider-image');
let currentIndex = 0;

function showImage(index) {
  images.forEach((image, i) => {
    image.style.display = i === index ? 'block' : 'none';
  });
}

// 自动切换
setInterval(() => {
  currentIndex = (currentIndex + 1) % images.length;
  showImage(currentIndex);
}, 3000);

         HTML结构：

<div class="slider">
    <img class="slider-image" src="image1.jpg">
    <img class="slider-image" src="image2.jpg">
    </div>

4. 搜索与过滤

  • 简单搜索：

    JavaScript代码：

    const searchInput = document.getElementById('search');
const items = document.querySelectorAll('.item');

searchInput.addEventListener('input', () => {
    const searchTerm = searchInput.value.toLowerCase();
    items.forEach(item => {
        if (item.textContent.toLowerCase().includes(searchTerm)) {
            item.style.display = 'block';
        } else {
            item.style.display = 'none';
        }
    });
});

        HTML结构：

<input type="text" id="search">
<ul>
    <li class="item">搜索结果1</li>
    <li class="item">搜索结果2</li>
    </ul>

 

xcc212
关注
【网页设计期末大作业源代码】使用HTML5+CSS3+JavaScript十分钟快速制作一个简约大气设计类静态网站|自适应响应式|自制超简单的美术公司网页|直接可以修改使用|适合新手超友好易上手新手必
南北极之间
06-15 1211
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。【网页设计期末大作业源代码】使用HTML5+CSS3+JavaScript十分钟快速制作一个简约大气美术设计静态网站|自制超简单的美术类网页，响应式自适应新手友。
【网页设计期末大作业源代码】使用HTML5+CSS3+JavaScript十分钟快速制作一个简约大气乡村旅游静态网站|自适应响应式|自制超简单的文旅类网页|直接可以修改使用|适合新手超友好易上手新手必
南北极之间
06-12 1329
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
（入门篇）JavaScript 网页设计案例浅析-简单的交互式图片轮播
做一个道者
09-08 1116
通过这个简单的 JavaScript 案例，你可以看到网页设计中如何结合 HTML、CSS 和 JavaScript 来实现互动效果。JavaScript 的事件处理和 DOM 操作是前端开发的基础技能，而通过不断练习和扩展这些基础案例，你会逐渐掌握更多复杂的功能和技巧。如果你是前端开发的新手，建议从这种小案例开始，通过一步步的实践，逐渐加深对 JavaScript 的理解。希望今天的分享对你有所帮助，下一次我们可以一起探索更有趣的网页设计功能！
基于HTML+CSS+JavaScript制作简单的大学生网页设计——我的家乡湖南
VX_WJ88950106的博客
08-11 4485
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
【网页设计期末大作业源代码】使用HTML5+CSS3+JavaScript十分钟快速制作一个简约大气美食类静态网站|自适应响应式|自制超简单的美食食谱网页|直接可以修改使用|适合新手超友好易上手新手必
南北极之间
06-13 1049
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
计算机毕业设计 HTML+CSS+JavaScript 云南美食网页设计 美食网页介绍代码
VX_WJ88950106的博客
08-15 9119
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑等任意html编辑软件进行运行及修改编辑等操作）。3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。......
web前端 html+css+javascript 绿色的随行旅游网页设计实例 企业网站制作
qq_365392777
06-24 1056
🏀 精彩专栏推荐👇🏻👇🏻👇🏻 💝 【作者主页——🔥获取更多优质源码】 💝 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】🚀 旅游景点介绍、旅游风景区、家乡介绍、等网站的设计与制作。旅游景点介绍、旅游风景区是一个介绍简介、行政区划、地理环境、自然环境、教育事业、体育事业、旅游景点、城市荣誉等等。网站集中主要展示了的地方风土人情，并通过访客留言，增加游客的互动体验。同时，地方旅游网站里的每一个网页都采用了统一的设计风格，以加强城市整体面貌统一的宣传效果。最重要的
适合 JS 新手学习的开源项目——在 GitHub 学编程
HelloGitHub 的博客
12-04 2万+
作者：HelloGitHub-小鱼干 这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇，系列文章： C++ 篇 Python 篇 Go 篇 Java 篇 JavaScript 篇 Java 篇中老荀说到当今互联网份额最大的编程语言是 Java，作为后辈我对此话是没有异议的。但，要说到国内互联网最火、最热闹的编程语言是什么？应该没人对 JavaScript 当选有异议吧。相对 C++、Java 这些老前辈，JS 可谓门槛之低，连 Python 都自叹不如。那作为一个.
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
热门推荐
HTML网页设计 专注大学生网页设计
10-16 6万+
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
网页设计案例.rar
06-09
在这个“网页设计案例.rar”压缩包中，我们有四个使用HTML和CSS构建的简单页面示例，这对于初学者来说是一个很好的学习资源。本文将深入探讨HTML和CSS的基础知识，以及如何在Windows 10环境下使用开发工具...
【JAVA开源】基于Vue和SpringBoot的高校学科竞赛平台
杨荧的CSDN博客
10-10 1381
教师功能有个人中心，题目类型管理，竞赛题库管理，竞赛类型管理，竞赛信息管理，报名信息管理，竞赛评分管理，参赛名单管理，晋级名单管理，获奖名单管理，竞赛总结管理，报销清单管理，成绩申诉管理，参赛信息管理，参赛信息管理，往年成绩管理，获奖情况管理。
解释器、预处理、main函数
编程语言技巧经验分享
10-07 1250
解释器覆盖范围很广，不管是解释语言的运行时解释翻译器，还是操作系统自带脚本的解释器。
javascript中==和===有什么不同
qq_48763502的博客
10-09 414
这个运算符用于比较两个值是否相等，但会在必要时进行类型转换。当两个值的类型不同，JavaScript 会尝试将它们转换为相同的类型，然后再进行比较。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1051
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
解决IE中a标签中的图片有边框
weixin_41674235的博客
10-08 206
‌1、通过CSS去除边框‌：在CSS中为img标签添加border:0 none;样式，例如：img{border:0 none;这种方法适用于大多数现代浏览器‌12。3‌、通过JavaScript去除点击后的虚线框‌：在a标签中添加outline:none;和text-decoration:none;这可以同时去除点击后的虚线框和下划线‌。
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
最新发布
Mr. Zhang Xiaojian's Blog
10-12 289
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
探秘纯前端Excel表格：构建现金流量表的完整指南
葡萄城技术团队博客
10-10 1054
现金流量表（Cash Flow Statement），是指反映企业在一定会计期间现金和现金等价物流入和流出的报表。现金流量表是企业财务报表的三个基本报告之一（另外两个是资产负债表和损益表）。为了全面系统地揭示企业一定时期的财务状况、经营成果和现金流量，财务报表需按财政部会计准则的标准格式设计，因此，财务报表的典型特征是数据更新频繁、分析维度多、数据来源复杂，常规的报表工具很难同时满足上述所有需求本博客将带大家了解如何使用类Excel 的 JavaScript 电子表格在前端创建现金流日历。。
新手必看JavaScript验证小特例教程
在描述中提到的“JavaScript的一个小例子，很简单的 新手必看 总有收获”，指的是这个实例可能涉及到一些基础的语法和简单的代码逻辑，非常适合刚接触JavaScript编程的人员进行学习。这个小例子将展示如何使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值