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