实训11 ，百度评分

html 复制代码

<!doctype html> <!-- 文档类型声明，告诉浏览器这是HTML5文档 -->
<html> <!-- HTML文档的根元素 -->
<head> <!-- 文档头部，包含元数据和链接到外部资源 -->
<meta charset="utf-8"> <!-- 字符编码声明，确保中文字符正确显示 -->
<title>使用JS+CSS实现百度评分</title> <!-- 页面标题，显示在浏览器标签页上 -->
<link rel="stylesheet" type="text/css" href="css/evaluation.css" /> <!-- 链接外部CSS样式表 -->
</head>
<body> <!-- 文档主体，包含所有可见内容 -->
  <div class="wrap"> <!-- 主容器，包裹整个评分组件 -->
     <div class="tip">为我们评价一下吧</div> <!-- 提示文本 -->
     <div class="overall"> <!-- 总体评价区域 -->
       <div class="left">总体评价:</div> <!-- 左侧标签 -->
       <div class="stars"> <!-- 星级评分区域 -->
         <span></span> <!-- 单个星星，通过CSS控制样式 -->
         <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="info">请评价</div> <!-- 评价状态提示 -->
    </div>
    <div class="concret"> <!-- 具体评价内容区域 -->
      <div class="txtMsg"> <!-- 文本信息区域 -->
         <span class="left">评价内容：</span> <!-- 左侧标签 -->
         <span class="right">上限为255个字符</span> <!-- 右侧提示信息 -->
      </div>
      <div class="content"> <!-- 文本输入区域 -->
        <textarea></textarea> <!-- 多行文本输入框 -->
      </div>
    </div>
    <div class="button"> <!-- 按钮区域 -->
       <span class="submit">提 交</span><span class="reset">重 置</span> <!-- 提交和重置按钮 -->
    </div>
  </div>
  <script src="js/evaluation.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

提问

问题：这个页面中哪个元素用于收集用户的文本输入？它有什么特点？

回答示例：

textarea元素用于收集多行文本输入

特点：可以输入多行文本，有滚动条，可以调整大小

css 复制代码

/* 设置body元素的全局样式 */
body{
	font-family:"微软雅黑"; /* 设置页面默认字体为微软雅黑 */
	font-size:16px; /* 设置页面基础字体大小为16像素 */
	text-align:center; /* 设置页面内容居中显示 */
}
.wrap{/*最外层盒子样式*/
	width:513px; /* 设置容器宽度为513像素 */
	margin:60px auto; /* 设置上下边距为60像素，左右自动居中 */
}
.tip{/*信息提示盒子样式*/
	font-size:26px; /* 设置提示文字大小为26像素 */
	margin-bottom:20px; /* 设置底部外边距为20像素 */
}
.overall{/*总体评价盒子样式*/
	position:relative;/*为给星星的父div进行绝对定位*/
	height:36px; /* 设置高度为36像素 */
	line-height:36px; /* 设置行高为36像素，使文字垂直居中 */
	margin-bottom:20px; /* 设置底部外边距为20像素 */
}
.stars{/*容纳五个星星的盒子样式*/
	width: 200px; /* 设置星星容器宽度为200像素 */
	height: 33px; /* 设置星星容器高度为33像素 */
	position:absolute; /* 设置为绝对定位 */
	top:0; /* 距离父元素顶部为0 */
	left:180px; /* 距离父元素左侧180像素 */
}
.stars span{/*每个星星的样式*/
	float:left; /* 设置星星向左浮动，使其水平排列 */
	width:32px; /* 设置每个星星宽度为32像素 */
	height:32px; /* 设置每个星星高度为32像素 */
	padding:0 3px; /* 设置左右内边距为3像素，上下为0 */
	cursor:pointer; /* 设置鼠标指针为手型，表示可点击 */
	background:url(../images/star0.png) no-repeat; /* 设置星星默认背景图片，不重复 */
}
.info{
	float:right; /* 设置评价信息向右浮动 */
}
.txtMsg{
	height:36px; /* 设置文本信息区域高度为36像素 */
}
.left{
	float:left; /* 设置向左浮动 */
}
.right{
	float:right; /* 设置向右浮动 */
}
textarea{
	width:492px; /* 设置文本区域宽度为492像素 */
	height:200px; /* 设置文本区域高度为200像素 */
	resize:none; /* 禁止用户调整文本区域大小 */
	padding:10px; /* 设置内边距为10像素 */
	font-size:16px; /* 设置字体大小为16像素 */
	border:2px solid #996; /* 设置边框为2像素宽，颜色为#996 */
	margin-bottom:20px; /* 设置底部外边距为20像素 */
}
.submit,.reset{/*提交和重置按钮的共用样式*/
	padding:0 8px; /* 设置左右内边距为8像素，上下为0 */
	border:2px solid #996; /* 设置边框为2像素宽，颜色为#996 */
	cursor:pointer; /* 设置鼠标指针为手型，表示可点击 */
}
/*鼠标移到这些元素上时边框样式发生变化*/
.submit:hover,.reset:hover{
	border:2px solid #f00; /* 设置鼠标悬停时边框变为红色 */
}

