(一)布局

         

      猜前                            ->                         猜后

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

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. 002-创建型-02-抽象工厂模式(Abstract Factory)

    一.概述 抽象工厂模式提供同一个创建一系列相关或相互依赖对象的接口,无须指定它们具体的类 抽象工厂模式是所有形态的工厂模式中最为抽象和最具一般性的一种形态.抽象工厂模式是指当有多个抽象角色时,使用的一 ...

  2. Hibernate 自动更新表出错 More than one table found in namespace

    报错:Caused by: org.hibernate.tool.schema.extract.spi.SchemaExtractionException: More than one table f ...

  3. PAT 甲级 1041 Be Unique (20 分)(简单,一遍过)

    1041 Be Unique (20 分)   Being unique is so important to people on Mars that even their lottery is de ...

  4. mysql为字段添加或删除自增属性

    删除自增属性: ALTER TABLE `members` CHANGE uid uid INT(10) UNSIGNED NOT NULL ; 添加自增属性: ALTER TABLE `member ...

  5. Web前端开发工具

    WebStorm: dreamweaver; Hbuilder: sublime text: 前端神器brackets.

  6. 纯js脚本操作excel

    纯js脚本解析excel,并渲染为htm表格,投放大屏并滚动! 代码:https://github.com/tianbogit/js_excel

  7. 通过命令行给 XenServer 打补丁

    安装 XenCenter 客户端,cmd 到 XenCenter 安装目录. 1.上传补丁到服务器,获得uuid xe patch-upload -s <服务器IP地址> -u root ...

  8. apache-phoenix-5.0.0-HBase-2.0-bin 登陆报错

    1.Error: org.apache.hadoop.hbase.DoNotRetryIOException: java.io.IOException: Unable to load configur ...

  9. C语言程序设计II—第十周教学

    第十周教学总结(29/4-5/5) 教学内容 本周的教学内容为:9.2 学生成绩排序 知识点:结构数组的定义.初始化和数组成员引用:9.3 修改学生成绩 知识点:结构指针指向操作,结构指针作为函数参数 ...

  10. nvm 相关命令

    nvm install 安装指定版本,可模糊安装,如:安装v10.4.0,既可nvm install v10.4.0,又可nvm install 4.4 nvm uninstall 删除已安装的指定版 ...