(一)布局

         

      猜前                            ->                         猜后

(二)明确实现功能和具体实现:

1、网页生成一个随机数,生成的随机数与输入的数进行大小比较。

  1.1输入的数进行判断,对输入字符串、范围在[0,100)外的值界面提示数值不符合,请重新输入。

2、点击“猜”,实现点击前不变色,点击后变色。

3、随机数与输入值进行比较,大了提升“big.png”图片,小了提升“small.png”图片,中了提示"win.png"图片。

  3.1一开始图片不显示(display或opacity属性设置)。

  3.2提示的图片是根据数比较的结果对应显示。

4、在提示图片下方显示出猜了多少次数和输入的数的数值。

  4.1使用点击事件,设置点击一次添加一次<p>标签或者最后添加</br>换行符号。

  4.2使用点击事件,设置点击一次克隆一个<li>标签,具体创建节点将输入值存入,再在相应的<ul>标签克隆<li>。

js写guess网页的更多相关文章

  1. 用原生JS写一个网页版的2048小游戏(兼容移动端)

    这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...

  2. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  3. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  4. 去它的h5,我还是用js写原生跨平台app吧

    智能手机功能越来越强大,已经在逐渐替代电脑的作用.百度.腾讯.阿里的移动端日活数也在逐步的赶上甚至超越电脑端用户.叫喊着“mobile first”的公司越来越多,App开发者应运而生,且队伍日趋庞大 ...

  5. JS一般般的网页重构可以使用Node.js做些什么(转)

    一.非计算机背景前端如何快速了解Node.js? 做前端的应该都听过Node.js,偏开发背景的童鞋应该都玩过. 对于一些没有计算机背景的,工作内容以静态页面呈现为主的前端,可能并未把玩过Node.j ...

  6. JS 阻止整个网页的内容被选中

    pretty-girl { -webkit-user-select: none; } 可是!可是!不是每个浏览器都可以不忧桑!!!那就只能请脚本大王出山了. 阻止选中 有时候,我们需要禁止用户选中一些 ...

  7. 用Node.js写爬虫,撸羞羞的图片

    说到爬虫,很多人都认为是很高大上的东西.哇塞,是不是可以爬妹纸图啊,是不是可以爬小片片啊.答案就是对的.爬虫可以完成这些东西的操作.但是,作为一个正直的程序员,我们要在法律允许范围内用爬虫来为我们服务 ...

  8. 转---写一个网页进度loading

    作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...

  9. Selenium/HtmlUnit设置代理获取JS生成的网页

    通常我们使用Java提供的HttpURLConnection或者Apache的HttpClient获取的网页源代码都是直观可见的,其代码的内容和通过浏览器右键网页->点击查看网页源代码的内容一致 ...

随机推荐

  1. 深度学习框架PyTorch一书的学习-第七章-生成对抗网络(GAN)

    参考:https://github.com/chenyuntc/pytorch-book/tree/v1.0/chapter7-GAN生成动漫头像 GAN解决了非监督学习中的著名问题:给定一批样本,训 ...

  2. Django:文章详情页面评论功能需要登录后才能使用,登录后自动返回到文章详情页

    背景: 文章详情页正在查看文章,想评论一下写的不错,但是需要先登录才能.页面长这个样子: 方案: 1.点击登录链接时,将该页面的URL传递到登录视图中 request.path获取的是当前页面的相对路 ...

  3. 【c# 学习笔记】封装

    封装 指的是把类内部的数据隐藏起来,不让对象实例直接对其操作.c#中提供了属性机制来对类内部的状态进行操作. 在c#中,封装可以通过Public.Private.Protected和Internal等 ...

  4. C#6.0-8.0新功能、ValueTuple

    C# 6.0: https://www.cnblogs.com/yinrq/p/5600530.html C# 7.0: https://www.cnblogs.com/cncc/p/7698543. ...

  5. 为什么每次登录要手动 source /etc/profile ...

    由于执行顺序如下,故追个查看以下文件,看看是不是 JAVA_HOME, PATH 等环境变量在后面的文件中被重写覆盖了. 1. /etc/profile2. /etc/environment3. ~/ ...

  6. 《C语言程序设计教程》学习笔记

    <C语言程序设计教程>--朱鸣华.刘旭麟等 第一章 C语言概述 1.C语言的特点: 1)兼具高级.低级语言的双重能力(C语言允许直接访问物理地址,能够进行位操作,能实现汇编语言的大部分功能 ...

  7. docker中使用Mysql8+phpmyadmin

    现在基本装这套都用docker了,有一些小坑在里面,简单说一下. 运行mysql比较简单,参考mysql⭐Docker Official Images,需要注意不要忘记暴露端口给phpmyadmin用 ...

  8. 【数据库开发】MySQL命令大全

    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL. 首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root ...

  9. ES6 中 let 和 const 总结

    目录 let const 1. let要好好用 1. 基本用法 2. let声明的变量不存在变量提升 3. TDZ(temporal dead zone)暂时性死区 4. 不允许重复声明 2. 块级作 ...

  10. web系统整体优化

    关于web系统整体优化提速总结   关于web系统整体优化提速总结 一.背景 随着公司业务的拓展,随之而来就是各种系统横向和纵向的增加,PV.UV也都随之增加,原有的系统架构和模式慢慢遇上了瓶颈,需要 ...