JS 篇（1）

最新推荐文章于 2021-11-09 18:37:01 发布

Dawn___

最新推荐文章于 2021-11-09 18:37:01 发布

阅读量426

点赞数

分类专栏：学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/Dawn___/article/details/60585555

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

百度换图

（点击图片，更换背景)

    <!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: 150px;
    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="images/1.jpg" alt="" width="150" id="pic1">
    <img src="images/2.jpg" alt="" width="150" id="pic2">
    <img src="images/3.jpg" alt="" width="150" id="pic3">
    </div>
    </body>
    </html>

登录界面

这里写图片描述

html

    <script type="text/javascript">
    window.onload = function(){
    var login = document.getElementById("login");
    var mask = document.getElementById("mask");
    var box = document.getElementById("box");
    login.onclick = function(){
    mask.style.display="block";
    box.style.display="block";
    }
    //事件源 span  ×
    var close = document.getElementById("close_all");
    close_all.onclick = function(){
    //单引号双引号没有区别
    mask.style.display = 'none';
    box.style.display = "none";
    }
    }
    </script>
    </head>
    <body>
    <!--style放到mask里-->
    <!--弹出登录框-->
    <div id="mask"></div>
    <div id="box" >
    <span id="close_all">×</span>
    </div>

css

/*弹出登录框*/
#mask {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: fixed;
    top:0;
    left: 0;
    z-index: 999;
    display: none;
}
#box {
    width: 400px;
    height: 250px;
    background-color: #fff;
    position: fixed;
    top: 50%;
    left: 50%;
    margin:-125px 0 0 -200px;
    z-index: 1000;
    display: none;
}
#box span {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 15px;
    height: 15px;
    font-size: 15px;
}
/*弹出登录框结束*/

1.内边距会影响盒子大小
2.行内元素尽量不用上下的margin和padding
继承的宽给padding不会撑开盒子（宽度会继承，高度不会继承）

3.行内式可以直接在button里面写，如下：

    <div style="color:red;">123</div>
    <button onclick="alert('你好吗')">点击我</button>

一般情况下单双引号是一样的，但是出线了包裹情况，我们一般采取的是外双内单或外单内双的格式

    <a href=" javascript:;"></a>
    <a href=" javascript:void(0);"></a>

轮播图的三角，小的12345或者tab栏可以切换的js特效

*内嵌式：*

    <script type="text/javascript">  </script>

（可以放到页面中的任何地方）

外链式(单独写一个文件）：

    <script src="xx.js" type="text/javascript"></script>

这对标记之间不能写任何东西

window.onload = function(){}一个文件里面只能写一次，因为只能有一个入口函数

行内式和内嵌式的综合

    <button onclick="fun();">点击我</button>
    <script>
    function fun(){
    alert(12121212);
    }
    </script>

4.js的数据类型分为：字符型，数值型，布尔型，null ,undefined
js是一种弱数据类型，js 的变量你给什么值他就是什么数据类型。
5.var a=b=c=9;等同于 var a=9; b=9; c=9;其中，a是局部变量，b和c 是全局变量。
var a=10，b=20;等同于 var a=10;var b=20;
6.数字+undefined=Nan
7.arguments是用来存储实参的
8.变量不能加引号，加引号就当字符来看了
9.overflow:hidden详解：
　overflow:hidden除了隐藏溢出，还有清除浮动这个含义。提到清除浮动，我们会想到clear:both，但是对于“浮动”这个词到底包含什么样的含义呢？我们下面来详细的阐述一下。

    #a{ 
    width:100px; 
    height:100px;
    background:pink; 
    } 
    #b{ 
    float:left; 
    width:200px; 
    height:200px;
    background:red;
    }

鼠标经过更换图片

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{margin:0;padding:0;}
    ul {list-style:none;}
    #box {
    height: 70px;
    width: 360px;
    padding-top: 360px;
    border: 1px solid #ccc;
    margin: 100px auto;
    overflow: hidden;
    background: url(images/01big.jpg) no-repeat;
    }
    #box ul {
    /*孩子浮动了，要清除浮动，要不然没有高*/
    overflow: hidden;
    border-top:1px solid #ccc;
    }
    #box li{
    float: left;
    }
    </style>
    <script>
    // 相同部分：鼠标经过，背景更换图片，可以放到一个函数里，重复使用即可
    // 事件源  li  事件  鼠标经过   事件处理程序  box 更换背景
    var li02 = document.getElementById("li02");
    var box = document.getElementById("box");
    li02.onmouseover = function(){
    box.style.backgroundImage = "url(images/02big.jpg)";
    }
    </head>
    <body>
    <div id="box">
    <ul>
    <li><img src="images/01.jpg" alt=""></li>
    <li><img src="images/02.jpg" alt=""></li>
    <li><img src="images/03.jpg" alt=""></li>
    <li><img src="images/04.jpg" alt=""></li>
    <li><img src="images/05.jpg" alt=""></li>
    </ul>
    </div>
    </body>
    </html>

补充：overflow:hidden这个属性的作用是隐藏溢出，给a加上这个属性后，b 的宽高自动的被隐藏掉了。另外，我们将a这个div的高度值删除后，我们发现，a的高度被b 这个div的高度值给撑开了。我们原先的理解是，在一个平面上的浮动，但是通过尝试，我们发现，这不仅仅是一个平面上的浮动，而是一个立体的浮动。也就是说，当b这个div加上浮动这个属性的时候，在显示器的侧面，它已经脱离了a这个div，也就是说，此时的b 的宽高是多少，对于已经脱离了的a来说，都是不起作用的。当我们给a这个div加上overflow:hidden这个属性的时候，其中的b等等带浮动属性的div的在这个立体的浮动已经被清除了。这就是overflow:hidden这个属性清除浮动的准确含义。当我们没有给a这个div设置高度的时候，b 这个div的高度，就会撑开box这个div，而在另一个方面，我们要注意到的是，当我们给a这个div加上一个高度值，那么无论b 这个div的高度是多少，a这个高度都是我们设定的值。而当b 的高度超过a的高度的时候，超出的部分就会被隐藏。

上面代码只是li02的变换，写满5张图的变化极为繁琐，下面我们采用js来优化代码

    <script>
    window.onload = function(){
    function fn(liid,bg) {  //封装函数 参数的传递
    var obj = document.getElementById(liid);//会变化的一定通过变量更改
    var box = document.getElementById("box");
    obj.onmouseover = function(){
    box.style.backgroundImage = bg;
    }
    }
    fn("li02","url(images/02big.jpg)");
    }
    </script>

$id函数

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    div {
    width: 100px;
    height: 100px;
    background-color: pink;
    }
    </style>
    </head>
    <body>
    <div id="demo"></div>
    <div id="text"></div>
    <script>
    function $(id){
    return document.getElementById(id);
    }
    $("demo").style.backgroundColor = 'purple';
    </script>
    </body>
    </html>

查询中奖

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script>
    window.onload = function(){
    function $(id){return document.getElementById(id);}
    $("btn").onclick = function(){
    if($("txt").value == "啊啊啊")
    alert("中奖");
    else
    alert("失败");
    }
    }
    </script>
    </head>
    <body>
    <input type="text" id="txt" value="请输入"><button id="btn">点击</button>
    </body>
    </html>

Dawn___

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 篇（1）

百度换图（点击图片，更换背景) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } body { background: url(im
复制链接

扫一扫