(一)布局

         

      猜前                            ->                         猜后

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

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. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_08-课程预览技术方案

    3.2.1 技术需求 课程详情页面是向用户展示课程信息的窗口,课程相当于网站的商品,本页面的访问量会非常大.此页面的内容设 计不仅要展示出课程核心重要的内容而且用户访问页面的速度要有保证,有统计显示打 ...

  2. java@ 注解原理与使用

    Java反射 java反射机制的定义: 在运行转态时(动态的)时. 对于任意一个类,都能够知道这个类的所有属性和方法 对于任意一个对象,都能够知道调用它的任意属性和方法 Class对象 java中用对 ...

  3. Mysql主从复制(重置版)

    MySQL Replication是Mysql自带的一种功能,可以实现将数据从一台数据库服务器(master)复制到一台或多台数据库服务器(slave),默认情况下属于异步复制,无需维持长连接.通过配 ...

  4. 修改iPhone5s crash 问题

  5. 锚点/JQ:点击导航跳到网页中的指定位置

    今天做了一个简单的功能,页面往下滚动到一定位置,顶部出现一个浮动的导航栏,点击导航栏标签,下面页面跳转到相应的区域.回到顶部,导航栏隐藏. 因为顶部有一个浮动的导航栏,所以跳转到下面页面的时候,总是盖 ...

  6. react做的简单的选项卡

    ### 首先安装react的脚手架 cnpm    install   create-react-app   -g    只需要在电脑下载安装一次即可  ###创建项目 create-react-ap ...

  7. 网络损伤仪细分市场:eCPRI网络损伤的技术要求

    关于“网络损伤仪”的叫法 网络损伤仪,也称作为广域网仿真仪,广域网损伤仪,WAN Emulation,Network Impairment Emulator. 为什么会带WAN广域网这个限定词? 应该 ...

  8. 打开app应用

    =========================================人才网 <!--app底部浮动广告--><style> footer { padding-bo ...

  9. ios客户端浏览器样式加载失效问题

    最近线上测试中出现一个奇怪的问题,ios客户端浏览器样式加载失效. 从表象来看,同样的css,安卓手机上可以正常展示,但是到ios手机上首次进入页面就不能正常显示 这时候,我们首先会考虑是不是ios设 ...

  10. Linux集群环境准备及20项基础优化

    中小规模集群架构: 1.什么是集群? 简单地说,集群就是一堆机器 做同一件事, 例如:京东(www.jd.com)提供卖东西服务这就是一件事,可能是几千台服务器,在背后运转支撑这个网站. www.ba ...