前端实践小项目

简介: 哈喽 ~ 大家好鸭!这篇我们来看看前端实践小项目第一篇 “五星好评与暂停取值”(底部有源代码)

 哈喽 ~ 大家好鸭!这篇我们来看看前端实践小项目第一篇 “五星好评与暂停取值”(底部有源代码)



五星好评(JS版)

先看效果图

1.gif

鼠标移动给出几星,移除取消几星。我们先看看拿 JS 是怎样的。

先写html,☆(白星)与★(黑心)可以去 word 里面打出来 在插入 --> 符号 那一栏里面。

<table align="center">
    <tr>
        <td id="1">☆</td>
        <td id="2">☆</td>
        <td id="3">☆</td>
        <td id="4">☆</td>
        <td id="5">☆</td>
    </tr>
</table>

image.gif

然后写入 JS 代码

<script type="text/javascript">
    var tds = document.getElementsByTagName("td");
    for (var i = 0; i < tds.length; i++) {
        tds[i].style.cursor = "pointer";
        tds[i].onmouseover = function () {
            var index = this.id;
            for (var i = 0; i < index; i++) {
                tds[i].innerHTML = "★";
            }
            for (var j = tds.length; j > index; j--) {
                tds[i].innerHTML = "☆";
            }
        }
    }
</script>

image.gif

点击运行,完成了。


五星好评(JQuery版)

我们在来看看 JQuery 代码

<script src="jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var tds = $("td");
    tds.each(function () {
        $(this).css("cursor", "pointer");
        $(this).mouseover(function () {
            var index = $(this).attr("id");
            for (var i = 0; i < index; i++) {
                $(tds[i]).html("★");
            }
            for (var j = tds.length; j > index; j--) {
                $(tds[i]).html("☆");
            }
        })
    })
</script>

image.gif

点击运行,完成了。


暂停取值

先看效果

2.gif

我们一个 div 装跳转文字,有两个按钮,一个隐藏另一个显示,两个按钮互相互斥。

先看 HTML 代码

<div align="center">
    <div id="box">
        今天吃什么?
    </div>
    <br>
    <input type="button" value="开始" id="start"/>
    <input type="button" value="结束" id="stop"/>
</div>

image.gif

很简单,就一个 div 两按钮,我们在来点 CSS 美化一下

<style type="text/css">
        #box{
            border: 1px solid #cccccc;
            width: 300px;
            height: 300px;
            text-align: center;
            line-height: 300px;
            font-size: 50px;
        }
    </style>

image.gif

最后 JS 代码实现功能

<script type="text/javascript">
    var arr = ["烧烤","干锅煎肉饭","米粉","蜜雪冰城","鸡公煲","水饺","关东煮","炒饭","水果","牛肉汤","金针菇","凉皮","炸鸡","肉片","拌面","螺蛳粉","烤鸭","汉堡","黑鸭","无骨鱼","面包","花甲鸡","花雕醉鸡","黄焖鸡","手抓饼","日料","麻辣烫","纸包鸡","啵啵鱼","煲仔饭","猪脚饭","鸡腿","饺子","鸡排","烧鸭","烤冷面"];
    var box = document.getElementById("box");
    var start = document.getElementById("start");
    var stop = document.getElementById("stop");
    var index = 0;
    var timerId = null;
    stop.style.display = 'none';
    start.onclick = function () {
        timerId = setInterval(function () {
            box.innerText = arr[index];
            index++;
            if (index > arr.length - 1){
                index = 0;
            }
        },50);
        stop.style.display = 'block';
        start.style.display = 'none';
    }
    stop.onclick = function () {
        clearInterval(timerId);
        start.style.display = 'block';
        stop.style.display = 'none';
    }
</script>

image.gif

我们这里有一个数组 “arr” 如果 换内容的话可以之间在里面修改,或者可以在里面添加图片。

点击运行,完成效果。


源代码:https://gitee.com/a-programmer-named-zhui/front-end-project.git

目录
打赏
0
0
0
0
13
分享
相关文章
利用代码分割优化前端性能:策略与实践
在现代Web开发中,代码分割是提升页面加载性能的有效手段。本文介绍代码分割的概念、重要性及其实现策略,包括动态导入、路由分割等方法,并探讨在React、Vue、Angular等前端框架中的具体应用。
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
211 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
探索无界:前端开发中的响应式设计深度实践与思考###
本文将带你领略响应式设计的精髓,一种超越传统页面布局限制的设计策略,它要求开发者以灵活多变的思维,打造能够无缝适应各种设备与屏幕尺寸的Web体验。通过深入浅出的讲解、实际案例分析以及技术实现细节的探讨,本文目的是激发读者对于响应式设计深层次的理解与兴趣,鼓励在实际应用中不断创新与优化。 ###
80 10
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
190 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
35 1
探索无界:前端开发中的响应式设计深度解析与实践####
【10月更文挑战第29天】 本文深入探讨了响应式设计的核心理念,即通过灵活的布局、媒体查询及弹性图片等技术手段,使网站能够在不同设备上提供一致且优质的用户体验。不同于传统摘要概述,本文将以一次具体项目实践为引,逐步剖析响应式设计的关键技术点,分享实战经验与避坑指南,旨在为前端开发者提供一套实用的响应式设计方法论。 ####
74 4
揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
47 2
探索无界:前端开发中的响应式设计哲学与实践####
本文不拘泥于传统摘要的框架,而是以一种对话的方式,引领读者踏入响应式设计的奇妙世界。想象一下,互联网如同一片浩瀚的海洋,而网页则是航行其中的船只。在这片不断变化的海域中,如何让我们的“船只”既稳固又灵活地适应各种屏幕尺寸和设备?这正是响应式设计的魅力所在。通过深入浅出的探讨,我们将一同揭开它背后的哲学思想与实战技巧,让你的网页在任何设备上都能展现出最佳姿态。 ####
33 0
现代前端框架中的响应式编程实践
现代前端框架中的响应式编程实践
43 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等