前言：
此时看官们对“js点击屏幕”可能比较关注，我们都想要了解一些“js点击屏幕”的相关内容。那么小编同时在网络上搜集了一些对于“js点击屏幕””的相关资讯，希望各位老铁们能喜欢，各位老铁们快快来学习一下吧！点击五角星评分这功能挺有意思也挺简单的，试着用原生JavaScript写了一个。 JS、CSS都放在HTML文档里在一起了，简单的东西就不分开啦，请高手们多指正哈。
打分的五角星 ：）
点击五角星打分，我搞得是评分从0-5，五个星星。其实评分范围和用几个星星，自己可以随便定的说。五角星是用的float浮动排成的一排，百分比定的宽度。点击星星评分后，分值存储在nowI变量里了，取出来挺方便。还有标题字体大小没做移动端适配，用的em单位。不过已经white-space：nowrap 不让它换行了。写上代码，哈哈：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>评分小星星</title>
<style>
body{
margin:0;
padding:0;
/* text-align: center; */
}
.clearfix:after {
display: block;
content: "";
clear: both;
height: 0;
}
.fl {
float: left;
}
.fr {
float: right;
}
.scoreEvaluation {
width:50%;
margin-left:25%;
margin-top:2rem;
/*
margin-left:auto;
margin-right:auto;
*/
}
.scoringDevice {
width: 100%;
white-space: nowrap;
padding-right: 4%;
}
.scoreEvaluation .title {
white-space: nowrap;
font-size: 2em;
font-weight:bold;
margin-bottom: 1.5rem;
color:#ffa500;
/* text-align: left; */
}
.scoringDevice img {
display: block;
width: 15%;
margin-right: 5%;
height: auto;
cursor: pointer;
}
</style>
</head>
<body>
<div class="scoreEvaluation">
<div class="title">分数评价</div>
<div class="scoringDevice clearfix">
<img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='1' onclick="scoreFunc(event)" />
<img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='2' onclick="scoreFunc(event)" />
<img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='3' onclick="scoreFunc(event)" />
<img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='4' onclick="scoreFunc(event)" />
<img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='5' onclick="scoreFunc(event)" />
</div>
</div>
<script>
//评分使用的变量
ScoreBl = true;
scoreI = null;
scoreImgs = [];
// 点击进行评分
function scoreFunc(event) {
if (ScoreBl) {
scoreImgs = document.getElementsByClassName('scoreImg');
}
var e = event || window.event;
var target = e.target || e.srcElement;
var x = target.getAttribute('data-index');
// 点击后的分数存放在变量nowI里了
var nowI = parseInt(x, 10);
var i;
if (nowI != scoreI) {
scoreI = nowI;
for (i = 0, len = scoreImgs.length; i < len; i++) {
scoreImgs[i].src = "icon/empty-pentagram.png";
}
for (i = 0; i < nowI; i++) {
scoreImgs[i].src = "icon/pentagram.png";
}
} else {
scoreI = 0;
for (i = 0, len = scoreImgs.length; i < len; i++) {
scoreImgs[i].src = "icon/empty-pentagram.png";
}
}
}
</script>
</body>
</html>
用插入代码块这样写进去后回车换行都消失啦，都挤到一起了。看着是用了code标签包裹的，应该是因为这个所以才没有换行了不：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>评分小星星</title> <style> body{ margin:0; padding:0; /* text-align: center; */ } .clearfix:after { display: block; content: ""; clear: both; height: 0; } .fl { float: left; } .fr { float: right; } .scoreEvaluation { width:50%; margin-left:25%; margin-top:2rem; /* margin-left:auto; margin-right:auto; */ } .scoringDevice { width: 100%; white-space: nowrap; padding-right: 4%; } .scoreEvaluation .title { white-space: nowrap; font-size: 2em; font-weight:bold; margin-bottom: 1.5rem; color:#ffa500; /* text-align: left; */ } .scoringDevice img { display: block; width: 15%; margin-right: 5%; height: auto; cursor: pointer; } </style></head><body> <div class="scoreEvaluation"> <div class="title">分数评价</div> <div class="scoringDevice clearfix"> <img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='1' onclick="scoreFunc(event)" /> <img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='2' onclick="scoreFunc(event)" /> <img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='3' onclick="scoreFunc(event)" /> <img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='4' onclick="scoreFunc(event)" /> <img src="icon/empty-pentagram.png" alt="分数" class="scoreImg fl" data-index='5' onclick="scoreFunc(event)" /> </div> </div> <script> //评分使用的变量 ScoreBl = true; scoreI = null; scoreImgs = []; // 点击进行评分 function scoreFunc(event) { if (ScoreBl) { scoreImgs = document.getElementsByClassName('scoreImg'); } var e = event || window.event; var target = e.target || e.srcElement; var x = target.getAttribute('data-index'); // 点击后的分数存放在变量nowI里了 var nowI = parseInt(x, 10); var i; if (nowI != scoreI) { scoreI = nowI; for (i = 0, len = scoreImgs.length; i < len; i++) { scoreImgs[i].src = "icon/empty-pentagram.png"; } for (i = 0; i < nowI; i++) { scoreImgs[i].src = "icon/pentagram.png"; } } else { scoreI = 0; for (i = 0, len = scoreImgs.length; i < len; i++) { scoreImgs[i].src = "icon/empty-pentagram.png"; } } } </script></body></html> 好像javascript的语法里大多是在每个for循环的语句1中直接定义计数变量var i和赋初值，我是几个for循环都用的同一个变量 i ，这样子也没错呢，囧。感觉还是C语言的语法简单哈。
五角星
五角星
五角星
标签： #js点击屏幕
