0519

最新推荐文章于 2023-01-06 18:15:00 发布

ISOLATE_E

最新推荐文章于 2023-01-06 18:15:00 发布

阅读量188

点赞数

本文链接：https://blog.csdn.net/E_ISOLATE/article/details/90453626

版权

☆getElementsByClassName
getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

<button id="btn" class="btnlist" name="btninfo">按钮</button>
 var btn=document.getElementsByClassName("btnlist");
    console.log(btn[0]);

★getElementsByName
getElementsByName() 方法可返回带有指定名称的对象的集合。

<button id="btn1" class="btnlist" name="btninfo">按钮</button>
var btn2=document.getElementById("btn");
    console.log(btn2);

☆getElementById
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

    var btn2=document.getElementById("btn");
    console.log(btn2);

★ getElementsByTagName
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。

<button id="btn" class="btnlist" name="btninfo">按钮</button>
 var btn3=document.getElementsByTagName("button");
    console.log(btn3[0]);

<html>
<head>
<script type="text/javascript">
function getElements()
  {
  var x=document.getElementsByTagName("input");
  alert(x.length);
  }
</script>
</head>
<body>

<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()"
value="How many input elements?" />

</body>
</html>

☆querySelector
querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。

    var btn4=document.querySelector(".btnlist");
    console.log(btn4);

★querySelectorAll
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。

    var btn5=document.querySelectorAll("#btn");
    console.log(btn5);

☆parseFloat()
parseFloat() 函数可解析一个字符串，并返回一个浮点数。

<script>

document.write(parseFloat("10") + "<br>");
document.write(parseFloat("10.33") + "<br>");
document.write(parseFloat("34 45 66") + "<br>");
document.write(parseFloat(" 60 ") + "<br>");
document.write(parseFloat("40 years") + "<br>");
document.write(parseFloat("He was 40") + "<br>");

</script>

运行结果
10
10.33
34
60
40
NaN
★parseInt()
parseInt() 函数可解析一个字符串，并返回一个整数。

//我们将使用 parseInt() 来解析不同的字符串

document.write(parseInt("10") + "<br>");
document.write(parseInt("10.33") + "<br>");
document.write(parseInt("34 45 66") + "<br>");
document.write(parseInt(" 60 ") + "<br>");
document.write(parseInt("40 years") + "<br>");
document.write(parseInt("He was 40") + "<br>");
 
document.write("<br>");
document.write(parseInt("10",10)+ "<br>");
document.write(parseInt("010")+ "<br>");
document.write(parseInt("10",8)+ "<br>");
document.write(parseInt("0x10")+ "<br>");
document.write(parseInt("10",16)+ "<br>");

运行结果
10
10
34
60
40
NaN

10
10
8
16
16
☆charAt()
charAt()方法可返回指定位置的字符。

<script type="text/javascript">

var str="Hello world!"
document.write(str.charAt(1))

</script>

运行结果
e
将返回位置1的字符
★toUpperCase
toUpperCase() 方法用于把字符串转换为大写。

<script type="text/javascript">

var str="Hello World!"
document.write(str.toUpperCase())

</script>

☆substr()
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

<script type="text/javascript">

var str="Hello world!"
document.write(str.substr(3))

</script>

输出
lo world!

<script type="text/javascript">

var str="Hello world!"
document.write(str.substr(3,7))

</script>

输出
lo worl
★splice()
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

//在本例中，我们将创建一个新数组，并向其添加一个元素：
<script type="text/javascript">
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")
</script>

输出
George,John,Thomas,James,Adrew,Martin
George,John,William,Thomas,James,Adrew,Martin
☆push()
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

//在本例中，我们将创建一个数组，并通过添加一个元素来改变其长度：
<script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)

</script>

输出
George,John,Thomas
4
George,John,Thomas,James

★

pageX -= (block.offsetLeft + parseInt(ceng.style.width) / 2);

获取当前元素的偏移量 offsetLeft 左偏移 offsetTop 上偏移
☆parseInt(ceng.style.width)
parselint只取数值不取单位取该值的时候 width应为行内元素
把style中的width的设置值挪到行内（跟class名同行）
★

