黑马程序员技术交流社区

标题: 【石家庄校区】第三章 JS篇 [打印本页]
作者: 玩玩    时间: 2017-11-19 15:06
标题: 【石家庄校区】第三章 JS篇
本帖最后由 小石姐姐 于 2017-11-20 15:05 编辑

第三章 JS篇* alert:页面弹框* console:输出* log:记录* click:鼠标单击* ondbclick:鼠标双击* mouseover:鼠标移入* placeholder:占位符* interval:时间间隔* script:剧本* confirm:确定,批准* prompt:促使; 引起* location:位置
```定义对象
    var person = {                name:"张三",                age:14,                gender:'女'                }
```定义方法(函数)
    function 方法名(){}    function 方法名(name,id){}    function(){} //匿名方法,当作为方法的实际参数的时候使用    window.onload=function(){}
```方法的调用
    方法名();
```
```
//思路://1.给表单添加onsubmit事件//2.获取表单中的value属性的值//3.判断value是否等于""//4.如果等于""弹出提示框，返回false,否则返回true//注意onsubmit="return fn()"必须加return<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            function checkForm(){                var username=document.getElementById("username").value;                var password=document.getElementById("password").value;                var repassword=document.getElementById("repassword").value;                var email=document.getElementById("email").value;                if(!!!username){                    alert("用户名不能为空!");                    return false;                }else if(!password){                    alert("密码不能为空!");                    return false;                }else if(repassword!=password){                    alert("密码不一致!")                    return false;                }else if(!/123@qq.com/.test(email)){                    alert("邮箱错误")                    return false;                }                return true;            }        </script>    </head>    <body >        <form action="">            <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />            <input type="password" name="password" id="password" placeholder="请输入密码" /><br />            <input type="password" name="repassword" id="repassword" placeholder="请再次输入密码" /><br />            <input type="text" name="email" id="email" placeholder="请输入邮箱" /><br />            <button type="submit">注册</button>        </form>    </body></html>
```
```
思路:1.页面加载完毕后添加onload事件2.创建定时器3.在定时器中获取图片对象，并且修改src属性的值<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            var timer;            function play(){                var img=document.getElementsByName("tu")[0];                var num=1;                timer=setInterval(function(){                    img.src="tupian/"+num+".jpg";                    num++;                    if(num>5){                        num=1;                    }                },2000);            }            function stop(){                clearInterval(timer);            }        </script>    </head>    <body>        <img src="" alt="" name="tu" style="height: 200px;width: 200px;"/>        <button type="button">播放</button>        <button type="button">停止</button>    </body></html>
```
```
思路:1.页面加载完毕后添加onload事件2.创建setTimeout定时器3. 五秒后获取广告div    a.修改样式为可见    b.修改完后继续添加setTimeout定时器    c.五秒后获取广告div，修改样式为隐藏<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            div{                height:3000px;                width:100%;                background-image: url(img/1.jpg);            }            #ad{                height: 45px;                width:223px;                position: fixed;                top: 50px;                right: 50px;            }        </style>        <script type="text/javascript">            function show(){                var ad=document.getElementById("ad");                setTimeout(function(){                    ad.style.display="block";                    setTimeout(function(){                        ad.style.display="none";                    },1000);                },1000);            }        </script>    </head>    <body>        <div>            <div id="ad" style="display: none;">                <img src="img/logo.gif" alt="" height="45px width                    223px"/>            </div>        </div>    </body></html>
```
```
返回:history.back()=history.go(-1)前进:history.forward()=history.go(1)
```





欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2