web前端必学功法之一:五星好评
web前端必学功法之一:五星好评
案例效果:
<!--思路分析:1.设置鼠标样式,当鼠标放到星星上时,修改鼠标的样式2.定义元素:通过表格的td元素来存放星星3.绑定事件:绑定每一个星星的鼠标悬停事件4.判断悬停位置:鼠标所在位置的左侧(包含当前位置),设置为选中,右侧设置为不选中实现步骤:1.定义tab标签与对应的tr,td元素,用来设置星星的位置2.得到所有的td元素3.遍历td元素4.设置每一个td的鼠标悬停事件5.得到当前鼠标所在td的位置7.设置当前鼠标位置左侧的td值为黑色星星,右侧值为空白星星--><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>
<script>//得到所有的td元素var tds = document.getElementsByTagName("td");//遍历td对象for( var i =0;i<tds.length;i++){//设置鼠标样式tds[i].style.cursor = "pointer";//给每个td绑定鼠标悬停事件tds[i].onmouseover = function(){//得到当前鼠标悬停的位置(td的id属性值)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>
web前端必学功法之一:五星好评相关推荐
- web前端必学功法之一:用户选择爱好
web前端必学功法之一:用户选择爱好 案例实现效果: 首先做这个页面效果,我们要把页面布局给写好,每个网站做好页面可以解决很大的问题. css代码,这里的页面采用Grid布局 <style> ...
- web前端必学功法之一:表单校验(1)
web前端必学功法之一:表单校验 案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
- web前端必学功法之一:留言板
web前端必学功法之一:留言板 案例效果: css部分 <style>.container{width: 600px;}.mes-board{margin: 25px 0;padding: ...
- web前端必学功法之一:轮播图
web前端必学功法之一:轮播图 效果演示: <style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none; ...
- web前端必学功法之一:省市联动
web前端必学功法之一:省市联动 案例:js实现下面功能 **<!-- 省市联动思路分析:1.准备元素:定义省份与城市的下拉框2.绑定事件:绑定省份下拉框的change事件3.准备数据:准备数组 ...
- web前端必学功法之一:秒表实现
web前端必学功法之一:秒表实现 功能案例: css样式:<style>.date{width: 200px;height: 50px;background-color: black;bo ...
- web前端必学功法之一:表单校验(2)
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
- Web前端好不好学?Web前端要学些什么呢?
你也许会觉得Web前端开发是一个很简单的工作,对呀,你就是刚刚从网页设计转型过来的.但当你深入其中时,一定会发现好像Web前端开发不是那么简单,光网站性能优化.响应式.框架就让你焦头烂额.确实,做We ...
- Web前端如何学?Web前端学习方法分享
伴随着人工智能.大数据的发展浪潮,互联网将各个行业更加紧密的链接到了一起,也因此,市场上对于IT互联网人才的需求一再增多,Web前端开发工程师这一岗位就很好的体现了这种态势. 从各大招聘平台可以看到, ...
最新文章
- SAP SD交货单凭证流里的Confirmation of Service初探 II
- 操作系统开发系列—2.进入32位保护模式
- 幻兽天下修复版java_宠物天下四-幻兽天下
- ERROR manager.SqlManager: Error reading from database: java.sql.SQLException: Streaming result set
- jsp大作业_Servlet与JSP配合使用基本案例
- 2010年imac从移动硬盘启动Win10
- JDK自带观察者的使用
- es 1.7 ik 配置
- matlab 附录 周开利,【新书推荐】【2005.07】神经网络模型及其MATLAB仿真程序设计(周开利)...
- PyTorch基础:数据处理(数据加载、GPU加速)
- MapReducer Counter计数器的使用,Combiner ,Partitioner,Sort,Grop的使用,
- 华为机试——字符串压缩(stringZip)
- 美国囤积零日漏洞的目的何在?
- Python学习之CSDN21天学习挑战赛计划之2
- WeCube 2.0 全新架构,整装待发
- tf.nn.leaky_relu()函数
- 乡村老师网络计算机培训日志,乡村年轻女教师 “教育日记”火爆网络
- python安装advanced options_python 安装配置(windows)
- 微服务架构下该如何技术选型呢?
- 仿微信建群添加人员效果