js的几个作用;
1.验证表单
2.动态修改CSS
3.控制元素属性
img、src
4. 1)获取元素 2)控制元素
js常用事件:
1.onblur:失去焦点,
2.onfocus:获取焦点,
3.onclick:单击,
4.ondblclick:双击,
5.onchange:变化时触发,
6.onload:页面加载完成时
7.onsubmit: 表单提交时 */
8..onmousemove 鼠标移动
1.value 属性: 对于除了单选框,复选框以外的表单元素有用
input=text password email date datetime_local url....
2.单选框,复选框 checked==true被选中,checked==false未被选中
图片轮播:
两张转换:
function changeimg(){
alert("切换");
//获取img标签,控制他的src
/* var img=document.getElementById("img1");
img.src="./images/02.png"; */
}
function start(){
setInterval(changeimg,1000);
}
多张轮播图:
var i=0; //设置循环
function changeimg(){
var img=document.getElementById("img1");
var imgs=["1.jpg","2.jpg","timg.jpg"]; //放入数组
var len=imgs.length;
if(i==len){ i=0; } img.src=imgs[i]; //循环轮播
i++;
}
setInterval(changeimg,2000); // 轮播时间
事件坐标:
var div2=document.getElementById("div1");
//onmousemove鼠标移动
div2.onmousemove=function(event){
//整个页面内鼠标路过的坐标,绝对位置
console.log("x",event.clientX);
console.log("Y",event.clientY);
//div范围内鼠标路过的坐标,相对位置
console.log("offsetx",event.offsetX);
console.log("offsetY",event.offsetY);
键盘事件(阻止右键):
<script type="text/javascript">
window.onload=function(){
document.onkeydown=function(event){
console.log(event.keyCode);
}
}
</script>
右键菜单:
<style type="text/css">
ul{
list-style: none;
border: 1px solid #FF0000;
width: 150px;
height: 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
//系统加载时,先把ul隐藏
var ul1=document.getElementById("ul1")
ul1.style.display="none";
//先阻止右键
document.oncontextmenu=function (event){
//alert("用户触发右键菜单功能")
event.preventDefault();//阻止了右键菜单功能
ul1.style.display="block";
}
}
</script>
</head>
<body>
<ul id="ul1">
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
全选题:
<script type="text/javascript">
function selectAll(){
var chkall=document.getElementById("chkall");
var chkones=document.getElementsByName("chkone");
var chkalld=chkall.checked;
//单选按钮的状态==全选按钮的状态
for(var a=0;a<chkones.length;a++){
chkones[a].checked=chkalld;
}
}
//单选按钮
function chkOne(){
var chkall=document.getElementById("chkall");
var chkones=document.getElementsByName("chkone");
//设置变量,接住按钮选中的状态
var flag=true;
//循环中只要有一个单选状态为false,及跳出循环,全选按钮的状态及为false,
//反之,循环中没有单选状态为false时,全选按钮的状态及为true;
for (var i = 0; i < chkones.length; i++) {
if( chkones[i].checked==false){
flag=false;
break;
}
}
chkall.checked=flag;
}
</script>
</head>
<body>
<form>
<input type="checkbox" name="chkall" id="chkall" onclick="selectAll()"/>全选
<table width="100%" border="1" align="center" bordercolor="#dadada">
<tr align="center">
<td width="44" height="25" valign="middle">选择</td>
<td width="98" height="25" valign="middle">姓名</td>
<td width="132" height="25" valign="middle">证件类型</td>
</tr>
<tr align="center">
<td width="44" height="25" valign="middle">
<input type="checkbox" name="chkone" value="1" onclick="chkOne()"/></td>
<td width="98" height="25" valign="middle">用户1</td>
<td width="132" height="25" valign="middle">1</td>
</tr>
<tr align="center">
<td width="44" height="25" valign="middle">
<input type="checkbox" name="chkone" value="2" onclick="chkOne()"/></td>
<td width="98" height="25" valign="middle">用户2</td>
<td width="132" height="25" valign="middle">1</td>
</tr>
</form>
</body>
</html>