web前端学习日记——DAY07(js交互编程)

今天针对javaScript交互式编程展开了学习，学习内容如下：

1.与html控件进行交互：

document.getElementById(id名)获取控件；

document.getElementById(id名).value获取控件值；

document.getElementById(id名).value=给定值设置控件值；

javascript 复制代码

function val(id) {
  return document.getElementById(id).value;
}

function setVal(id, val) {
  document.getElementById(id).value = val;
}

function doCale() {
  let n1 = parseFloat(val("n1"));
  let n2 = parseFloat(val("n2"));
  let op = val("op");
  
  switch (op) {
    case "+":
      setVal("result", n1 + n2);
      break;
    case "-":
      setVal("result", n1 - n2);
      break;
    case "*":
      setVal("result", n1 * n2);
      break;
    case "/":
      if (n2 == 0) {
        alert("除数不能为零");
      } else {
        setVal("result", n1 / n2);
      }
      break;
  }
}

2.innerHTML：获取标签中间的值，也可以设置值；

javascript 复制代码

<body>
<div id="x"><b>你好</b></div>
<button type="button" onclick="changeVal()">改变值</button>
<script>
function changeVal() {
//获取html标签开始和结束中间夹的内容
let v = document.getElementById("x").innerHTML;
//console.log(v);
//设置内容
if (v == "<b>你好</b>")
document.getElementById("x").innerHTML = "<b>再见</b>";
else
document.getElementById("x").innerHTML = "<b>你好</b>";
}
</script>
</body>

3.使用js改变css：

通过document.getElementById(id值).style.css属性名=改变的值；

用来改变对应的css样式：

javascript 复制代码

<style>
div {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
border: 1px solid red;
}
</style>
<body>
<div id="x" onmouseover="changeFontSize('30px')"
onmouseout="changeFontSize('16px')">
你好
</div>
<button type="button" onclick="hide()">隐藏</button>
<button type="button" onclick="show()">显示</button>
<script>
function changeFontSize(px){
document.getElementById("x").style.fontSize=px;
}
function hide(){
document.getElementById("x").style.display="none";
}
function show(){
document.getElementById("x").style.display="block";
}
</script>
</body>

通过document.getElementById.className="指定的类名"；

更改控件的类；

4.使用js改变控件的属性

javascript 复制代码

<style>
#x{
width: 200px;
height: 30px;
position: relative;
}
#p{
width: 200px;
height: 30px;
}
#im{
position: absolute;
right: 3px;
bottom: 2px;
}
#im:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="x">
<input type="password" id="p">
<img src="眼睛_隐藏.png" id="im" onmousedown="doDown()"
onmouseup="doUp()">
</div>
<script>
function doDown(){
document.getElementById("im").src="眼睛_显示.png";
document.getElementById("p").type="text";
}
function doUp(){
document.getElementById("im").src="眼睛_隐藏.png";
document.getElementById("p").type="password";
}
</script>
</body>

5.js常见的触发事件：

onclick:单击触发事件；

ondblclick：双击触发事件；

onmouseover：鼠标悬停触发事件；

onmouseout：鼠标移开触发事件；

onmousedown：鼠标按下触发事件；

onmouseup：鼠标抬起触发事件；

onblur：失去焦点触发事件；

onfocus：获取焦点触发事件；

onchange：文本域的值改变并失去焦点，下拉列表选项改变；

onkeydown：键盘按下；

onkeyup：键盘弹起；

onkeypress：键盘敲击；

onload：网页加载；

6.js定时器：

setTimeOut(操作，时间)；

setInterval(操作，时间)；

二者区别在于settimeout是在指定时间后执行一次而setInterval是在指定周期循环执行；

可使用clearinterval(e)清楚循环的事件；

7.日期对象

let 对象名 = new Date();

可通过日期对象的:

getFullYear()：获取年份；

getMonth()：获取月份；

getDate（）：获取日期；

getHours()：获取时；

getMinutes():获取分钟；

getSeconds（）:获取秒；

getDays()：获取星期；

8.location对象：
location.hostname;//主机名(ip地址)
location.port//端口号
location.protocol//访问协议
location.host//主机名:端口号
location.pathname//端口号后面的资源地址
location.href//整个url地址
可以通过修改location的 href属性来实现跳转；
location.assign()：也可以实现跳转，并且可回退；
location.replace()：跳转之后不能回退；
open()打开一个新的页面；
9.表单校验：

javascript 复制代码

<script>
function validate(){
//校验姓名不能为空
let nameVal=val("name");
if (nameVal.trim()==""){
html("nameres","姓名不能为空")
return;
}else{
html("nameres","")
}
//校验电话号码必须符合正则表达式
let telVal=val("tel");
let regx=/^1[3456789]\d{9}$/;
if (!regx.test(telVal)){
html("telres","电话号码不符合规则")
return;
}else{
html("telres","")
}
//校验单选按钮必须被选中
let genders=document.getElementsByName("gender");//获取到数组
let b=false;
for(let gender of genders){
if (gender.checked){//判断是否被选中
b=true;
break;
}
}
if (!b){
html("genderres","请选择性别")
return;
}else{
html("genderres","")
}
}
function val(id){
return document.getElementById(id).value;
}
function html(id,html){
document.getElementById(id).innerHTML=html;
}
function doCheckAll(obj){
//alert(obj.checked)
let inputs=document.getElementsByTagName("input");
for (let input of inputs){
if (input.type=="checkbox"){
input.checked=obj.checked;
}
}
}
</script>
</head>
<body>
<form>
<div>姓名:<input type="text" id="name">
<span id="nameres"></span>
</div>
<div>
电话:<input type="tel" id="tel">
<span id="telres"></span>
</div>
<div>
性别:
<input type="radio" name="gender" value="男">男
<input type="radio" name="gender" value="女">女
<span id="genderres"></span>
</div>
<div>
爱好:
<input type="checkbox" onclick="doCheckAll(this)">全选
<input type="checkbox">打球
<input type="checkbox">唱歌
<input type="checkbox">跳舞
</div>
<div><button type="button" onclick="validate()">提交</button></div>
</form>
</body>