JS效果-原生JS-模仿商城五星评价

最新推荐文章于 2024-06-06 10:16:06 发布

Web-once

最新推荐文章于 2024-06-06 10:16:06 发布

阅读量1k

点赞数

文章标签：五星评价 js

本文链接：https://blog.csdn.net/qq_42381297/article/details/81697726

版权

这个五星评价交互性很好，是我刚开始接触js写的，当时在学习妙味课堂的js实例课程，觉得很有趣，便琢磨了一下，没想到写出来了，准备工作很简单，三种不同颜色（灰黑红）的五角星图片各五张~

话不多说，看代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>五星评价</title>
	<style type="text/css">
	.div1{
		/*width: 400px;*/
		/*height: 200px;*/
		/*background-color: #333;*/
		float: left;
	}
	img{
		width: 32px;
	}
	.div2{
		/*width: 200px;*/
		height: 36px;
		/*background: #eee;*/
		float: left;
		margin-left: 30px;
	}
	span{
		font-size: 18px;
		line-height: 36px;
	}
	#text{
		font-size: 14px;
		color: #678090;
	}
	</style>
	<script type="text/javascript">
	window.onload = function(){
		var aImg = document.getElementsByTagName('img');
		var oSpan = document.getElementById('word');
		var oText = document.getElementById('text');
		var o

最低0.47元/天解锁文章

Web-once

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS效果-原生JS-模仿商城五星评价

这个五星评价交互性很好，是我刚开始接触js写的，当时在学习妙味课堂的js实例课程，觉得很有趣，便琢磨了一下，没想到写出来了，准备工作很简单，三种不同颜色（灰黑红）的五角星图片各五张~话不多说，看代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;五...
复制链接

扫一扫