第22天：js改变样式效果

一、输出语句

1、alert:弹出警示框（用的非常少，用户体验不好）
完整写法：window.alert（“执行语句”）；
window对象，窗口，一般情况可省略
alert(123);

2、console控制台输出（用户看不见）
一般用于测试用
console.log();控制台输出，普通输出语句
console.warn();控制台警示
console.error();错误提示

3、document.write()；文档打印输出，直接在文档中显示
document文档对象，不可省略

获取对象方法：
document.getElementById("demo");

二、变量

1、变量名必须以字母、下划线、美元符号$开头
2、变量名中不能有空格
3、多个变量声明：var num=1,num=2,num=3;

4、变量分为全局变量和局部变量

全局变量：
1、在最外层声明的变量
2、在函数体内部，但是没有声明var的也是全局变量
局部变量：
在函数体内部声明的变量

局部变量优先于全局变量。函数若不调用，可跳过执行。

三、事件

事件三要素：事件源、事件、事件处理程序
事件源：要触发的对象
事件：鼠标事件
事件处理程序：发生了什么
事件源.事件=function(){事件处理函数}

隐藏事件：
display:none;隐藏了不占位置
visibility:hidden;隐藏占位置
overflow:hidden;隐藏超出的部分

入口函数：window.onload=function(){
内部放js代码
}//页面加载完后执行js部分

百度换肤实例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>百度换肤效果</title>

     <style>

         *{

             margin: 0;

             padding: 0;

         }

         body{

             background: url("images/1.jpg") top center;

         }

         .box{

             height: 200px;

             background: rgba(255,255,255,.3);

             text-align: center;

             padding-top:50px;

         }

         .box img{

             cursor: pointer;

         }

     </style>

     <script>

         window.onload=function(){

             var pic1=document.getElementById("pic1");

             var pic2=document.getElementById("pic2");

             var pic3=document.getElementById("pic3");

             pic1.onclick=function(){

                 document.body.style.backgroundImage="url(images/1.jpg)";

             }

             pic2.onclick=function(){

                 document.body.style.backgroundImage="url(images/2.jpg)";

             }

             pic3.onclick=function(){

                 document.body.style.backgroundImage="url(images/3.jpg)";

             }

         }

     </script>

 </head>

 <body>

 <div class="box">

     <img src="data:images/1.jpg" alt="" width="150" id="pic1">

     <img src="data:images/2.jpg" alt="" width="150" id="pic2">

     <img src="data:images/3.jpg" alt="" width="150" id="pic3">

 </div>

 </body>

 </html>

运行效果：

巴特西

第22天：js改变样式效果

最新文章

热门文章