JavaScript實現簡單的星星評分效果
更新時間：2017年05月18日 09:51:53 作者：haozihaozi1234
這篇文章主要為大家詳細介紹了JavaScript實現簡單的星星評分效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
大概實現思路就是用一張灰色的星星作為背景，然后讓有顏色的星星圖片定位在灰色的星星圖片上，控制有顏色星星圖片的寬度即可達到基本效果。如下圖：
下面上代碼：
<html>
<head>
<meta charset="UTF-8">
<title>星星</title>
<style>
.starnone,.starWrap{
width: 100px;
height: 20px;
}
.starnone{
position: relative;
background: url(stars-none20px.png) no-repeat;
}
.star{
position: absolute;
top: 0;
left: 0;
width: 70%;
height: 20px;
background: url(stars20px.png) no-repeat;
}
#num{
width: 30px;
}
</style>
</head>
<body>
<div class="starnone">
<div class="starWrap">
<div class="star" id="star"></div>
</div>
</div>
<div>
<input type="text" id="num"> %
<button id="ok">OK</button>
</div>
<script>
window.onload = function(){
var star = document.getElementById("star");
var okBtn = document.getElementById("ok");
var num = document.getElementById("num");
okBtn.onclick = function(){
var value = parseFloat(num.value);
if (value>100) {
alert("請小于100");
return;
} else if(value<0){
alert("請大于0");
return;
}
star.style.width = value + "px";
}
}
</script>
</body>
</html>
用到的兩個圖片。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了javascript框架設計之瀏覽器的嗅探和特征偵測的相關資料,需要的朋友可以參考下2015-06-06
p5.js 是一個JavaScript的函數庫，它在制作之初就和Processing有同樣的目標。本文將利用p5.js 制作出一束動態(tài)花束，感興趣的可以嘗試一下2022-06-06
Option 對象代表 HTML 表單中下拉列表中的一個選項。在 HTML 表單中 <option> 標簽每出現一次，一個 Option 對象就會被創(chuàng)建。您可通過表單的 elements[] 數組訪問一個 Option 對象，或者通過使用 document.getElementById()。2015-05-05
這篇文章主要為大家詳細介紹了小程序實現商品屬性選擇或規(guī)格選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
做前端或者js程序員的同學應該都有感受，在日常工作中，用的最多的功能，一個是ajax與后臺的數據接口，另一個就是對Dom元素的style控制，來達到不同的變換效果。2010-10-10
這篇文章主要為大家詳細介紹了JavaScript實現省市聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了網頁掛馬方式整理及詳細介紹的相關資料,這里整理了不少方式，大家可以看下如何實現的，需要的朋友可以參考下2016-11-11
這篇文章主要介紹了JS如何實現一個單文件組件，對單文件組件感興趣的同學，可以參考下2021-05-05
使用JavaScript獲取掃碼槍掃描得到的條形碼的思路代碼詳解
這篇文章主要介紹了使用JavaScript獲取掃碼槍掃描得到的條形碼的思路代碼詳解,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-06
JS 事件綁定函數代碼，解決了瀏覽器兼容，現在可以兼容IE6 7 8 FF 谷歌2010-04-04