前端实践小项目(一)五星好评与暂停取值

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

五星好评（JS版）

五星好评（JQuery版）

暂停取值

五星好评（JS版）

先看效果图

鼠标移动给出几星，移除取消几星。我们先看看拿 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>

然后写入 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>

点击运行，完成了。

五星好评（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>

点击运行，完成了。

暂停取值

先看效果

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

先看 HTML 代码

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

很简单，就一个 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>

最后 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>

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

点击运行，完成效果。

（持续更新中……）

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

前端实践小项目(一)五星好评与暂停取值相关推荐

OpenCV实践小项目(一): 信用卡数字识别
1. 写在前面今天整理一个OpenCV实践的小项目, 前几天整理了一篇OpenCV处理图像的知识笔记,后面,就通过一些小项目把这些知识运用到实践中去,一个是加深理解,另一个是融会贯通,连成整体,因为 ...
【小程序实现五星好评功能】
** 小程序实现五星好评功能 ** ##功能实现如图实现功能如下: <image class="star-img" wx:for='{{list}}' wx:key='in ...
微信小程序开发 - 五星好评
前言由于最近公司前端组开发紧缺人手,公司医美项目比较赶,所以主动请求协助医美小程序开发,现学现用,不过觉得小程序还蛮简单的,在做到一个评价医生页面时,用到点击五星好评,觉得有点用,就分享上来了~ 效 ...
web实践小项目一:简单日程管理系统（涉及html/css，javascript，python，sql，日期处理）...
暑假自学了些html/css,javascript和python,苦于学完无处练手几乎过目即忘...最后在同学的建议下做了个简单日程管理系统.借第一版完成之际,希望能将实践期间犯过的错误和获得的新知进 ...
微信小程序开发——五星好评
准备工作首选需要有两个星星,一个满分星星,一个空心的星星. 代码实现 .wxml文件 <view class="right"><view bindtap=&q ...
OpenCV实践小项目(三) - 停车场车位实时检测
1. 写在前面今天整理OpenCV入门的第三个实战小项目,前面的两篇文章整理了信用卡数字识别以及文档OCR扫描, 大部分用到的是OpenCV里面的基础图像预处理技术,比如轮廓检测,边缘检测,形态学操 ...
OpenCV实践小项目(二) -文档ocr扫描识别
1. 写在前面今天整理OpenCV入门的第二个实战小项目, 前一篇文章是信用卡数字识别, 主要运用了OpenCV基础图像处理操作里面的轮廓检测, 边缘检测,形态学操作, 今天的这个项目叫做文档ocr ...
Web实践小项目（仅供参考）
一.前言这个小东西是web实践课的一个作业,只是要求纯前端,拼凑几个网页即可,故写的较为简陋,我选中的一个小方向是写一个系统的管理的,包括密码修改.操作人员管理.权限管理.人员信息.退出系统等一些列 ...
50行代码实现的艺术签名设计微信小程序,轻松对接公众号,涨粉神器,学习赚钱两不误.微信公众号引流工具.html,python学习小项目.艺术签名设计微信小程序,前端学习小项目有趣的项目
50行代码实现的艺术签名设计微信小程序,轻松对接公众号,涨粉神器,学习赚钱两不误先看效果这个小程序实现艺术签名设计的功能对接到公众号之后,相当于给你的公众号添加了一个功能,别人关注公众号后,可以 ...

前端实践小项目(一)五星好评与暂停取值

五星好评（JS版）

五星好评（JQuery版）

暂停取值

前端实践小项目(一)五星好评与暂停取值相关推荐

最新文章

热门文章