JavaScript时钟
时间:2022-07-22
本文章向大家介绍JavaScript时钟,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
网页主要是由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>
(全文完)
- 最近让我焦灼的四个问题(有解) (r7笔记第76天)
- JavaWeb10-reques;response你不得不学(2)
- 很多人比较纠结的约束和索引的关系(r7笔记第75天)
- JavaWeb09-Servlet(Java真正的全栈开发)
- JavaWeb08-XML,tomcat,HTTP轻松入门
- JavaWeb07-JDBC(Java真正的全栈开发)
- 编程思想 之「操作符」
- Hyperledger fabric Chaincode 开发详解
- 字节码文件的内部结构之谜
- 基因功能富集分析-R语言
- CRM, C4C和Hybris的工作流简介
- 想进大厂?50个多线程面试题,你会多少?(一)
- golang 几种字符串的连接方式
- Go Template学习笔记
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法