JavaScript中的canvas 实现一个圆环渐变倒计时效果

目录
  • 前言
  • 1、效果图展示
  • 2、需求分析
  • 3、实现的技术
  • 4、实现的过程
    • 1. HTML 部分
    • 2. SASS部分
    • 3. JavaScript部分
  • 5、全部源码
    • 1.index.html
    • 2. style.scss
    • 3. index.js

前言

内容:

  • 效果图
  • 需求分析
  • 实现技术
  • 实现过程
  • 全部源码

1、效果图展示

随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止.

2、需求分析

  • 可以自定义倒计时结束的时间
  • 圆环的颜色是渐变的
  • 倒计时的动画在视觉上是流畅运行, 而不是一格一格的减少

3、实现的技术

语言 框架
HTML5
CSS3 BootStrap SASS
JavaScript

4、实现的过程

1. HTML 部分

主要用到的是 HTML5 中的画布元素 canvas, 一共4个 canvas 元素拍成一排, 每个元素都是高144px, 宽144px的正方形, 两个圆环中的两个小点部分可以使用伪元素 after 和 before 来实现

源码如下:

<div class="count-down">
 <div class="container">
   <div class="row">
     <div class="days col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="days" width="144" height="144"></canvas>
       </div>
     </div>
     <div class="hours col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="hours" width="144" height="144"></canvas>
       </div>
     </div>
     <div class="minutes col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="minutes" width="144" height="144"></canvas>
       </div>
     </div>
     <div class="seconds col-lg-3 col-md-3 col-sm-3 col-xs-6">
       <div class="colck">
         <canvas id="seconds" width="144" height="144"></canvas>
       </div>
     </div>
   </div>
 </div>
</div>

用 BootStrap 提供的栅格布局快速的把 canvas 元素排成一排 为每个 cnavas 元素设置对应的 id, 方便用 JavaScript 获取到该元素.

2. SASS部分

css 的部分是用 Sass 来写的, Sass 是一个 css 的 扩展语言, html 文件中引用的是写好的 Sass 文件编译生成 css 文件.

源码如下:

.count-down {
  width: 100%;
  .row {
    padding: 0 145px;
  }
  .col-lg-3 {
    padding: 0;
    position: relative;
    .colck {
      width: 144px;
      height: 144px;
      background-color: #fff;
      margin: 0 auto;
    }
  }
  .days, .hours, .minutes {
    &:after, &:before {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      background-color: #fff;
      position: absolute;
      right: -6px;
    }
    &:after {
      bottom: 45px;
    }
    &:before {
      top: 45px;
    }
  }
}

控制圆环的运动主要靠 JavaScript 代码, 这里 sass 的作用是用来把把元素的位置排列好, 把两个圆环中间的点画出来,

因为背景色是黑色的 为了看的更加直观, 我先把包裹 canvas 的元素背景色设为白色,

此时的效果: 

3. JavaScript部分

最终的运动效果靠 js 代码来实现:

  • 我们先来获取到这4个 canvas 元素
// 获取4个 canvas 元素
var days_canvas = document.getElementById('days');
var hours_canvas = document.getElementById('hours');
var minutes_canvas = document.getElementById('minutes');
var seconds_canvas = document.getElementById('seconds');
  • 为了可以自定义指定倒计时结束时间, 写一个设置结束时间的函数, 返回值为一个 Date 对象.
// 设置倒计时时间:年 月 日 小时 分钟 秒 毫秒
endTime = setEndTime(2020, 11, 30, 15, 0, 0);

// 设置到期时间
function setEndTime(year, month, day, hour, minute, millisecond) {
return new Date(year, month - 1, day, hour, minute, millisecond);
}

js 中创建 Date 对象的5种方式 new Date("month dd,yyyy hh:mm:ss"); new Date("month dd,yyyy"); new Date(yyyy,mth,dd,hh,mm,ss); new Date(yyyy,mth,dd); new Date(ms);

