day 12 元素的获取字符串操作函数

banana tree

于 2022-05-08 10:04:32 发布

阅读量58

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/lemon_shinning/article/details/124643805

版权

元素的获取

getElementById	根据id名获取一个元素
getElementsByTagName	根据标签名返回元素，返回一个数组
getElementsByClassName	根据class名返回元素，返回一个数组
querySelector	获取一个元素，推荐使用，用法类似于写css
querySelector	返回一个数组

字符串操作

str.length	获取长度
str.toUppercase()	转换为大写
str.toLowercase()	转换为小写
str.split(参数x)	字符串的剪裁、返回一个数组、x是某种规则
str.indexOf()	获取子元素的下标、如果不存在返回-1
str.substring(start,stop)	start,必填项，非负整数，起始位置；stop，选填项，非负整数，返回start与stop之间的内容
str.substr(start,length)	返回从start开始，指定length的内容
str.replace(x,y)	替换
+	字符串拼接，es6中使用${变量名}在反引号中使用

反转字符串：

function reverseString(string){
return string.split('').reverse().join('');
}

函数

函数是可以作为一个逻辑单元对待的代码块。

作用：使代码更加简洁，提高重用性。

函数的定义：function 函数名([x,y,z...]){[return ex;]}; 函数名：在同一个页面内函数名必须唯一。参数部分选填，中间用逗号隔开，最多可添加255个参数；return选填。

函数的调用：函数定义后不会自动执行，需要在特定的位置调用函数。

函数的参数：形参：形式参数，就是写在函数名小括号里的内容；实参：在调用函数时小括号里的内容；传参：将实参传递给形参，用形参表示实参。

案例

时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时钟</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
            width: 200px;
            height: 200px;
            border: 6px solid lightgray;
            border-radius: 50%;
            margin: 0 auto;
            box-shadow: 4px 4px lightcyan;
            position: relative;
        }
        .num{
            width: 200px;
            height: 20px;
            line-height: 20px;
            position: absolute;
            top: 90px;
        }
        .num span{
            display: block;
            width: 20px;
        }
        #hour{
            width: 6px;
            height: 40px;
            background-color: tomato;
            position: absolute;
            transform-origin: center bottom;
            left: 97px;
            top: 60px;
        }
        #minute{
            width: 4px;
            height: 60px;
            transform-origin: center bottom;
            background-color: blue;
            position: absolute;
            left: 98px;
            top: 40px;
        }
        #second{
            width: 2px;
            height: 70px;
            transform-origin: center bottom;
            background-color: cyan;
            position: absolute;
            left: 99px;
            top: 30px;
        }
    </style>
</head>
<body>
    <div class="wrap">
       <p class="num"><span>1</span></p>
       <p class="num"><span>2</span></p>
       <p class="num"><span>3</span></p>
       <p class="num"><span>4</span></p>
       <p class="num"><span>5</span></p>
       <p class="num"><span>6</span></p>
       <p class="num"><span>7</span></p>
       <p class="num"><span>8</span></p>
       <p class="num"><span>9</span></p>
       <p class="num"><span>10</span></p>
       <p class="num"><span>11</span></p>
       <p class="num"><span>12</span></p>
       <div id="hour"></div>
       <div id="minute"></div>
       <div id="second"></div>
    </div>
</body>
<script>
    var ps = document.getElementsByTagName("p");
    var dHour = document.getElementById("hour");
    var dMinute = document.getElementById("minute");
    var dSecond = document.getElementById("second");
    var timer=null;

    //设置数字位置
    function setNums(){
        for(var i=0;i<ps.length;i++){
            ps[i].style.transform=`rotate(`+ (120+30*i) +`deg)`;
            var span = ps[i].getElementsByTagName("span")[0];
            span.style.transform = `rotate(`+ (120+30*i)*-1 +`deg)`;
        }
    }
    setNums();
    timer = setInterval(function(){
        changeZhen();
    },1000);
    //获取时间戳
    function changeZhen(){
        var date = new Date();
        var s = date.getSeconds();
        var m = date.getMinutes() +s/60;
        var h = date.getHours() + m/60;
        dSecond.style.transform = `rotate(${s*6}deg)`;
        dMinute.style.transform = `rotate(${m*6}deg)`;
        dHour.style.transform = `rotate(${h*30}deg)`;
    }
    
</script>
</html>

banana tree

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day 12 元素的获取字符串操作函数

元素的获取getElementById 根据id名获取一个元素 getElementsByTagName 根据标签名返回元素，返回一个数组 getElementsByClassName 根据class名返回元素，返回一个数组 querySelector 获取一个元素，推荐使用，用法类似于写css querySelector 返回一个数组字符串操作str.length 获取长度 str.toUppercase() 转换为大写 s.
复制链接

扫一扫