JS篇（6）

最新推荐文章于 2023-07-10 23:28:03 发布

Dawn___

最新推荐文章于 2023-07-10 23:28:03 发布

阅读量362

点赞数

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

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

版权

学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

时针

1.要得到现在的时分秒，如果是9点整，时针是指向9，但是9点30，时针应该在9-10之间才对。所以，我们不但要得到现在的小时，还要得到已经过去了多少分。

    ms = date.getMilliseconds(); // 现在的毫秒数
    s = date.getSeconds() + ms / 1000;  //  得到秒 1.7 s
    m = date.getMinutes() + s / 60;  //  得到的是分数  45.4分钟
    h = date.getHours() % 12 + m / 60 ;

2.旋转角度原理
秒针：1s 走 6°
分针：1min 走 6°
分针：1h 走 30°

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .clock {
    width: 600px;
    height: 600px;
    margin:50px auto;
    background: url(images/clock.jpg) no-repeat;
    position: relative;
    }
    .clock div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    }
    .h {
    background: url(images/hour.png) no-repeat center center;
    }
    .m {
    background: url(images/minute.png) no-repeat center center;
    }
    .s {
    background: url(images/second.png) no-repeat center center;
    }
    </style>
    </head>
    <body>
    <div class="clock">
    <div class="h" id="hour"></div>
    <div class="m" id="minute"></div>
    <div class="s" id="second"></div>
    </div>
    </body>
    </html>
    <script>
    var hour = document.getElementById("hour");
    var minute = document.getElementById("minute");
    var second = document.getElementById("second");
    // 开始定时器
    var s = 0,m = 0, h = 0, ms = 0;
    setInterval(function() {
    // 内容就可以了
    var date = new Date();  // 得到最新的时间
    ms = date.getMilliseconds(); // 现在的毫秒数
    s = date.getSeconds() + ms / 1000;  //  得到秒 1.3 s
    m = date.getMinutes() + s / 60;  //  得到的是分数  45.6分钟
    h = date.getHours() % 12 + m / 60 ;
    //console.log(h);
    //旋转角度
    // 一圈  360 °     一共有 60 秒       每秒  6 °   现在是 s秒
    second.style.WebkitTransform = "rotate("+ s*6 +"deg)";
    //  变化            旋转    deg  度
    minute.style.WebkitTransform = "rotate("+ m*6 +"deg)";
    hour.style.WebkitTransform = "rotate("+ h*30 +"deg)";
    second.style.MozTransform = "rotate("+ s*6 +"deg)";
    //  变化            旋转    deg  度
    minute.style.MozTransform = "rotate("+ m*6 +"deg)";
    hour.style.MozTransform = "rotate("+ h*30 +"deg)";
    },100);
    </script>

发送短信倒计时

1.按钮不可用

    btn.disabled = "disabled" ||  btn.disabled = true;

这里写图片描述

注意：
button是个双标签，所以要更改他的值，使用innerHTML而不是value
2.关闭定时器
clearInterval(定时器名称)；定时器将不再进行。

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <input type="text"/>
    <button id="btn">点击发送短信</button>
    </body>
    </html>
    <script>
    var btn = document.getElementById("btn");
    var count = 5;  // 数据的 10
    var timer = null; // 定时器的名字
    btn.onclick = function() {
    clearInterval(timer);  // 先清除掉原来的定时器
    // alert(11);
    this.disabled = true;
    //alert(this);  // this 指向的是 btn
    var that = this;  // 把 btn 对象 给 that或者还有一种写法：var _this = this;
    timer = setInterval(sendTextMessage,1000);  // 开启定时器 名字  timer
    function sendTextMessage() {
    count--;
    //this.innerHTML = "还剩余"+count+"秒";
    // alert(this); // this 指向的是 定时器  window
    //alert(that);
    if(count >= 0 )
    {
    that.innerHTML =  "还剩余"+count+"秒";
    }
    else
    {
    that.innerHTML = "重新发送短信";
    that.disabled = false;
    clearInterval(timer);  // 清除定时器
    count = 5;
    }
    }
    }
    </script>

定时器 —setTimeout()

setTimeout(“函数”，时间)

区别：
1.setInterval(fn,5000);每隔5秒钟就去执行函数fn一次
setTimeout(fn,5000);5秒钟之后去执行fn函数，只执行一次
2.setInterval是排队执行的
假如间隔时间是1秒，而执行的程序的时间是2秒上次还没执行完的代码会排队, 上一次执行完下一次的就立即执行, 这样实际执行的间隔时间为2秒
setTimeout延迟时间为1秒执行, 要执行的代码需要2秒来执行,那这段代码上一次与下一次的执行时间为3秒.

arguments对象

arguments.length
返回的是实参的个数

    function fn(a,b,c) 
    {console.log(a+b+c); alert(arguments.length;)
}
    fn(1,3,4,6);

