js基础2

接下来我们来讲解一下函数以及一些实例

函数分为

1.具名函数   2.匿名函数   

3.匿名函数自调用

(functuon(){})() 外面2个括号并排的

是先计算前面括号的值 然后执行这个返回值 当然返回的肯定要是函数

前面是包在一起 ，整体性要好一些

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    //具名函数
    function aaa() {
        console.log('我是函数1')
    }
    aaa()
    //匿名函数
    var bbb=function (){
        console.log('匿名函数')
    }
    bbb()
    //匿名函数自调用
    ;(function (){
        console.log('匿名函数自调用')
    })()
</script>

js获取dom

1. getElementByID()

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

2. getElementByTagName()

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

3.getElementByName()

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

时间对象的获取和拆分

1. var today;// 这个是创建一个date的时间对象

2. var h;//使用today对象获取系统当前的小时

3. var m;//使用today对象获取系统当前的分钟

4. var s;//使用today对象获取系统当前的秒钟

var today=new Date()

var h=today.getHours()

var m=today.getMinutes()

var s=today.getSeconds()

-----------------------------

以上是声名语句

先获得一个系统时间对象 Date

 js时钟的使用

 

要想做时钟，我们要先用css做出秒针，分针，时针

 

利用js中的setInterval()来实训时钟的转动

 

setInterval():每隔指定的时间执行代码。

setInterval():语法。

setInterval(代码,交互时间);

代码：要调用的函数或要执行的代码串。

交互时间：周期性执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms）

时钟效果代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #box{
        width: 225px;
        height: 225px;
        background: url("./sz.jpg")no-repeat;
        position: relative;
        margin: 100px auto 0;
        background-position: -33px -8px;
        border-radius: 50%
    }
    #dian{
        width: 2px;
        height: 2px;
        background: green;
        position: absolute;
        top: 112px;
        left: 112px
    }
    #shi{
        width: 6px;
        height: 60px;
        background: #000;
        position: absolute;
        left: 110px;
        top: 70px;
        transform-origin: 50% 72%
    }
    #fen{
        width: 4px;
        height: 80px;
        position: absolute;
        left: 111px;
        top: 50px;
        background: #000;
        transform-origin: 50% 79%
    }
    #miao{
        width: 2px;
        height: 100px;
        position: absolute;
        left: 112px;
        top:40px;
        background: red;
        transform-origin: 50% 73%;
    }
    
  </style>
</head>
<body>
<div id="box">
  <div id="shi"></div>
  <div id="fen"></div>
  <div id="miao"></div>
  <div id="dian"></div>
</div>
</body>
</html>
<script>
  var shi=document.getElementById('shi'),
      fen=document.getElementById('fen'),
      miao=document.getElementById('miao')
  function clock () {
      var time=new Date(),
        s=time.getSeconds(),
        m=time.getMinutes(),
        h=time.getHours()
    miao.style.transform='rotate('+s*6+'deg)'
    fen.style.transform='rotate('+(m+s/60)*6+'deg)'
    shi.style.transform='rotate('+(h+m/60+s/3600)*30+'deg)'
  }
  clock ()
  setInterval(clock,1000)
</script>

 

posted @ 2021-11-20 16:12  吴萌  阅读(33)  评论(0)    收藏  举报