第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后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客： 达叔小生
如对本文有疑问， 点击进行留言回复！！
解决idea中出现“illegal character U+200B” 问题
荐 为什么加了@Transactional注解，事务没有回滚？
Attribute ‘sklearn.linear_model._logistic.LogisticRegression.multi_class‘ must be explicitly set to
Java/Python实现 LeetCode剑指Offer 14-I.剪绳子（动态规划）
网友评论