注意: Date 对象中的月份取值是 0 - 11, 0 就表示 1 月, 用变量 endTime 保存这个设置好的 Date 对象

  • 根据现在的时间和设置好的到期时间计算现在到到期时间还有多少秒,多少分钟, 多少小时, 多少天.
// 计算距离到期时间还剩下多少 days, hours, minutes
 function getLeftTimeObj() {
   var date = new Date();
   var millisecond = date.getTime()
   var end_millisecond = endTime.getTime();

   if (end_millisecond < millisecond) {
     return {
       days: 0,
       hours: 0,
       minutes: 0,
       seconds: 0
     }
   }
   // 距离结束时间的秒数
   var left_seconds = (( end_millisecond - millisecond ) / 1000);
   var seconds = (left_seconds % 60);
   var left_minutes = (left_seconds - seconds) / 60;
   var minutes = (left_minutes % 60);
   var left_hours = (left_minutes - minutes) / 60;
   var hours = (left_hours % 24);
   var left_days = ((left_hours - hours) / 24);

   return {
     days: left_days,
     hours: hours,
     minutes: minutes,
     seconds: seconds
   }
 }
 var dateObj = getLeftTimeObj();

思路:

  • Date 对象中有一个方法 getTime(), 返回值是从 1970 年 1 月 1 日至今的毫秒数。
  • 用两个 Date 对象的 getTime() 返回值相减值再 ÷ 1000 获得两者相差的秒数
  • 用两者相差的秒数换算出两者相差多少天,多少小时,多少分钟,多少秒
  • 最后返回一个对象 { days: 还有多少天, hours: 还有多少个小时, minutes: 还有多少分钟, secondsL: 还有多少秒 }

我们定义一个变量 dateObj 保存这个对象, 然后根据这个对象去在相应的 canvas 元素上画图

  • 绘图

我们先不考虑怎么让圆环动起来, 而是先考虑怎么把图画出来

观察单个图形的样子如下图所示:

可以把这个图形分成4个部分:

  • 灰色的整个圆环
  • 红黄渐变的不完整圆环
  • 中间的数字 54
  • 下面的字符串 Seconds

我们可以为写四个方法分别完成每一个步骤:

 // 画整个圆
function drawCricle(canvas) {
  // 获取 context 对象
  var context = canvas.getContext('2d');
  // 获取 canvas 的中心点的 x 坐标
  var centerX = canvas.width / 2;
  // 获取 canvas 的中心点的 y 坐标
  var centerY = canvas.height / 2;
  context.save();
  context.beginPath();
  context.lineWidth = 7;
  context.strokeStyle = "#636363";
  // 圆环的宽度为 7, canvas 元素的长和宽是 144, 所以圆半径应为 (144 - 7) / 2, 也就是 canvas.width / 2 - 3.5
  context.arc(centerX, centerY, canvas.width / 2 - 3.5 , 0, Math.PI*2, false);
  context.stroke();
  context.closePath();
  context.restore();
}

// 画数字下的字符
function drawStr(canvas, str) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  context.save();
  context.fillStyle = '#fff';
  context.font = "14px Arial"; //设置字体大小和字体
  context.textAlign = 'center';
  context.fillText(str, centerX, centerY+54);
  context.restore();
}

