JavaScript时钟

叶子陪你玩

发布于 2020-08-06 11:36:27

8160

发布于 2020-08-06 11:36:27

网页主要是由HTML，CSS和JavaScript三者构成的，上一课做的图片画廊用到了HTML和CSS，今天就来试试JavaScript。

学过其它编程语言的话，再学习一门新的编程语言还是非常简单的，因为绝大数的编程语言的基本语法，数据结构都是差不多的，也就是所谓的语言特性。顺序，循环，条件分支；注释，数据类型，函数定义调用，运算符等基本上都是大同小异，所以初学编程语言只要把一门编程语言掌握好了，其它的很快就能学会的，当然了，这只是入门。

输出0-9十个数

i = 0 ;
while (i<10){
  //alert(i); //依次弹出数字
  console.log(i);//控制台输出
  i+=1;
}

JavaScript(简称JS)是利用浏览器解析的，效果也是在浏览器展示的，不需要安装其它什么的。

JS它具体在网页中有什么用呢？

在网页中插入新的 html，修改现有的网页内容和网页的样式。
响应用户的行为，响应鼠标的点击或移动、键盘的敲击。
向远程服务器发送网络请求，下载或上传文件。
获取或修改 cookie，向访问者提出问题、发送消息。
评论，点赞，注册等。
记住客户端的数据（本地存储）。

上面这些都是JS的作用，JS赋予了网页更大的灵活性，也让网页的功能变的越来越强大。现在的JS不仅是一门网页编程语言了，也可以作为服务器语言使用。

从本地加载十张图片

绘制一个圆

时钟

<!DOCTYPE html>
<html>
    <head>
      <title>时钟</title>
    </head>
    <body>
  <canvas id="drawingCanvas" width="400" height="300" style="background:black;">
  <script>
    canvas=document.getElementById("drawingCanvas"),
    context=canvas.getContext("2d");
    window.onload=function(){
    setInterval("drawClock()",1000);
    }
    function drawClock(){
    context.clearRect(0,0,canvas.width,canvas.height);
    context.save();

    var date=new Date();
    var h = date.getHours();
    var m = date.getMinutes();
    var s=date.getSeconds();

    //数字时钟
    var hours   = String(h);
    var minutes = String(m);
    var seconds = String(s);
    context.beginPath();
    context.fillStyle="#ff0000";
    context.font="bold 40px 华文彩云";

    if (hours.length == 1)   h   = '0' + h;
    if (minutes.length == 1) m = '0' + m;
    if (seconds.length == 1) s = '0' + s;
    context.fillText(h+":"+m+":"+s,80,80);

    /*save 和restore使用理解 save()方法只是保存绘图上下文的设置和变换，不会保存绘图上下文的内容*/
    context.restore();

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