注意：对象只在正在使用的函数内使用。
arguments.callee;
返回的是正在执行的函数，也是函数体内使用。
在使用函数递归调用时推荐使用arguments.callee;代替函数本身。

    function fn() {  console.log(arguments.callee); }

5秒钟之后返回首页

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    </head>
    <body>
    <div id="demo"></div>
    </body>
    </html>
    <script>
    var demo = document.getElementById("demo");
    var count = 5;
    var speed = 1000;
    setTimeout(goIndexPage,speed);  //  1秒钟之后去执行  goIndexPage这个函数
    function goIndexPage() {
    //alert(arguments.callee);
    count--;
    demo.innerHTML = "<a href='http://www.baidu.com'>本页面将在第"+count+"秒钟之后跳转页面</a>";
    if(count <= 0)
    {
    // 如果 count 小于 0 就到了时间了   我们应该跳转页面
    window.location.href = "http://www.baidu.com";
    }
    else
    {
    setTimeout(arguments.callee,speed);  //  递归调用（函数内部的计时器，又一次调用）
    }
    }
    </script>

JS页面跳转：

    window.location.href = ”http://www.itcast.cn” ;

5秒钟自动关闭广告

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    img {
    position: absolute;
    top: 0;
    }
    #left {
    left: 0;
    }
    #right {
    right: 0;
    }
    </style>
    </head>
    <body>
    <img src="1.gif" alt="" id="left"/>
    <img src="2.gif" alt="" id="right"/>
    </body>
    </html>
    <script>
    function $(id) { return document.getElementById(id);}  // id函数
    function hide(id) {   // 隐藏函数
    $(id).style.display = "none";
    }
    function show(id) {
    $(id).style.display = "block";
    }
    setTimeout(closeAd,5000);
    function closeAd() {
    hide("left");
    hide("right");
    }
    </script>

鼠标经过图片滚动

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    .xiaomi {
    width: 512px;
    height: 400px;
    border: 1px solid #f00;
    margin: 100px auto;
    overflow: hidden;
    position: relative;
    }
    .xiaomi span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 200px;
    cursor: pointer;
    }
    .up {
    top: 0;
    }
    .down {
    bottom: 0;
    }
    #pic {
    position: absolute;
    top: 0;
    left: 0;
    }
    </style>
    </head>
    <body>
    <div class="xiaomi">
    <img src="mi.png" alt="" id="pic"/>
    <span class="up" id="picUp"></span>
    <span class="down" id="picDown"></span>
    </div>
    </body>
    </html>
    <script>
    function $(id) { return document.getElementById(id);}
    var num = 0; // 控制图片的top值
    var timer = null; // 定时器名称
    $("picUp").onmouseover = function(){
    clearInterval(timer);
    timer =  setInterval(function(){
    num -= 3;
    num >= -1070 ? $("pic").style.top = num + "px" :  clearInterval(timer);
    },30);
    }
    $("picDown").onmouseover = function(){
    clearInterval(timer);
    timer  = setInterval(function(){
    num++;
    num < 0 ?  $("pic").style.top = num + "px" : clearInterval(timer);
    },30);
    }
    $("picUp").parentNode.onmouseout = function() {
    clearInterval(timer);
    }
    </script>

运算符

a&&b
如果a 为假，则返回 a
如果a 为真，则返回 b
a||b
如果 a 为假则返回b
如果 a 为真则返回a

获取字符位置

charAt：获取相应位置字符（参数：字符位置）
charCodeAt：获取相应位置字符unicode编码（参数：字符位置）
var txt = “abcedf”;
比如， txt.charAt(4); 索引号一定是从0开始返回的结果是 d
我们根据我们输入的位数返回相应的字符。
unicode编码是我们字符的字符的唯一表示。
这里写图片描述

    var txt = "abcdefg";
    var txt1 = "今天是星期天";
    alert(txt.charAt(5));
    alert(txt1.charAt(3));
    alert(txt.charCodeAt(0));
    alert(txt1.charCodeAt(3));

转换为字符串

    <script>
    var txt = 12345;
    console.log(typeof (txt+""));
    console.log(typeof String(txt))
    console.log(typeof txt.toString());
    var num = 10;
    console.log(num.toString(2));  //  1010
    </script>

检测字符串的长度

    <script>
    var txt = "what are you 弄啥咧!好的";
    console.log(txt.length);
    function getStringLength(str) {
    var len = 0; //存储总长度
    var c = 0;  // 存储每一个编码
    for(var i=0;i<str.length;i++)
    {
    c = str.charCodeAt(i);
    //alert(c);
    if(c>=0 && c<=127)
    {
    len++;
    }
    else
    {
    len += 2;
    }
    }
    return len;
    }
    console.log(getStringLength(txt));
    </script>