// 画数字
function drawNumber(canvas, num) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  num = num.toFixed();
  num = num < 10 ? '0' + num : num;

  context.save();
  context.fillStyle = '#fff';
  context.font = "bolder 60px Arial"; //设置字体大小和字体
  context.textAlign = 'center';
  // context.fontWeight = 'bold';
  context.fillText(num, centerX, centerY+10);
  context.restore();
}
// 画进度条 -0.5为起点
// percentage 为进度条的百分比(0<percentage<1), 1 表示整个圆
function drawProgress(canvas, percentage) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  var end_cricle = (percentage * 2) - 0.5;
  end_cricle = Number(end_cricle.toFixed(4))

  // 设置垂直渐变
  var linearGrad = context.createLinearGradient(canvas.width / 2, 0, canvas.width / 2, canvas.height);
  linearGrad.addColorStop(0, '#ff0503');
  linearGrad.addColorStop(1, '#ff8200');

  context.save();
  context.strokeStyle = linearGrad; //设置描边样式
  context.lineWidth = 7; //设置线宽
  context.beginPath(); //路径开始
  context.arc(centerX, centerY, canvas.width / 2 -3.5 , -0.5 * Math.PI, end_cricle * Math.PI, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
  context.stroke(); //绘制
  context.closePath(); //路径结束
  context.restore();
}
// 为秒计数的 canvas 绘图, 画图依赖 dateObj.seconds
drawCricle(seconds_canvas);
drawStr(seconds_canvas, 'Seconds');
// 每一分钟有60秒, 用 dateObj.seconds / 60 获得 当前进度
drawProgress(seconds_canvas, (dateObj.seconds / 60).toFixed(4));
drawNumber(seconds_canvas, dateObj.seconds);

写一个绘制 4 个 canvas 的方法 draw(); 然后执行

// 绘图
function draw() {
  drawCricle(days_canvas);
  drawStr(days_canvas, 'Days');
  drawProgress(days_canvas, dateObj.days / 10);
  drawNumber(days_canvas, dateObj.days);

  drawCricle(hours_canvas);
  drawStr(hours_canvas, 'Hours');
  drawProgress(hours_canvas, (dateObj.hours / 24).toFixed(4));
  drawNumber(hours_canvas, dateObj.hours);

  drawCricle(minutes_canvas);
  drawStr(minutes_canvas, 'Minutes');
  drawProgress(minutes_canvas, (dateObj.minutes / 60).toFixed(4));
  drawNumber(minutes_canvas, dateObj.minutes);

  drawCricle(seconds_canvas);
  drawStr(seconds_canvas, 'Seconds');
  drawProgress(seconds_canvas, (dateObj.seconds / 60).toFixed(4));
  drawNumber(seconds_canvas, dateObj.seconds);
}

drwa();

然后先记得把之前设置的白色背景色去掉

执行了 draw() 之后效果如下图: 

但是现在还没有实现让他动起来,

  • 让倒计时动起来

先明白动起来的逻辑:

  • 用定时器每过 16ms 清除一次所有 canvas 画的图像
  • 重新获取所剩下的时间的对象 dateObj
  • 再次绘图 draw();
// 清除 canvas 内容
function clear() {
  var days_ctx = days_canvas.getContext('2d');
  var hours_ctx = hours_canvas.getContext('2d');
  var minutes_ctx = minutes_canvas.getContext('2d');
  var seconds_ctx = seconds_canvas.getContext('2d');

  days_ctx.clearRect(0, 0, days_canvas.width, days_canvas.height);
  hours_ctx.clearRect(0, 0, hours_canvas.width, hours_canvas.height);
  minutes_ctx.clearRect(0, 0, minutes_canvas.width, minutes_canvas.height);
  seconds_ctx.clearRect(0, 0, seconds_canvas.width, seconds_canvas.height);
}
// 让倒计时动起来
// 可以直接用定时器
setInterval(function() {
  clear();
  dateObj = getLeftTimeObj();
  draw();
}, 16)

// 也可以考虑使用 requestAnimationFrame 这个方法
(function count() {
  requestAnimationFrame(count);
  clear();
  dateObj = getLeftTimeObj();
  draw();
})();

到现在为止整个完整的功能全部实现了。

5、全部源码

1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css" rel="external nofollow" >
  <link rel="stylesheet" href="./style.css" rel="external nofollow" >
  <style>
    .count-down {
      background: #000;
    }
  </style>
