实现简易点名器

  1. 过去的时候,看到老师用的随机点名程序,真的是很厉害呀,但是自己做不出来;现在自从了解了一些CSS样式和JS语法,于是自己用最简易的方法做了一个点名器,好了现在就让我们来看一看吧。
  2. 样式展示:这里写的“随机名”是我以一个P标签来作为抽取的名字,还有一个开始点名的按钮是用来开始抽取的,粉色的背景就不用多说了,大家都懂;

  1. 效果展示:当我们点下“开始点名”按钮的时候,上面的P标签就由随机名变成了一个我已经在代码里写的一个随机名(这里都是本人初中的一些玩的好的同学英文缩写名);

  1. 代码讲解:首先要有好的效果,就要有好的样式,在body标签里写上P标签和button标签,P标签和button标签都要给它们分别设一个不同的id名和文字,button标签要用一个div标签包裹。

  1. 接下来写整体样式,新建style标签在里面写上给body标签的背景颜色;为P标签设置一个字体大小和垂直居中;为button标签设置大小,颜色和圆角效果;这里因为button标签是行内元素,行内元素是不能设垂直居中的,而块级元素是可以设置的,所以前面为什么我们要用div标签包裹它,就是因为它是块级元素,这样就可以让div标签里的button标签也垂直居中;为div标签设置垂直居中。

  1. 最后也是JS部分了,在body标签里新建script标签,这里注意要新建在写过的div标签的后面,在script里标签声明P标签用来获取文字,也要记得写获取button标签来完成一个按下获取名字的代码,这里的几秒后停止和有哪些人的名字可以按自己的想法来设,我设的是1秒和12个人的英文缩写名,还有一个比较重要的,就是为了防止有些人喜欢暴力点击按钮,所以我们记得写上防止暴力点击的代码;

  1. 小结:这种方法虽然比较简单,但有许多美中不足的地方,自己还是要继续认真学习,因为这里只用到了math对象,定时器和延时定时器,比较不好用;对我而言JS还是有点难度的,不过我会花更多时间来深度了解它,继续加油。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值