第85节:Java中的JavaScript
第85节:java中的javascript
复习一下css:
选择器的格式:
元素选择器:元素的名称{}
类选择器:. 开头
id选择器:# id选择器
后代选择器: 选择器1 选择器2
子元素选择器:选择器1 > 选择器2
选择器分组: 选择器1,选择器2,选择器3{}
属性选择器:选择器[属性名称='属性值']
盒子模型:
内边距:盒子内的距离
边框:盒子的边框
外边距: 盒子和盒子之间的距离
轮播图
自动播放:每隔3秒切换,切换图片,
// 点击弹框 // 确定事件,点击事件 // 通过事件定义函数 // 在函数里定义操作页面元素,做一些交互的操作 <script> function d(){ // alert("点击了"); // 获取div var div = document.getelementbyid("div1"); div.innerhtml = "<font color='red'> 内容 </font>"; } </script> <body> <input type="button value="点我" onclick="d()"/> <div id = "div1"> 这里是达叔小生 </div> </body>
// 点击切换图片 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> function changeimg(){ // alert("要切换了") var img = document.getelementbyid("img1"); img.src = "../img/1.gif"; } </script> </head> <body> <input type="button" value="点击切换图片" onclick="changeimg()" /> <br /> <img src="../img/333.jpg" id="img1" /> </body> </html>
settimeout()
: 在指定的毫秒数后调用函数setinterval()
: 按照指定的周期来调用函数scrollto()
: 把内容滚动到指定的坐标scrollby()
: 按照指定的像素值来滚动内容resizeto()
: 把窗口的大小调整到指定的宽度和高度resizesby()
: 按照指定的像素调整窗口的大小prompt()
: 显示可提示用户输入的对话框open()
: 打开一个新的浏览器窗口moveto()
: 把窗口的左上角移动到一个指定的坐标moveby()
: 可相对窗口的当前坐标把它移动指定的像素focus()
: 把键盘焦点给予一个窗口
setinterval()
方法按照指定的周期来调用函数,方法会不停地调用函数,直到clearinterval()
被调用或者窗口被关闭,
<html> <body> <input type="text" id="clock" size="20"/> <script language=javascript> var int = self.setinterval("clock()", 50) function clock(){ var t = new date() document.getelementbyid("clock").value } </script> <button onclick="int=window.clearinterval(int)"> stop</button> </body> </html>
定时器
// 技术分析 function test(){ console.log("调用了"); } // setinterval("test()", 2000); 这个函数会循环,定时2秒后,这个函数会重新被调用,一直循环。 // settimeout("test()", 2000); 这个函数被用了,就不再执行了
取消操作,alert()
显示一段消息,blur()
把键盘焦点从顶层窗口移开,clearinterval()
取消由setinterval()
设置的timeout
,cleartimeout()
取消由settimeout()
方法设置的timeout
。
setintervale()
参数: mode 参数为要调用的函数,或是执行代码串 millisec 参数为调用code之间的时间间隔
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> function test(){ console.log("setinterval"); } // setinterval("test()",2000); // settimeout("test()",2000); var timerid; function startdinshiqi(){ // timerid = setinterval("test()",2000); timerid = settimeout("test()",3000); } function stopdingshiqi(){ // clearinterval(timerid); cleartimeout(timerid); } </script> </head> <body> <input type="button" value="开启定时器" onclick="startdinshiqi()" /><br /> <input type="button" value="取消定时器" onclick="stopdingshiqi()"/><br /> </body> </html>
图片自动轮播:
// 会被显示在状态栏 <html> <head> <script type="text/javascript"> function load(){ window.status = "page" } </script> </head> <body onload="load()"> </body> </html>
文件加载完成事件onload,事件触发
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> var index = 0; function changeimg(){ var img = document.getelementbyid("img1"); //当前要切换到第几张图片 var curindex = index%3 + 1; img.src="../img/"+curindex+".jpg"; //每切换完,索引加1 index = index + 1; } function init(){ setinterval("changeimg()",1000); } </script> </head> <body onload="init()"> <img src="../img/1.jpg" width="100%" id="img1"/> </body> </html>
显示和隐藏
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> // var img = document.getelementbyid("img1"); function hideimg(){ var img = document.getelementbyid("img1"); img.style.display = "none"; } function showimg(){ var img = document.getelementbyid("img1"); img.style.display = "block"; } </script> </head> <body> <input type="button" value="显示" onclick="showimg()" /> <input type="button" value="隐藏" onclick="hideimg()" /><br /> <img src="../img/1.gif" id="img1" /> </body> </html>
setinterval
:每隔多少毫秒执行一次settimeout
:多少毫秒后执行一次clearinterval
和cleartimeout
img.style.display=block
和img.style.display=none
定时广告:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> function init(){ settimeout("showad()",3000); } function showad(){ //获取要操作的img var img = document.getelementbyid("img1"); //显示广告 img.style.display = "block"; //再开启定时器,关闭广告 settimeout("hidead()",3000); } function hidead(){ //获取要操作的img var img = document.getelementbyid("img1"); //隐藏广告 img.style.display = "none"; } </script> </head> <body onload="init()"> <img id="img1" src="../img/555.jpg" width="100%" style="display: none;"/> </body> </html>
表单效果
onblur 元素失去焦点 onchange 域的内容被改变 onfocus 元素获取焦点
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 引入外部的js文件 --> <script type="text/javascript" src="../js/regutils.js" ></script> <script> function showtips(spanid,msg){ var span = document.getelementbyid(spanid); span.innerhtml = msg; } function checkusername(){ var uvalue = document.getelementbyid("username").value; var span = document.getelementbyid("span_username"); if(uvalue.length < 6){ span.innerhtml = "<font color='red' size='2'>太短</font>"; return false; }else{ span.innerhtml = "<font color='red' size='2'>可用</font>"; return true; } } /* 密码校验 */ function checkpassword(){ var upass = document.getelementbyid("password").value; var span = document.getelementbyid("span_password"); if(upass.length < 6){ span.innerhtml = "<font color='red' size='2'>太短</font>"; return false; }else{ span.innerhtml = "<font color='red' size='2'>够用</font>"; return true; } } /* 确认密码校验 * */ function checkrepassword(){ var upass = document.getelementbyid("password").value; var urepass = document.getelementbyid("repassword").value; var span = document.getelementbyid("span_repassword"); if(upass != urepass){ span.innerhtml = "<font color='red' size='2'>两次密码不一致</font>"; return false; }else{ span.innerhtml = ""; return true; } } /* 校验邮箱 * */ function checkmail(){ var umail = document.getelementbyid("email").value; var flag = checkemail(umail); var span = document.getelementbyid("span_email"); //对邮箱输入进行校验 if(flag){ span.innerhtml = "<font color='red' size='2'>可用</font>"; return true; }else{ span.innerhtml = "<font color='red' size='2'>邮箱格式貌似有问题</font>"; return false; } } function checkform(){ var flag = checkusername() && checkpassword() && checkrepassword() && checkmail(); return flag; } </script> </head> <body> <form action="../555.html" onsubmit="return checkform()" > 用户名:<input type="text" id="username" onfocus="showtips('span_username','用户名长度不能小于6')" onblur="checkusername()" onkeyup="checkusername()" /><span id="span_username"></span><br /> 密码:<input type="password" id="password" onfocus="showtips('span_password','密码长度不能小于6')" onblur="checkpassword()" onkeyup="checkpassword()"/><span id="span_password"></span><br /> 确认密码:<input type="password" id="repassword" onfocus="showtips('span_repassword','两次密码必须一致')" onblur="checkrepassword()" onkeyup="checkrepassword()" /><span id="span_repassword"></span><br /> 邮箱:<input type="text" id="email" onfocus="showtips('span_email','邮箱格式必须正确')" onblur="checkmail()" /><span id="span_email"></span><br /> 手机号:<input type="text" id="text" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
表单提交规则
https://github.com/huangguangda/tools/blob/master/regutils.js
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> function showtips(spanid,msg){ var span = document.getelementbyid(spanid); span.innerhtml = msg; } function checkusername(){ var uvalue = document.getelementbyid("username").value; var span = document.getelementbyid("span_username"); if(uvalue.length < 6){ span.innerhtml = "太短啦!" return false; }else{ span.innerhtml = "够用!" return true; } } function checkform(){ var flag = checkusername(); return flag; } </script> </head> <body> <form action="../555.html" onsubmit="return checkform()"> 用户名:<input type="text" id="username" onblur="checkusername()" onfocus="showtips('span_username','用户名长度不能小于6位')" /><span id="span_username"></span> <br /> <input type="submit" value="注册" /> </form> </body> </html>
引入文件
<script src="js文件路径" type="text/javascript" />
ondblclick: 当用户双击某个对象时调用的事件 onerrror: 在加载文档或图像时发生错误 onfocus: 元素获得焦点 onkeydown: 某个键盘按键被按下 onkeypress: 某个键盘按键被按下并松开 onkeyup: 某个键盘按键被松开 onload: 一张页面或一副图像完成加载 onmousedown: 鼠标按钮被按下 onmousemove: 鼠标被移动 onmouseout: 鼠标从某元素移开 onmouseover: 鼠标移到某元素之上 onmouseup: 鼠标按键被松开
表格隔行颜色
<tr> <td> <input type="checkbox"/> </td> <td><a href="#">修改</a> | <a href="#">删除</a></td> </tr>
<tr bgcolor="red"> </tr> <body onload="init()"> <table border="1px" width="600px" id="tab"> function init(){ var tab = document.getelementbyid("tab"); }
table对象 table对象代表一个html表格,<table>标签 cells[] 返回包含表格中所有单元格的一个数组 // 所有单元格 rows[] 返回包含表格中所有行的一个数组 tbodies[] 返回包含表格中所有tbody的一个数组
表格全选和全不选
getelementbyid()方法 getelementbyid()方法返回带有指定id的元素
var element = document.getelementbyid("tag");
appendchild(node): 插入新的子节点 removechild(node):删除子节点 innerhtml: 节点元素的文本值 parentnode:节点的父节点 childnodes:节点元素的子节点 attributes:节点的属性节点
getelementbyid(): 返回带有指定id的元素 getelementsbytagname(): 返回包含带有指定标签名称的所有元素的节点列表 getelementsbyclassname(): 返回包含带有指定类名的所有元素的节点列表 appendchild(): 把新的子节点添加到指定节点 removechild(): 删除子节点 replacechild():替换子节点 insertbefore(): 在指定子节点前面插入新的子节点 createattribute(): 创建属性节点 createelement(): 创建元素节点 createtextnode(): 创建文本节点 getattribute(): 返回指定的属性值 setattribute(): 把指定属性设置值
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img src="../img.gif" /> <p>文本</p> </body> </html>
省市联动
<select> <option></option> <option></option> <option></option> </select>
dom:
document object model html dom定义了访问和操作的html文档的标准 dom是标准,定义了访问html和xml文档的标准 dom是 document object model 文档对象模型的缩写
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> function dianwo(){ var div = document.getelementbyid("div1"); //创建元素节点 var p = document.createelement("p"); // <p></p> //创建文本节点 var textnode = document.createtextnode("文本内容");// 文本内容 //将p 和文本内容关联起来 p.appendchild(textnode); // <p>文本</p> //将p添加到目标div中 div.appendchild(p); } </script> </head> <body> <input type="button" value="点我" onclick="dianwo()" /> <div id="div1"> </div> </body> </html>
选择城市
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> var provinces = [ ["深圳市","东莞市","惠州市","广州市"], ["长沙市","岳阳市","株洲市","湘潭市"], ["厦门市","福州市","漳州市","泉州市"] ]; function selectprovince(){ var province = document.getelementbyid("province"); //得到当前选中的是哪个省份 //alert(province.value); var value = province.value; //从数组中取出对应的城市信息 var cities = provinces[value]; var cityselect = document.getelementbyid("city"); //清空select中的option cityselect.options.length = 0; for (var i=0; i < cities.length; i++) { var citytext = cities[i]; var option1 = document.createelement("option"); //创建城市文本节点 var textnode = document.createtextnode(citytext) ; //将option节点和文本内容关联起来 option1.appendchild(textnode); // 添加到城市select中 cityselect.appendchild(option1); } } </script> </head> <body> <!--选择省份--> <select onchange="selectprovince()" id="province"> <option value="-1">--请选择--</option> <option value="0">广东省</option> <option value="1">湖南省</option> <option value="2">福建省</option> </select> <!--选择城市--> <select id="city"></select> </body> </html>
案例:
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script> function selectone(){ var leftselect = document.getelementbyid("leftselect"); var options = leftselect.options; //找到右侧的select var rightselect = document.getelementbyid("rightselect"); //遍历找出被选中的option for(var i=0; i < options.length; i++){ var option1 = options[i]; if(option1.selected){ // 将选中的元素添加到右边的select中就可以 rightselect.appendchild(option1); } } } //将左边所有的商品移动到右边 function selectall(){ // 获取左边select中被选中的元素 var leftselect = document.getelementbyid("leftselect"); var options = leftselect.options; //找到右侧的select var rightselect = document.getelementbyid("rightselect"); //遍历找出被选中的option for(var i=options.length - 1; i >=0; i--){ var option1 = options[i]; rightselect.appendchild(option1); } } </script> </head> <body> <table border="1px" width="400px"> <tr> <td>分类名称</td> <td><input type="text" value="手机数码"/></td> </tr> <tr> <td>分类描述</td> <td><input type="text" value="手机数码"/></td> </tr> <tr> <td>分类商品</td> <td> <!--左边--> <div style="float: left;"> 已有商品<br /> <select multiple="multiple" id="leftselect" ondblclick="selectone()"> <option></option> <option></option> <option></option> <option></option> </select> <br /> <a href="#" onclick="selectone()"> >> </a> <br /> <a href="#" onclick="selectall()"> >>> </a> </div> <!--右边--> <div style="float: right;"> 未有商品<br /> <select multiple="multiple" id="rightselect"> <option></option> <option></option> <option></option> <option></option> </select> <br /> <a href="#"> << </a> <br /> <a href="#"> <<< </a> </div> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="提交"/> </td> </tr> </table> </body> </html>
结言
好了,欢迎在留言区留言,与大家分享你的经验和心得。
感谢你学习今天的内容,如果你觉得这篇文章对你有帮助的话,也欢迎把它分享给更多的朋友,感谢。
达叔小生:往后余生,唯独有你
you and me, we are family !
90后帅气小伙,良好的开发习惯;独立思考的能力;主动并且善于沟通
简书博客: 达叔小生
结语
- 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
- 小礼物走一走 or 点赞`
上一篇: 荣耀、微软全球合作:MagicBook笔记本可预装Win10
下一篇: docker 数据管理
推荐阅读