找回密码
 立即注册
  • QQ空间
  • 回复
  • 收藏
最终效果展示


业务分析

1.鼠标从按钮经过时改变按钮内容

2.鼠标从按钮经过时改变按钮位置

3点击关闭时提示信息









本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
发表评论
登录后参与评论 / 立即注册

最新点评

倒序浏览
实现阶段    第一步:页面布局
                页面解析:一句话加上两个按钮;
                添加文字(方法有很多<span><h1><p>等等都可以实现,我这里用的p标签
  1. <p>你是不是喜欢我</p>
复制代码
               添加两个按钮(按钮也可以通过多种方法实现,button类型的input标签或者直接使用button标签,这里使用input标签
  1. <input type="button" id="btn1" value="是的" />
  2. <input type="button" id="but2" value="不是" />
复制代码
               解析一下:input标签是一个表单元素,他可以有多种类型,type=button表示类型是按钮,id 这里要注意一下,正常按钮可以不用加id,但是我们后面需要对按钮添加事件,所以这里要给他们一个id,以便我们分别对不同的按钮进行操作。value是按钮的值,就是按钮上边显示的字。              

  效果展示












本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
我要点评 使用道具 举报
第二步:事件实现            这里说一下,在网页中文字、图片、数据的变化,我统一管他叫做网页的动作,这涉及到一门控制网页动作的语言JavaScript
            JavaScript可以在网页中的任何地方使用,可以用在head里body里也可以用在div里。
            用法:
  1.      <script type="text/javascript">
  2.                             //这里是JavaScript代码
  3.             </script>
复制代码
           接下来开始对按钮进行操作,回忆一下,分析出来的流程是,当鼠标经过按钮时,按钮上的字也就是按钮的值发生了改变。js中我们把鼠标经过或者点击之类行为称为事件。那么就是在鼠标经过的事件中按钮的值发生了变化。
            鼠标经过事件函数: onmouseover;按钮的值value;
            我们再来说一遍这句话就是 onmouseover的时候,按钮的value由不是变成了是。
            好,现在在考虑一个问题,我们知道了改变发生在鼠标经过时,但是还不知道是鼠标经过哪里。
            所以,首先,我们需要先获取到按钮
  1. document.getElementById('btn1');//通过id获取到id为btn1的元素。也就是第一个按钮
复制代码
         
  1. document.getElementById('btn2');//通过id获取到id为btn2的元素。也就是第二个按钮
复制代码
            为获取到的元素添加事件
  1. document.getElementById('but2').onmouseover=function(){    //这是一个函数的格式,不懂得可以先不去考虑。
  2.                                      document.getElementById('btn2').value="是的";    //对按钮2的值进行更改
  3.                                  document.getElementById('btn1').value="不是";   // 对按钮3的值进行更改
  4.                         }
复制代码

             同样的道理再给第一个按钮添加鼠标经过事件。自己动脑做吧。
  
我要点评 使用道具 举报
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="UTF-8">
  5.                 <title></title>
  6.         </head>
  7.         <body>
  8.                 <!--
  9.                 页面布局部分
  10.         -->
  11.                 <p>你是不是崇拜我?</p><br>
  12.                 <input type="button" id="btn1" value="是的" />
  13.                 <input type="button" id="btn2" value="不是" />
  14.                
  15.                 <!--
  16.                 作者:923189437@qq.com
  17.                 时间:2017-05-23
  18.                 描述:下面是js代码
  19.         -->
  20.                 <script type="text/javascript">
  21.                         
  22.                         var btn1=document.getElementById('btn1');
  23.                         var btn2=document.getElementById('btn2');        //获取到两个按钮,并把获取到的东西赋值给一个变量
  24.                         
  25.                         //给两个按钮添加鼠标经过事件。
  26.                         btn1.onmousemove=function(){
  27.                                 btn1.value="是的";
  28.                                 btn2.value="不是";
  29.                         }
  30.                         btn2.onmousemove=function(){
  31.                                 btn2.value="是的";
  32.                                 btn1.value="不是";
  33.                         }
  34.                 </script>
  35.         </body>
  36. </html>
复制代码


我要点评 使用道具 举报
用户反馈
客户端