温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

使用JavaScript编写一个随机点名器

发布时间:2021-02-25 16:21:30 阅读:209 作者:Leah 栏目:开发技术
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章给大家介绍使用JavaScript编写一个随机点名器,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。

JavaScript可以做什么

1.可以使网页具有交互性,例如响应用户点击,给用户提供更好的体验。 2.可以处理表单,检验用户的输入,并提供及时反馈节省用户时间。 3.可以根据用户的操作,动态的创建页面。 4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。

HTML代码:

<body>
 <h2>点名啦</h2>
 <div id="did">
  <input id="rollcall-id" type="button" value="随机点名器"><br>
  <input id="action-id" type="submit" onclick="doClick()" value="开始">
 </div>
</body>

CSS代码:

<style>
 * {
  margin0px;
  padding0px;
 }

 body {
  background-colorrgb(255249249);
 }

 h2 {
  text-align: center;
  padding-top100px;
  colorrgba(250541290.562);
 }

 #did {
  position: relative;
  width200px;
  margin60px auto;
 }

 #did input:first-child {
  width200px;
  height60px;
  background-colorrgba(250541290.562);
  /* 不要边框或设边框为透明 */
  border: none;
  border-radius20px;
  font-size25px;
  color#fff;
  box-shadow0px 0px 3px 3px rgba(250541290.158);
  /* 点击时边框消失 */
  outline0;
 }

 #did input:nth-last-child(1) {
  width100px;
  height40px;
  margin40px 50px;
  background-colorrgba(250541290.562);
  border1px solid transparent;
  background-colorrgba(255681770.432);
  border-radius15px;
  box-shadow0px 0px 2px 2px rgba(250541290.158);
  font-size17px;
  color#333;
  outline0;
  transition: color 0.2s ease-out;
  transition: box-shadow 0.2s ease-out;
 }

 #did input:nth-last-child(1):hover {
  color#fff;
  cursor: pointer;
  box-shadow0px 0px 4px 4px rgba(250541290.158);
 }
</style>

JavaScript代码:

<script>
 var rollcall = document.getElementById("rollcall-id");
 var action = document.getElementById("action-id");
 var h2 = document.getElementsByTagName("h2");

 //不能用name,用name只会取得一个字符
 var allName = ["张柳菲""高颖影""赵温言""李颖""邓辰希""莫若邻""秦橙",
  "吴筱宇""赵希""马素滢""吕沁雅""罗鸿哲""夏素芸""谢焱之",
  "曹梦朦""李允书""周枫桥""孙浩""江雁菁""杨振凯""林舒言",
  "钱妙妙""郭景""杜贝贝""童闵然""钟小凌""韩云韵""白然之"];

 //随机产生一个名字
 function stringRandom() {
  return parseInt(Math.random() * allName.length);
 }

 var time = null;
 var luckName;
 //开始
 function doStart() {
  if (time == null) {
   time = setInterval(function () {
    //获取随机点名的值
    luckName = allName[stringRandom()];
    rollcall.setAttribute("value", luckName);
   }, 100);
  }
 }

 //停止
 function doStop() {
  if (time != null) {
   clearInterval(time);
   time = null;
  }
 }

 //点击事件
 function doClick() {
  if (action.value == "开始") {
   //改变样式
   action.style.backgroundColor = "#cecece";
   action.style.boxShadow = "0px 0px 2px 2px rgba(100, 100, 100, 0.4)";
   action.value = "停止";
   h2[0].innerHTML = "点名啦";

   //开始随机点名
   doStart();
  } else if (action.value == "停止") {
   action.style.backgroundColor = "rgba(255, 68, 177, 0.432)";
   action.style.boxShadow = "0px 0px 2px 2px rgba(250, 54, 129, 0.158)";
   action.value = "开始";
   h2[0].innerHTML = "恭喜" + luckName + "同学获得一次发言机会";

   //停止
   doStop();
  }
 }
</script>

关于使用JavaScript编写一个随机点名器就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×