50天50个前端小项目（纯html+css+js）第十三天（随机选择器）

mzldustu

已于 2022-10-25 19:08:46 修改

阅读量781

点赞数 1

CC 4.0 BY-SA版权

分类专栏： 50Day50前端基础小项目(纯三件套) 文章标签： css html 前端 javascript

于 2022-10-25 19:08:13 首次发布

本文链接：https://blog.csdn.net/qq_45628733/article/details/127519373

本文介绍了如何使用HTML、CSS和JavaScript创建一个随机选择器，适用于选择困难症用户。通过输入选项，按下回车键，程序会随机选择一项并高亮显示。文章详细讲解了HTML结构、CSS样式以及JavaScript的关键代码实现，包括监听回车事件、设置定时器模拟选择过程和随机选择功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天我们来做一个随机选择器的小demo，（选择困难症的福音），能将你纠结的事放到这里进行随机选择。
直接来看效果：
首先输入吃饭，睡觉，写代码
在这里插入图片描述
然后回车：最终选中了睡觉，但是现在不睡觉哈哈哈。

来看代码实现：
首先是html部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Random Choice Picker</title>
  </head>
  <body>
    <div class="container">
      <h3>Enter all of the choices divided by a comma (','). 
      <br> Press enter when you're done</h3>
      <!-- 输入框 -->
      <textarea placeholder="Enter choices here..." id="textarea"></textarea&