js五星好评

最新推荐文章于 2023-07-12 15:46:33 发布
最新推荐文章于 2023-07-12 15:46:33 发布
阅读量124 收藏
点赞数
原文链接：http://www.cnblogs.com/ldlx-mars/p/6827008.html
版权

一般我们在一些购物以及美食的网站都会看到五星好评之类的，一下是使用js制作的五星好评！

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style type="text/css">
  7. *{
  8. margin:0;
  9. padding:0;
  10. }
  11. div{
  12. width:135px;
  13. height: 30px;
  14. z-index: 1;
  15. opacity: .8;
  16. background: url("images/star.gif") repeat-x;
  17. position: relative;
  18. }
  19. .one{
  20. height: 30px;
  21. position: absolute;
  22. top:0;
  23. left:0;
  24. background:url('images/star.gif') repeat-x 0 -30px;
  25. }
  26. </style>
  27. <script>
  28. window.οnlοad=function() {
  29. var div = document.getElementsByTagName("div")[0];
  30. var p = document.createElement("p");
  31. p.setAttribute("class","one");
  32. div.appendChild(p);
  33. div.οnclick=function(ev)
  34. {
  35. var oEvent=ev||event;
  36. var wid = oEvent.offsetX;
  37. if(wid>=135){
  38. wid = 135;
  39. }
  40. p.style.width=wid+"px";
  41. }
  42. }
  43. </script>
  44. </head>
  45. <body>
  46. <div></div>
  47. </body>
  48. </html>
 

直接复制粘贴 即可查看效果图：

转载于:https://www.cnblogs.com/ldlx-mars/p/6827008.html

weixin_38166686
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js实现红心好评
hnspystqxskzlqc的博客
04-04 1299
5星好评在美团中最为常见，大家不仅要知道效果，也要对实现效果的代码有了解。 接下来上代码！！！ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="base.css"/> <style type="text/css"&gt
JavaScript实现商品评价五星好评
01-22
本文实例为大家分享了JavaScript实现商品评价五星好评的具体代码，供大家参考，具体内容如下 一.效果展示 二.代码实现 1.html代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8> &...
你信不信,只要学几天javascript就可以使用纯原生实现五星评分效果 【附完整代码】
最新发布
极客小俊
07-12 469
实现逻辑思路其实很简单，仔细读都能理解!
五星好评_js五星_五星好评_js五星好评_
09-30
使用JS实现五星好评，源码简单方便初学者理解
javascript实现的五星评价(版本1-1）
wangyining070205的博客
03-31 868
最近学了一个商品五星评价的案例，又稍加修改完善，基本和淘宝的评价效果一致。 运行效果如图所示。 这实际上是用了红白两张星星图片，鼠标移上时，红色星星，鼠标离开时，白色星星。完整代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>淘宝五星评分</title> <style> #mark{width: 360px;}
毕业季，作为程序员（it软件开发工程师），如何培养强大的解决问题的能力
南北极之间
08-12 1860
例如，如果一个孩子试图弄清楚如何打开一个玩具盒，他或她可能会尝试各种方法（例如，拉，推，举），直到找到正确的方法。良好的解决问题的能力包括能够创造性地和分析性地思考，将问题分解成更小的部分，并使用系统的方法找到解决方案。递归涉及将问题分解为较小的子问题，解决每个子问题，然后将子问题的解决方案组合在一起以解决更大的问题。另一个常见的例子是使用算法，例如快速排序算法，它将问题分解成更小的部分，解决每个部分，然后将解决方案组合到各个部分以解决更大的问题。如果你想成功，你需要有很强的解决问题的能力。........
五星好评，模仿淘宝 js
08-21
在这个项目中，我们将深入探讨如何使用JavaScript来模仿淘宝的五星好评功能。 首先，我们需要理解淘宝五星好评系统的基本流程。通常，这个系统包含以下几个关键部分： 1. **用户界面展示**：展示商品的评价星级，...
基于jquery实现五星好评
11-29
在电商网站上，五星好评系统是一个常见的用户交互功能，它允许用户对商品或服务进行直观的评价。这个功能可以通过各种编程技术实现，其中一种常见的方式是利用JavaScript库jQuery。本示例将详细介绍如何使用jQuery来...
js五星评分
04-03
JavaScript五星评分系统是一种常见的网页交互元素，用于让用户对产品、服务或内容进行等级评价，通常以五颗星作为评分标准。这种系统通过JavaScript实现动态效果，如鼠标悬停时预览评分，点击后保存用户选择的评分。...
html+js 实现五星评价
07-12
基于H5以及js实现的五星评价脚本，可兼容PC以及移动设备
js实现五星评价功能
10-20
本文主要介绍了js实现五星评价功能和印象评价功能的实例，具有很好的参考价值。下面跟着小编一起来看下吧
JS星星评价 多项评价
07-13
JS 星星评分，JS 评分系统,很好用的.... 类似淘宝的评价，能对多个栏目进行评价
js+html星级评分（支持半星）
11-21
javascript+html星级评分（支持半星）,通过一个下拉选择框控制星星的多少。
五星评价源代码 css+js
09-14
五星 评价 css 和 js jQuery，很实用，下载就能用
javaScript实现五星好评代码
畅游JAVA
12-16 7262
效果如图： 具体代码： function test(myvalue){ for(var i=1;i document.getElementById(""+i).innerHTML="☆"; document.getElementById(""+i).setAttribute("style","color:black"); } for(var i=1;i docu
JS实现五星好评效果
Anoddguy的博客
08-01 3474
效果图 css部分 li{ list-style: none; display: inline-block; width: 27px; height: 27px; background: url(img/star.gif) no-repeat 0px 0px; } html部分 &lt;body&gt; &lt;ul&gt;...
五星好评插件 js + html +css
小亮子的博客
09-15 1229
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; *{ margin:0
JS与JQuery分别实现淘宝（五星好评特效）
有道无术，术尚可求，有术无道，止于术。
12-23 2299
我们经常用的五星好评是如何来的，主要就是三个Event 中的三个事件分别： onmouseover  指向事件 onmouseout    离开事件 onclick 点击事件 代码展示： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title...
使用js实现五星评价
weixin_43294092的博客
05-28 414
`这里写代码片`<!DOCTYPE html> <html lang="en"> <head> <title>elementFromPoint example</title> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-..
五星好评的js代码
05-25
很高兴听到您想要五星评价的JavaScript代码！以下是一个简单的五星评级系统的示例代码： HTML: ```html <span class="star" data-rating="1"></span> <span class="star" data-rating="2"></span> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值