</head>
<body>
  <div class="count-down">
    <div class="container">
      <div class="row">
        <div class="days col-lg-3 col-md-3 col-sm-3 col-xs-6">
          <div class="colck">
            <canvas id="days" width="144" height="144"></canvas>
          </div>
        </div>
        <div class="hours col-lg-3 col-md-3 col-sm-3 col-xs-6">
          <div class="colck">
            <canvas id="hours" width="144" height="144"></canvas>
          </div>
        </div>
        <div class="minutes col-lg-3 col-md-3 col-sm-3 col-xs-6">
          <div class="colck">
            <canvas id="minutes" width="144" height="144"></canvas>
          </div>
        </div>
        <div class="seconds col-lg-3 col-md-3 col-sm-3 col-xs-6">
          <div class="colck">
            <canvas id="seconds" width="144" height="144"></canvas>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="./index.js"></script>
</body>
</html>

2. style.scss

.count-down {
  position: absolute;
  bottom: 90px;
  left: 0;
  width: 100%;
  .row {
    padding: 0 145px;
  }
  .col-lg-3 {
    padding: 0;
    position: relative;
    .colck {
      width: 144px;
      height: 144px;
      // background-color: #fff;
      margin: 0 auto;
    }
  }
  .days, .hours, .minutes {
    &:after, &:before {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      background-color: #fff;
      position: absolute;
      right: -6px;
    }
    &:after {
      bottom: 45px;
    }
    &:before {
      top: 45px;
    }
  }
}

3. index.js

// 倒计时
// 到期时间
// 设置倒计时时间:年 月 日 小时 分钟 秒 毫秒
endTime = setEndTime(2020, 11, 30, 15, 0, 0);

// 设置到期时间
function setEndTime(year, month, day, hour, minute, millisecond) {
  return new Date(year, month - 1, day, hour, minute, millisecond);
}

// 获取4个 canvas 元素
var days_canvas = document.getElementById('days');
var hours_canvas = document.getElementById('hours');
var minutes_canvas = document.getElementById('minutes');
var seconds_canvas = document.getElementById('seconds');

// 计算距离到期时间还剩下多少 days, hours, minutes
function getLeftTimeObj() {
  var date = new Date();
  var millisecond = date.getTime()
  var end_millisecond = endTime.getTime();

  if (end_millisecond < millisecond) {
    return {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0
    }
  }

  // 距离结束时间的秒数
  var left_seconds = (( end_millisecond - millisecond ) / 1000);

  var seconds = (left_seconds % 60);
  var left_minutes = (left_seconds - seconds) / 60;
  var minutes = (left_minutes % 60);
  var left_hours = (left_minutes - minutes) / 60;
  var hours = (left_hours % 24);
  var left_days = ((left_hours - hours) / 24);

  return {
    days: left_days,
    hours: hours,
    minutes: minutes,
    seconds: seconds
  }
}

var dateObj = getLeftTimeObj();

// 画整个圆
function drawCricle(canvas) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  context.save();
  context.beginPath();
  context.lineWidth = 7;
  context.strokeStyle = "#636363";
  context.arc(centerX, centerY, canvas.width / 2 - 3.5 , 0, Math.PI*2, false);
  context.stroke();
  context.closePath();
  context.restore();
}

// 画数字下的字符
function drawStr(canvas, str) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  context.save();
  context.fillStyle = '#fff';
  context.font = "14px Arial"; //设置字体大小和字体
  context.textAlign = 'center';
  context.fillText(str, centerX, centerY+54);
  context.restore();
}

// 画数字
function drawNumber(canvas, num) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  num = num.toFixed();
  num = num < 10 ? '0' + num : num;

  context.save();
  context.fillStyle = '#fff';
  context.font = "bolder 60px Arial"; //设置字体大小和字体
  context.textAlign = 'center';
  // context.fontWeight = 'bold';
  context.fillText(num, centerX, centerY+10);
  context.restore();
}

