点击更换图片
我们先看下面这个例子:
使用input里面的button按钮, 并且利用函数, 将一个搜狗logo转换为百度logo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSDemo-Test</title> <script src="toos.js"></script> </head> <body> <img src="https://www.sogou.com/web/img/logo115_50.png?v=5" id = "sougou" width="200px" height="100px"> <br> <input type="button" onclick="op()" value="更换图片"> <script> function op() { var path = "https://www.baidu.com/img/flexible/logo/pc/result.png"; document.getElementById("sougou").src = path; } </script> </body> </html>
我们来看看效果:
这里面是偶先使用img标签, 导入一个网络图片, 也就是搜狗的logo图片, 然后给这个img标签设置好id, 然后在后面的input标签设置一个内置式的js语句, 也就是onclick, 然后onclick执行的操作为函数op(), 这个函数里面可以将sougou这个id所对应的标签里面的src属性更改为百度的logo地址.
使用document对象的getElementById(id)来获取到这个标签对象, 然后通过点号"."的方式来获取src地址, 然后更改这个地址为百度的logo网络地址.
猜数字
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JSDemo-Test</title> <script src="toos.js"></script> </head> <body> <div> <h3>猜数字游戏</h3> 玩家输入一个1~100的数字: <input type="text" id = "input_num"> <p></p> <input type="button" value="查看结果" onclick="selectResult()"> <div id="result_div"> </div> </div> <script> function selectResult() { // 产生随机数 1~10 var randomNum = 1+Math.floor(Math.random()*10); var userInputNum = document.getElementById("input_num").value var msg; if (randomNum == userInputNum) { msg ="<h4>恭喜:猜对了</h4>"; } else { msg ="<h4>恭喜:猜错了, 正确的数字是:" + randomNum +"</h4>"; } document.getElementById("result_div").innerHTML = msg; } </script> </body> </html>
首先, 在JS中定义和使用函数部分前后, 所以我们在后面的script标签里面设置function selectResult() 方法
使用div标签作为主体部分(这个div标签里面任然购置了一个div标签,用来输出查看结果的输出HTML语句)
h3中包含主体
后面进行文本的一个输入, 也就是使用, input标签, 这里设置好id, 方便后续获取到这个input标签的value值,
然后设置一个查看结果的按钮输入:
点击这个按钮, 执行selectResult()方法. 在这个selectResult方法里面, 我们生成一个随机数, 然后和用户在上面输入的文本进行比较:
这个里面使用到了Math对象里面的random()方法, 其作用是生成一个0~1之间的浮点数, 然后通过将这个浮点数 * 10, 然后获取到这个随机数的基层部分, 也就是这个浮点数的被乘以10之后的整数部分, 然后 + 1操作, 这样子就可以得到一个1 ~ 10之间的随机数.
随后使用document的getElementBuId(id)方法, 获取到这之前input里面输入的内容, 然后进行一个比较, 如果这两个相同, 就输出猜对了, 否则输出猜错了然后输出正确的数字.
后面通过同样的方法, 获取到div标签里面的div标签, 然后将构建好的msgHTML文本输入到div当中去, 也就是使用其innerHTML方法, 将这个HTML语句写入到这div标签当中去
搜索页面展示
我们的计算器使用jQuery, 完成开发:
设置4个按钮, 点击按钮, 可以跳转到相应的搜索页面:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>聚合搜索</title> <script src="jquery.min.js"></script> </head> <body> <div style="width: 100%;text-align: center;"> <input type="button" value = "必应" onclick="upSearch('https://www.bing.com')"> <input type="button" value = "谷歌" onclick="upSearch('https://www.google.com')"> <input type="button" value = "360" onclick="upSearch('https://www.so.com')"> <input type="button" value = "hao123" onclick="upSearch('https://www.hao123.com/index.html')"> </div> <hr> <iframe id = "ifr" src="https://www.bing.com" frameborder="0" style="width: 100%;height: 600px;"></iframe> <script> function upSearch(url) { jQuery("#ifr").attr("src",url); } </script> </body> </html>
首先我们使用jQuery的iframe标签进行解析页面, 什么是iframe标签?
iframe是一种网页嵌套工具, 可以将对应的网页嵌套到当前的HTML页面当中去.
下面讲解一些iframe当中常见的属性:
- src: 被嵌套的页面的URL地址
- width: 以CSS像素格式, 或以像素格式, 或以百分比格式指定这个frame的宽度, 默认值是300
- heigth: 以CSS像素格式, 或以像素格式, 或以百分比格式指定的frame的高度, 默认值是150
- frameborder: 值为1(默认值)时, 显示此边框的框架, 值为0时移除边框, 此属性已不赞成使用, 请使用CSS属性border代替
我们根据这个iframe的属性来设置iframe标签:
此时就可以展示bing的网页嵌套内容
随后我们设置input标签, 设置type为button模, 然后里面使用JS的onclick方法, 来触发点击切换网页的功能, 在onclick中我们设置函数, function upSearch(url)来触发:
<script> function upSearch(url) { jQuery("#ifr").attr("src",url); } </script>
此处使用的JS的jQuery框架, 也就是通过jQuery来获取到这个展示嵌套页面的iframe标签, 然后通过attr方法来获取到iframe标签的属性, 我们先来看一下attr方法:
第一个输入src, 来表示获取iframe标签的src属性, 然后第二个参数传入对应的url.
随后的四个input标签里面都设置onclick来调用这个function来更改iframe中的src地址, 以此来更改嵌套的页面内容.
表白墙
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表白墙</title> <script src="jquery.min.js"></script> </head> <body> <div style="width: 100%; text-align: center;"> <h2>表白墙</h2> 谁 : <input id="userName"> <p></p> 对谁 : <input id="toUserName"> <p></p> 说什么 :<input id="msg"><p></p> <input type="button" value="提交" onclick="mySub()"> <div id="div_AllMsg"> </div> </div> <script> function mySub() { var input_userName = jQuery("#userName"); var input_toUserName = jQuery("#toUserName"); var input_msg = jQuery("#msg"); if (input_userName.val().trim() == "") { alert("请输入您的名字!!"); input_userName.focus(); return; } if (input_toUserName.val().trim() == "") { alert("请输入对方的名字!!"); input_toUserName.focus(); return; } if (input_msg.val().trim() == "") { alert("请输入信息!!"); input_msg.focus(); return; } jQuery("#div_AllMsg").append(input_userName.val() + " 对 " + input_toUserName.val() + "说了:" + input_msg.val() + <p></p>); } </script> </body> </html>
首先设置三个输入框, 设置好对应的id, 以便于后面去获取这个输入的值.
随后设置一个button按钮, 然后通过内嵌JS语句, onclick来触发mySub()方法, 这个方法
<script> function mySub() { var input_userName = jQuery("#userName"); var input_toUserName = jQuery("#toUserName"); var input_msg = jQuery("#msg"); if (input_userName.val().trim() == "") { alert("请输入您的名字!!"); input_userName.focus(); return; } if (input_toUserName.val().trim() == "") { alert("请输入对方的名字!!"); input_toUserName.focus(); return; } if (input_msg.val().trim() == "") { alert("请输入信息!!"); input_msg.focus(); return; } jQuery("#div_AllMsg").append(input_userName.val() + " 对 " + input_toUserName.val() + "说了:" + input_msg.val() + <p></p>); } </script>
里面通过JQuery框架, 通过id, 来获取前面输入框对象. 随后检查这个输入的值是否为空, 这里面使用trim()方法来去除两边的空格.
随后使用focus()方法, 将光标指定到没有输入信息的行.检查三个输入是否为空之后, 使用jQuery获取到div标签, 然后在里面添加输入的信息, 以展示出来.