var bigleft = parseInt(this.style.width) - parseInt(ceng.style.width);
pageX = pageX <= 0 ? 0 : (pageX >= bigleft) ? bigleft : pageX;

判断当pageX小于等于0时令pageX取0
判断当pageX大于于等于0时令pageX取bigleft
☆

middleblock.onmouseenter = function () {}

onmouseenter 事件在鼠标指针移动到元素上时触发

 middleblock.onmouseleave = function () {}

onmouseenter 事件在鼠标指针离开元素上时触发
★自定义属性

<style>
background-image: url("./img/big1.jpg");
</style>
<div class="smalllist" data-middle="middle1.jpg" data-big="big1.jpg">
    <img src="./img/small1.jpg" alt=""/>
</div>

<script>
//获取当前元素的自定义属性
middleimage.src = "./img/" + this.getAttribute("data-middle");
//当图片设置为某块的背景图时的获取方式
bigblock.style.backgroundImage = "url(./img/" + this.getAttribute("data-big") + ")";

☆NaN
not a number
用来判断输入的是数字还是符号
★innerHTML
innerHTML属性可以设置或者返回指定元素的HTML内容

 if (this.innerHTML != ".") {
     txtval.value += this.innerHTML;
 }

☆
关于script计算器的代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border: 1px solid black;
            width: 300px;
            margin: auto;
            border-collapse: collapse;
        }

        td {
            width: 75px;
            border: 1px solid black;
        }

        td > input {
            width: 98.5%;
            height: 40px;
            text-align: right;
            font-size: 20px;
            outline: none;
        }

        td > button {
            width: 100%;
            height: 40px;
            font-size: 17px;
        }
    </style>
</head>
<body>
<table>
    <tr><td colspan="4"><input class="text" type="text" value="0"/></td></tr>
                          <!-- value=0 屏幕默认值为0-->
    <tr>
        <td colspan="2"><button class="btn">del</button></td>
        <td colspan="2"><button class="btn">c</button></td>
    </tr>
    <tr>
        <td><button class="btn">7</button></td>
        <td><button class="btn">8</button></td>
        <td><button class="btn">9</button></td>
        <td><button class="btn">*</button></td>
    </tr>
    <tr>
        <td><button class="btn">4</button></td>
        <td><button class="btn">5</button></td>
        <td><button class="btn">6</button></td>
        <td><button class="btn">/</button></td>
    </tr>
    <tr>
        <td><button class="btn">1</button></td>
        <td><button class="btn">2</button></td>
        <td><button class="btn">3</button></td>
        <td><button class="btn">-</button></td>
    </tr>
    <tr>
        <td><button class="btn">0</button></td>
        <td><button class="btn">.</button></td>
        <td><button class="btn">+</button></td>
        <td><button class="btn">=</button></td>
    </tr>
</table>
<script>
    /*
     * 1.获取所有的按钮
     * 2.点击的按钮  值给到文本框
     * 3.区分符号数字点
     * 4.处理屏幕上显示值的问题
     * 5.按符号+ - * / 清屏
     * */
    var btnlist = document.getElementsByClassName("btn");
//    获取文本框 文本框名 txtval 取集合里第0个
    var txtval = document.getElementsByClassName("text")[0];
    var res = [];