// 画进度条 -0.5为起点
// percentage 为进度条的百分比(0<percentage<1), 1 表示整个圆
function drawProgress(canvas, percentage) {
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;

  var end_cricle = (percentage * 2) - 0.5;
  end_cricle = Number(end_cricle.toFixed(4))

  // 设置垂直渐变
  var linearGrad = context.createLinearGradient(canvas.width / 2, 0, canvas.width / 2, canvas.height);
  linearGrad.addColorStop(0, '#ff0503');
  linearGrad.addColorStop(1, '#ff8200');

  context.save();
  context.strokeStyle = linearGrad; //设置描边样式
  context.lineWidth = 7; //设置线宽
  context.beginPath(); //路径开始
  context.arc(centerX, centerY, canvas.width / 2 -3.5 , -0.5 * Math.PI, end_cricle * Math.PI, false); //用于绘制圆弧context.arc(x坐标,y坐标,半径,起始角度,终止角度,顺时针/逆时针)
  context.stroke(); //绘制
  context.closePath(); //路径结束
  context.restore();
}

// 清除 canvas 内容
function clear() {
  var days_ctx = days_canvas.getContext('2d');
  var hours_ctx = hours_canvas.getContext('2d');
  var minutes_ctx = minutes_canvas.getContext('2d');
  var seconds_ctx = seconds_canvas.getContext('2d');

  days_ctx.clearRect(0, 0, days_canvas.width, days_canvas.height);
  hours_ctx.clearRect(0, 0, hours_canvas.width, hours_canvas.height);
  minutes_ctx.clearRect(0, 0, minutes_canvas.width, minutes_canvas.height);
  seconds_ctx.clearRect(0, 0, seconds_canvas.width, seconds_canvas.height);
}

// 绘图
function draw() {
  drawCricle(days_canvas);
  drawCricle(hours_canvas);
  drawCricle(minutes_canvas);
  drawCricle(seconds_canvas);
  drawStr(days_canvas, 'Days');
  drawStr(hours_canvas, 'Hours');
  drawStr(minutes_canvas, 'Minutes');
  drawStr(seconds_canvas, 'Seconds');

  drawProgress(days_canvas, dateObj.days / 10 >= 1 ? 1 : dateObj.days / 10);
  drawNumber(days_canvas, dateObj.days);
  drawProgress(hours_canvas, (dateObj.hours / 24).toFixed(4));
  drawNumber(hours_canvas, dateObj.hours);
  drawProgress(minutes_canvas, (dateObj.minutes / 60).toFixed(4));
  drawNumber(minutes_canvas, dateObj.minutes);
  drawProgress(seconds_canvas, (dateObj.seconds / 60).toFixed(4));
  drawNumber(seconds_canvas, dateObj.seconds);
}

draw();

(function count() {
  requestAnimationFrame(count);
  clear();
  dateObj = getLeftTimeObj();
  draw();
})();

