专栏首页前端知识分享第22天:js改变样式效果

第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部分

百度换肤实例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>百度换肤效果</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         body{
12             background: url("images/1.jpg") top center;
13         }
14         .box{
15             height: 200px;
16             background: rgba(255,255,255,.3);
17             text-align: center;
18             padding-top:50px;
19         }
20         .box img{
21             cursor: pointer;
22         }
23     </style>
24     <script>
25         window.onload=function(){
26             var pic1=document.getElementById("pic1");
27             var pic2=document.getElementById("pic2");
28             var pic3=document.getElementById("pic3");
29             pic1.onclick=function(){
30                 document.body.style.backgroundImage="url(images/1.jpg)";
31             }
32             pic2.onclick=function(){
33                 document.body.style.backgroundImage="url(images/2.jpg)";
34             }
35             pic3.onclick=function(){
36                 document.body.style.backgroundImage="url(images/3.jpg)";
37             }
38         }
39     </script>
40 </head>
41 <body>
42 <div class="box">
43     <img src="images/1.jpg" alt="" width="150" id="pic1">
44     <img src="images/2.jpg" alt="" width="150" id="pic2">
45     <img src="images/3.jpg" alt="" width="150" id="pic3">
46 </div>
47 </body>
48 </html>

运行效果:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第121天:移动端开发基本知识

    注意lang=“zh-CN”表示网页为中文,如果是英文则为lang=“en-CN”。

    半指温柔乐
  • 第82天:jQuery中prop()和attr()的区别

     这个例子里<a>元素的DOM属性有“href、target和class",这些属性就是<a>元素本身就带有的属性,也是W3C标准里就包含有这几个属性,或者说在...

    半指温柔乐
  • 第112天:javascript中函数预解析和执行阶段

    关于javascript中的函数:    1、预解析:把所有的函数定义提前,所有的变量声明提前,变量的赋值不提前    2、执行 :从上到下执行,但有例外(se...

    半指温柔乐
  • 熊市应该干什么?

    大熊市,币价跌跌不休。很多人已经懒的看价格了,更懒的聊币圈投资了,很多微信群也成了死群,更多的人就该干啥干啥了,等牛市来了再说。

    凌帅出口
  • Kotlin基础之委托

    委托模式是软件设计模式中的一项基本技巧。在委托模式中,有两个对象参与处理同一个请求,接受请求的对象将请求委托给另一个对象来处理。 类委托 委托模式是替换继承的较...

    xiangzhihong
  • 【数据科学家】当今世界最牛的25位顶尖大数据科学家

    引言 在大数据技术飞速发展的今天,谁才是我们大数据科研与工业界中最有威望的科学家呢?下面我们来进行梳理,共罗列了25位当今世界,无论是在学术与工业界都产生巨大影...

    陆勤_数据人网
  • 当今世界最NB的25位大数据科学家

    引言 在大数据技术飞速发展的今天,谁才是我们大数据科研与工业界中最有威望的科学家呢?下面我们来进行梳理,共罗列了25位当今世界,无论是在学术与工业界都产生巨大影...

    小莹莹
  • 当今世界最NB的25位大数据科学家

    引言   在大数据技术飞速发展的今天,谁才是我们大数据科研与工业界中最有威望的科学家呢?下面我们来进行梳理,共罗列了25位当今世界,无论是在学术与工业界都产...

    顶级程序员
  • 当今世界最NB的25位大数据科学家

    用户1737318
  • 【膜拜大神】当今世界最牛的25位顶尖大数据科学家

    在大数据技术飞速发展的今天,谁才是我们大数据科研与工业界中最有威望的科学家呢?下面我们来进行梳理,共罗列了25位当今世界,无论是在学术与工业界都产生巨大影响的数...

    华章科技

扫码关注云+社区

领取腾讯云代金券