//    用空数组 存储 输入的值
    for (var i = 0; i < btnlist.length; i++) {
        btnlist[i].onclick =addclick;
        function addclick() {
            /*标签的文本值  innerHTML  innerText   */
            if (!isNaN(this.innerHTML) || this.innerHTML == ".")
//            如果是 数字和点的时候可以上屏幕 ||或者
            {
                if (txtval.value != "0")
//                字符串“0”
//                txtval.value获取值 当 value值不等于0的时候
                {
                    if (txtval.value.indexOf(".") != -1)
//                    indexof检测当前字符是否出现过 不等于-1 点已经出现过
                    {

                        if (this.innerHTML != ".")
//                        如果当前按的不是点 就拼接上去
                        {
                            txtval.value += this.innerHTML;
//                            +=拼接 不然只可以打一个数字
                        }
                    }
                    else
//                    没有点
                    {
                        txtval.value += this.innerHTML;

                    }
                }
                else
//                当value 值等于0的时候
                {
                    if (this.innerHTML == ".")
//              如果当前输入的值是点
                    {
                        txtval.value = "0" + this.innerHTML;
//                         则输出 0+点  即0.几
                    }
                    else {
                        txtval.value = this.innerHTML;
                        //   value的值等于0的时候 直接给值 覆盖
                    }
                }
            }
            else {
                //非数字
                switch (this.innerHTML) {
                    case "+":
                        save(this);
                        break;
                    case "-":
                        save(this);
                        break;
                    case "*":
                        save(this);
                        break;
                    case "/":
                        save(this);
                        break;
                    case "=":
                      res.push(txtval.value);
                        //计算表达式
                        //js里面运算表达式的  eval()
//                            res.join("")数组转化为表达式
//                        txtval.value = eval(res.join(""));
//                            把得到的值给value
                        console.log(res);
                            var result=eval(res.join(""));
                            if(result="Infinity"){
                                removeroradd("remove");

                            }
                        txtval.value=eval(res.join(""))=="Infinity"?"除数不能为0":eval(res.join(""));
//                      清空数组
                        res=[];
                        break;
                    case"del":
                        save(this);
                        break;
                    case"c":

                        txtval.value = "0";
                            res=[];
                            removeroradd("add");

                        break;
                }
            }
        }
    }
    //计算的方法
    function save(obj) {
     if(!isfuhao){
            res[res.length-1]=obj.innerHTML;



        }  
     else{
           res.push(txtval.value);//   存储值

           res.push(obj.innerHTML);//        存储运算符
//        不能写 this.innerHTML 函数中的当前对象是window 用 this 传给 function

           txtval.value = "0";//        按符号 清0
           isfuhao=false;
          }
        }
//关于C键清空的操作        
   function removeroradd(r){
        for (var i = 0; i < btnlist.length; i++) {
            if (r == "add") {
                btnlist[i].onclick = addclick;
            }
            else {
                if (btnlist[i].innerHTML != "c") {
                    btnlist[i].onclick = null;
                }
            }
        }

    }

    
</script>
</body>
</html>

★关于放大镜的代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            width: 350px;
            height: 510px;
            margin: auto;
            position: relative;
        }

        .middle {
            position: relative;
            border: 1px solid silver;
            overflow: hidden;
        }
        .small{
            position: relative;
            width: 350px;
            height: 110px;
            text-align: center;
            /*background-color: red;*/

        }
        .smalllist{
            display: inline-block;

            /*background-color: red;*/

            border: 2px solid transparent;
            width: 54px;
            height: 55px;
            margin: 10px 0px;

        }

        .hover_ceng {
            position: absolute;
            width: 220px;
            height: 250px;
            background: url("./img/bg.png");
            background-size: 4px 4px;
            z-index: 1;
            display: none;


        }
        .bigblock {
            position: absolute;
            left: 350px;
            top: 0;
            width: 350px;
            height: 400px;
            border: 1px solid silver;
            background-repeat: no-repeat;
            display: none;
            background-image: url("./img/big1.jpg");
        }
        .small > span {
            position: absolute;
            top: 15px;
            display: block;
            width: 20px;
            height: 50px;
            background: #d9d9d9;
            color: #717171;
            font-size: 20px;
            line-height: 50px;
            cursor: pointer;
        }
        .small > span:nth-child(1) {
            left: 0;
        }

        .small > span:nth-child(3) {
            right: 0;
        }
        .list {
            display: inline-block;
            width: 250px;
            text-align: left;
            overflow: hidden;
        }

        .list > ul {
            width: 500px;
            height: auto;
            overflow: hidden;
            transition: all .5s linear;
        }

        .list > ul > li {
            width: 250px;
            float: left;
            list-style: none;
        }

    </style>