到此这篇关于JavaScript中的canvas 实现一个圆环渐变倒计时效果的文章就介绍到这了,更多相关JavaScript canvas 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • js 实现Material UI点击涟漪效果示例

    目录 正文 HTML CSS JS 实现效果 正文 我个人而言还是挺喜欢Material UI这套设计风格的.一些细节方面做的还不错.就比如今天要给大家分享的点击涟漪效果.Material UI里面叫做Ripples.好了,话不多说,开始吧. HTML <div class="example">Click me</div> CSS .example { position: relative; width: 300px; height: 300px; line-h

  • JS实现羊了个羊小游戏实例

    目录 引言 rem布局方案 popbox.js使用原理 html代码 样式代码 javascript代码 导入图片素材列表 startHandler函数实现 randomList 工具方法 clickHandler函数内部 createShadow方法 startHandler后续的逻辑 引言 这两天火爆全场的<羊了个羊>游戏,相信大家都玩过了,那么在玩这个游戏的同时,我想大家都会好奇这个游戏的实现,本文就带大家使用css,html,js来实现一个动物版的游戏. 首先我用到了2个插件,第一个插

  • js基于div丝滑实现贝塞尔曲线

    目录 引言 分析 实现 布局 如何计算y的偏移量 Math.sin() 和 Math.cos() 正弦曲线 余弦曲线 计算更多信息 完善剩余 完成跑马灯制作 贝塞尔曲线 简单封装一下方法 完整示例 style SCript 引言 今天遇到朋友发来的一个ui图,询问我如何实现下图这样的效果[vue项目],(听说是类似LED灯的展示效果),于是便有了今天的小demo,要实现一个类似下图的动效,上面的灯会一直重复滚动,但是这个并不是什么难点,主要在于如何实现这种平滑的曲线,日常我们的开发的div在我们

  • js 实现验证码输入框示例详解

    目录 前言 思路 遇到的问题 HTML CSS JS 前言 验证码输入框应该是很常见的需求吧,不知道各位小伙伴在在遇到的时候是选择找一找插件还是自己动手撸一个呢?我花了点时间撸了一个出来,实际体验还不错,分享给大家. 思路 我在实现之前肯定也是上网搜了一下的,网上的方式大多是使用多个input标签来实现,但我觉得不太优雅,就自己想了一个方法.使用了6个div标签和一个input标签.验证码长度一般是4位或6位,我这里用6位做演示. 先将6个div使用flex布局平铺. 再将input使用绝对定位

  • JavaScript Canvas实现噪点滤镜回忆童年电视雪花屏

    目录 引言 正文 初始化渲染 雪花屏动画 帧动画播放 引言 相信很多人80,90后的同学对童年里电视机的突然出现刺啦刺啦的雪花屏记忆犹新,本期将用 pixi.js 来完成一个电视机播放动漫然后突然出现雪花屏的动画,里面主要讲解了如何使用pixi.js播放帧动画和如何用噪点滤镜制造雪花屏. 正文 初始化渲染 import * as PIXI from "pixi.js" const GAME_WIDTH = 800; const GAME_HEIGHT = 600; export def

  • JavaScript中async与await实现原理与细节

    目录 一.回调地狱 二.Promise 三.生成器(generator) 四.使用生成器同步化promise 五.async.await异步代码究极解决方案 一.回调地狱 在es6兴起之后许多人都开始使用promise,promise目的是解决es5中的回调地狱(callback hell),那么什么是回调地狱呢?先来提一个需求,现在需要发送n个request请求,第二个请求参数需要第一个请求的结果,第三个请求的参数需要第二个请求的结果,以此类推... ,在没有promise的条件下,我们不难使

  • JavaScript中的canvas 实现一个圆环渐变倒计时效果

    目录 前言 1.效果图展示 2.需求分析 3.实现的技术 4.实现的过程 1. HTML 部分 2. SASS部分 3. JavaScript部分 5.全部源码 1.index.html 2. style.scss 3. index.js 前言 内容: 效果图 需求分析 实现技术 实现过程 全部源码 1.效果图展示 随着时间的减少, 圆环的红黄色部分会慢慢的减少,圆环中的数字会变小,一直到0停止. 2.需求分析 可以自定义倒计时结束的时间 圆环的颜色是渐变的 倒计时的动画在视觉上是流畅运行, 而

  • javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码

    本文实例讲述了javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果.分享给大家供大家参考.具体如下: 下面的玫瑰绘制用到了HTML 5的canvas,所以你的浏览器需要支持HTML 5.个人还是比较推荐chrome,这个效果在Firefox下也会稍卡. 效果图: 演示地址:http://demo.jb51.net/js/2015/js-flower-canvas.html 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML

  • Javascript中浮点数相乘的一个解决方法

    Javascript中的浮点数相乘是个很有意思的事情. 浮点数相乘有很多方式,下面是我给出的一个我自己认为不错的解决方案: 复制代码 代码如下: function FxF(f1, f2) {    f1 += '';    f2 += '';    var f1Len = f1.split('.')[1].length,        f2Len = f2.split('.')[1].length; if (f1Len) {        f1 = f1.replace('.', '');   

  • JavaScript中使用replace结合正则实现replaceAll的效果

    方法: string.replace(new RegExp(oldString,"gm"),newString)) gm 分别代表: g=global, m=multiLine 大致上方法就是这样的,可以实现替换全部指定字串 另一个简单的验证JS的方法: 在浏览器地址栏输入 javascript:alert("abcabcabc".replace(new RegExp("a","gm"),"ad")) 这样

  • javascript支持IE和firefox(FF)的渐变透明效果

    function Clear (DataType ,DataThis, DataTime, DataInterval) DataType 布尔值 - - 是否隐藏或显示 DataThis 元素 - - 被操作元素 DataTime 数字 - - 发生渐变时间 DataInterva 数字 - - 渐变刷新间隔 以下是HTML网页特效代码, 渐变 0.5, Test, parseInt(Math.random() * 2000), 10)" type="button" valu

  • Javascript中判断一个值是否为undefined的方法详解

    前言 相信大家都知道当声明一个变量,并且没有给赋值的情况下,它的初始值是undefined.但是在javascript中,怎么检查一个值是否为undefined呢? 简单来说,在现代浏览器中,你可以安全的比较变量是否为undefined if (name === undefined) {...} 一些人反对直接使用undefined变量进行比较,因为在旧的浏览器中允许它的值被重新赋值,比如下面这样: undefined = "test" 在被重新赋值后,使用undefined指令将不能

  • Javascript中正则表达式的使用及基本语法

    前面的话 正则表达式在人们的印象中可能是一堆无法理解的字符,但就是这些符号却实现了字符串的高效操作.通常的情况是,问题本身并不复杂,但没有正则表达式就成了大问题.javascript中的正则表达式作为相当重要的知识,本文将介绍正则表达式的基础语法 定义 正则表达式(Regular Expression)是一门简单语言的语法规范,是强大.便捷.高效的文本处理工具,它应用在一些方法中,对字符串中的信息实现查找.替换和提取操作 javascript中的正则表达式用RegExp对象表示,有两种写法:一种

  • JavaScript中的类(Class)详细介绍

    在JavaScript中,可以使用类(Class)来实现面向对象编程(Object Oriented Programming).不过,JavaScript中的类与Java中的有所不同,其相应的定义和使用也不一样. JavaScript中类的定义 在JavaScript中,所有从同一个原型对象(prototype)处衍生出来的对象组成了一个类:也就是说,JavaScript中的类是一个对象集合的概念,如果两个对象它们的prototype相同,那么它们就属于同一个类:JavaScript中的类甚至都

  • 深入了解javascript中的prototype与继承

    通常来说,javascript中的对象就是一个指向prototype的指针和一个自身的属性列表.javascript创建对象时采用了写时复制的理念.只有构造器才具有prototype属性,原型链继承就是创建一个新的指针,指向构造器的prototype属性.prototype属性之所以特别,是因为javascript时读取属性时的遍历机制决定的.本质上它就是一个普通的指针. 构造器包括: 1.Object2.Function3.Array4.Date5.String 下面我们来举一些例子吧 复制代

  • 深入探讨javascript中的数据类型

    学一门编程语言,无非两方面:一是语法,二是数据类型.类C语言的语法不外乎if.while.for.函数.算术运算等,面向对象的语言再加上object. 语法只是语言设计者预先做的一套规则,不同语言语法不尽相同,但都有一些共通点,对于熟悉一两门编程语言的人,学其他的编程语言时,语法往往不是问题(当然,如果你一直学的是类C语言,那么首次接触lisp时肯定也要花些时间),学习的重点往往是数据类型及其相关操作上,不是有句老话:"数据结构+算法=程序"!其次,有些语言的语法本身就存在设计问题(j

随机推荐