javascript 复制代码

// 获取DOM元素
var tip = document.querySelector('.tip'); // 获取提示信息元素
var info = document.querySelector('.info'); // 获取评价信息显示元素
var stars = document.querySelectorAll('.stars span'); // 获取所有星星元素
var textarea = document.querySelector('textarea'); // 获取文本域元素

// 定义评价等级数组
var arr = ['差','较差','一般','较好','好']; // 总体评价等级
var len = arr.length; // 获取数组长度

// 定义变量记录当前选中的星星位置，初始值为-1表示未选中
var loc = -1; // 用于判断是否有星星被点击了（用于获取点击的星星的位置）

// 定义函数：根据参数值切换星星的背景图片
function changeBg(index) {
    // 遍历所有星星
    for (var i = 0; i < len; i++) {
        // 如果当前星星索引小于等于传入的索引值，设置为选中状态的背景
        if (i <= index) {
            stars[i].style.background = 'url(images/star2.png) no-repeat';
        } else {
            // 否则设置为未选中状态的背景
            stars[i].style.background = 'url(images/star0.png) no-repeat';
        }
    }
}

// 为每个星星添加事件监听
for (var i = 0; i < len; i++) {
    // 为每个星星添加自定义属性index，记录其在数组中的位置
    // 需要知道点击的或者移入的是第几个所以需要加索引值
    stars[i].index = i;
    
    // 鼠标移入事件
    stars[i].onmouseover = function() {
        // 当鼠标移入时，改变星星背景
        changeBg(this.index);
        // 更新评价信息显示
        info.innerHTML = arr[this.index];
    };
    
    // 鼠标移出事件
    stars[i].onmouseout = function() {
        // 当鼠标移出时，恢复到之前选中的状态（如果有）
        changeBg(loc);
        // 如果没有星星被选中，显示提示信息
        if (loc == -1) {
            info.innerHTML = '请评价';
        } else {
            // 否则显示之前选中的评价
            info.innerHTML = arr[loc];
        }
    };
    
    // 鼠标点击事件
    stars[i].onclick = function() {
        // 记录当前点击的星星位置
        loc = this.index;
    };
}

// 为文本域添加输入事件监听
// 判断文本域中输入的字符是否超出了255,如果超出了，则在头部用红色字体提示；否则显示输出了多少字符
textarea.oninput = function(){
    // 获取当前文本域内容的长度
    var len = textarea.value.length;
    
    // 如果长度不超过255个字符
    if(len <= 255){
        // 显示还可以输入的字符数
        tip.innerHTML = "还可增加" + (255 - len) + "个字符";
        tip.style.color = ''; // 恢复默认颜色
    } else {
        // 如果超过255个字符，提示需要删除的字符数
        tip.innerHTML = "请删除" + (len - 255) + "个字符";
        tip.style.color = 'red'; // 设置为红色提示
    }
}

问题：代码中为星星元素绑定了三种事件：onmouseover、onmouseout和onclick。谁能解释一下这三种事件触发的时机和区别？

回答示例：

onmouseover：鼠标移入元素时触发

onmouseout：鼠标移出元素时触发

onclick：鼠标点击元素时触发

这些事件共同构成了完整的用户交互体验

代码中使用变量loc来记录当前选中的星星位置，为什么初始值设为-1？这个变量在交互中起到了什么作用？

回答示例：

初始值设为-1表示没有任何星星被选中

loc变量记录了用户的最终选择，用于在鼠标移出时恢复正确的显示状态

它起到了状态管理的作用，保存了用户的操作结果