</head>
<body>
 <div class="block">
    <div class="middle" style="width: 350px;height: 400px;">
        <div class="hover_ceng"style="width: 153.508px;height: 200px;"></div>
        <img id="middleimg" src="./img/middle1.jpg" width="100%" height="100%" alt=""/>

    </div>
     <div class="small">
         <span class="leftbtn"><</span>
         <div class="list">
             <ul class="ulmenu">
                 <li>
                     <div class="smalllist" data-middle="middle1.jpg"  data-big="big1.jpg"><img src="./img/small1.jpg" width="100%" height="100%" alt=""/></div>
                     <div class="smalllist" data-middle="middle2.jpg"  data-big="big1.jpg"><img src="./img/small2.jpg" width="100%" height="100%" alt=""/></div>
                     <div class="smalllist" data-middle="middle3.jpg"  data-big="big1.jpg"><img src="./img/small3.jpg" width="100%" height="100%" alt=""/></div>
                     <div class="smalllist" data-middle="middle4.jpg"  data-big="big1.jpg"><img src="./img/small4.jpg" width="100%" height="100%" alt=""/></div>
                 </li>
                 <li>
                     <div class="smalllist" data-middle="middle1.jpg"  data-big="big1.jpg"><img src="./img/small1.jpg" width="100%" height="100%" alt=""/></div>
                     <div class="smalllist" data-middle="middle2.jpg"  data-big="big1.jpg"><img src="./img/small2.jpg" width="100%" height="100%" alt=""/></div>
                     <div class="smalllist" data-middle="middle3.jpg"  data-big="big1.jpg"><img src="./img/small3.jpg" width="100%" height="100%" alt=""/></div>
                     <div class="smalllist" data-middle="middle4.jpg"  data-big="big1.jpg"><img src="./img/small4.jpg" width="100%" height="100%" alt=""/></div>
                 </li>
             </ul>
         </div>
         <span class="rightbtn">></span>
     </div>

     <div class="bigblock">

     </div>
</div>

<script>
    var smallblock=document.getElementsByClassName("smalllist");
    var middleimage = document.getElementById("middleimg");
    var middleblock = document.getElementsByClassName("middle")[0];
    var ceng=document.getElementsByClassName("hover_ceng")[0];
    var block = document.getElementsByClassName("block")[0];
//大图
    var bigblock = document.getElementsByClassName("bigblock")[0];
//左右滑动
    var leftbtn = document.getElementsByClassName("leftbtn")[0];
    var rightbtn = document.getElementsByClassName("rightbtn")[0];
    var ulmenu = document.getElementsByClassName("ulmenu")[0];

    var before=null;
//    小图遇到鼠标变红
    for(var i=0;i<smallblock.length;i++){
        smallblock[i].onmouseenter=function(){
            if(before)before.style.borderColor="transparent";
            this.style.borderColor="red";
            before=this;

//
            this.getAttribute("data-middle","")
            middleimage.src = "./img/" + this.getAttribute("data-middle");
            bigblock.style.backgroundImage = "url(./img/" + this.getAttribute("data-big") + ")";

        }
    }
//    小图对应中图 给元素添加自定义属性

    middleblock.onmouseenter=function(){
        this.style.cursor="move";
        ceng.style.display="block";
        bigblock.style.display = "block";


    }
    middleblock.onmouseleave = function () {
        ceng.style.display = "none";
        bigblock.style.display = "none";
    }

    middleblock.onmousemove = function (e){

        var pageX = e.pageX || e.clientX;
        var pageY = e.pageY || e.clientY;

        pageX -= (block.offsetLeft + parseInt(ceng.style.width) / 2);// 把左边的数减去右边的数的值赋给左边的数
        pageY -= (block.offsetTop + parseInt(ceng.style.height) / 2);
        var bigleft = parseInt(this.style.width) - parseInt(ceng.style.width);
        var bigtop = parseInt(this.style.height) - parseInt(ceng.style.height);
        pageX = pageX <= 0 ? 0 : (pageX >= bigleft) ? bigleft : pageX;
        pageY = pageY <= 0 ? 0 : (pageY >= bigtop) ? bigtop : pageY;
        ceng.style.left = pageX + "px";
        ceng.style.top = pageY + "px";
        bigblock.style.backgroundPosition = (-pageX * 2.28) + "px " + (-pageY * 2) + "px";
    }

    leftbtn.onclick = function () {
        ulmenu.style.marginLeft = "0px";
    }
    rightbtn.onclick = function () {
        ulmenu.style.marginLeft = "-250px";
    }

</script>
</body>
</html>

ISOLATE_E

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0519

☆getElementsByClassNamegetElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。<button id="btn" class="btnlist" name="btninfo">按钮</button> var btn=document.getElementsByClassName("bt...
复制链接

扫一扫