(一)布局

         

      猜前                            ->                         猜后

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

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. CSS如何实现把鼠标放在行上整行变色

    CSS如何实现把鼠标放在行上整行变色: 在很多网站都有这样的效果,那就是当鼠标放在一个文章列表行的时候,此行就会显示与其他行不同的颜色,本站的文章列表也具有这样的效果,便于浏览者识别,非常人性化,下面 ...

  2. oracle库两个表关联查询时用 count 报错【我】

    oracle数据库,需要对两个表进行关联查询(根据两个字段),结果发现关联后不能改为 count 获取数量,报错如下: 同样的sql换到另外一个数据库就可以(只是因为数据量在千万级,所以很慢,用时40 ...

  3. JavaScript正则表达式补充

    定义正则表达式 /.../用于定义正则表达式 /.../g表示全局匹配 /.../i表示不区分大小写 /.../m表示多行匹配 JS正则匹配时本身就是支持多行,此处多行匹配只是影响正则表达式^和$,m ...

  4. java书籍推荐转

    http://blog.csdn.net/chaozhi_guo/article/details/51274634 一.<深入理解Java虚拟机:JVM高级特性与最佳实践> 如果你不满足于 ...

  5. jQuery动态创建html元素的常用方法汇总

    在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...

  6. 【Leetcode_easy】1103. Distribute Candies to People

    problem 1103. Distribute Candies to People solution:没看明白代码... class Solution { public: vector<int ...

  7. iOS-UIAlertView与UIActionSheet

    UIAlertView与UIActionSheet 6.11.1 常规调用 UIAlertView:调出一个模态对话框,屏幕居中显示 UIActionSheet:非模态对话框,屏幕下方弹出 Alert ...

  8. JPEG2000开发SDK及其特点

    JPEG2000开发SDK及其特点 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:JPEG2000被开发来取代JPEG,但因为大量核心算法被专利注册, ...

  9. boost::bind四种应用场景的例子

        普通函数 int f( int a, int b ){return a + b;}boost::bind( f, _1, 9 )( 1 ) 成员函数 struct demo{int f( in ...

  10. 解决 yolov3: Demo needs OpenCV for webcam images

    默认情况下yolo的Makefile文件有个配置OPENCV=0,你需要将它改成 0 ,然后重新make 编译make 编译就会启用 opencv,此时你需要在你的电脑上安装opencv 才可以 修改 ...