r61/rate.html · 约 2380 字符
1<!doctype html>
2<html lang="zh-CN">
3<head>
4<meta charset="utf-8">
5<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
6<title>打分评价</title>
7<link rel="stylesheet" href="style.css">
8</head>
9<body>
10<div class="app">
11 <header class="top">
12 <div class="top-l">影迷 · 阿正</div>
13 <div class="top-r">打分评价</div>
14 </header>
15 <main class="main">
16<div class="card">
17 <div class="row"><div class="poster">🎬</div><div class="info" style="flex:1"><div class="nm" style="font-size:15px">盗梦空间</div><div class="muted">克里斯托弗·诺兰 · 2010</div></div>
18 <span class="score">9.3</span></div>
19</div>
20<div class="card" style="text-align:center">
21 <div class="sec-title" style="justify-content:center">点击星星打分</div>
22 <div class="stars" id="stars">⭐⭐⭐⭐⭐</div>
23 <div class="muted" id="scoretip" style="margin-top:8px">轻触选择评分</div>
24</div>
25<div class="card">
26 <div class="sec-title"><span>✍️</span> 写下你的短评</div>
27 <textarea class="ta">梦境层层折叠，结尾的陀螺让人回味无穷。</textarea>
28 <div class="chips" style="margin-top:10px">
29 <div class="chip on">👍 烧脑</div><div class="chip">😭 催泪</div><div class="chip">😱 反转</div><div class="chip">🎬 神作</div>
30 </div>
31</div>
32<a class="btn full" href="detail.html" style="text-decoration:none;text-align:center">提交评分</a>
33<div class="muted" style="text-align:center">提交后评分计入影片总分，并同步到我的影评</div>
34</main>
35 <nav class="nav"><a class="" href="home.html"><span class="ic">🏠</span>首页</a><a class=" on" href="category.html"><span class="ic">🗂</span>分类</a><a class="" href="recommend.html"><span class="ic">✨</span>推荐</a><a class="" href="my.html"><span class="ic">❤</span>想看</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
36</div>
37<script>
38var s=document.getElementById('stars'),tip=document.getElementById('scoretip');
39var labs=['','很差','较差','还行','推荐','神作'];
40s.addEventListener('click',function(){var i=1+Math.floor(Math.random()*5);var h='';for(var k=1;k<=5;k++)h+=(k<=i?'<span class="on">⭐</span>':'⭐');s.innerHTML=h;tip.textContent='你的评分：'+i+' 星 · '+labs[i];});
41</script>
42</body>
43</html>