技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> JavaScript --> javascript 最简单的UI实现（学习）

javascript 最简单的UI实现（学习）

浏览:2095次  出处信息
   前些天看到世界javascript程序员有所增加，因此想着也凑凑热闹。看了一些基本的语法，写了些简单的小程序，还挺好使。但是后来也遇到一些问题，比如想写个简单的五子棋的游戏，想画一些数学公式的曲线，并没有找到现呈的东西可使。找了一些javascript的UI设计的东东，自已封装了了个最简单的画线的UI，下面介绍一下。

//zjaUI.js

/**************************************************************
 * this is write by zhangjiuan
 *************************************************************/

 var zjaUI = {
  //ui line color
  color: ‘#000′,
 
  /**
   * set color
   **/
  setColor: function(color)
  {
   this.color = color;
  },

  /**
   * draw line dot
   * but we may not need draw line dot and dot,
   * becourse if x = 0, and y …, so we can draw it as
   **/
  printDot: function(startX, startY, endX, endY)
  {
   document.write((’<span style=”position: absolute; left:’ + startX + ‘;top:’ + startY + ‘;width:’ + (endX - startX) + ‘;height:’ +
   (endY - startY) + ‘;font-size: 1px; background-color: ‘ + this.color + ‘;”></span>’));
  },

  /**
   * drawLine
   **/
  drawLine: function(startX, startY, endX, endY)
  {
   if (startX > endX) {
    var temp = endX;
    endX = startX;
    startX = temp;

    temp = endY;
    endY = startY;
    startY = temp;
   }

   if (startX == endX) {
    this.printDot(startX, startY, (endX + 1), endY);
   }
   else if (startY == endY) {
    this.printDot(startX, startY, endX, (endY + 1));
   }
   else {
    var e = (endY - startY) / (endX - startX);
    var tempX = startX;
    var widthY;
    while (startX < endX) {
     tempX++;
     widthY = Math.round((tempX - startX) * e);
     if (widthY == 0) {
      continue;
     }
     this.printDot(startX, startY, tempX, startY + widthY);
     startX = tempX;
     startY = startY + widthY;
    }
   }
  }
 }

    下面写个最简单的页面测试一下：

//test.html

<html>
<head>
<title>zja ui test</title>
<script language=’javascript’ src=’zjaUI.js’></script>
</head>
<body>
<script language=’javascript’>

var oX = 250;
var oY = 200;
function drawXAxis(len)
{
 zjaUI.drawLine(oX - len, oY, oX + len, oY);
 zjaUI.drawLine(oX + len - 5, oY - 5, oX + len, oY);
 zjaUI.drawLine(oX + len - 5, oY + 5, oX + len, oY);
}

function drawYAxis(len)
{
 zjaUI.drawLine(oX, oY - len, oX, oY + len);
 zjaUI.drawLine(oX - 5, oY - len + 5, oX, oY - len);
 zjaUI.drawLine(oX, oY - len, oX + 5, oY - len + 5);
}

function drawSin(axis_len, radius)
{
 var eal = ((2 * Math.PI) / axis_len);
 var pos = (oX - Math.round(axis_len / 2));
 var dig;
 var oldX = Math.round(oX - axis_len / 2);
 var oldY = oY;
 
 while(pos < (oX + Math.round(axis_len / 2))) {
  dig = ((pos - oX) * eal);
  cy = (oY + Math.round(Math.sin(dig) * radius / 2));
  zjaUI.drawLine(oldX, oldY, pos, cy);

  oldX = pos;
  oldY = cy;
  pos++;
 }
}

var AXIS_LEN = 150;

drawXAxis(AXIS_LEN);
drawYAxis(AXIS_LEN);
drawSin(100, 100);
</script>
</body>
</html>

好了，现在运行一下，看下效果吧：）

his15d

怎么样，效果不错吧。其实javascript对类还有另外一种写法：

//zjaUI.js

var zjaUI = function() {
  //ui line color
  color = ‘#000′;
 
  /**
   * init color
   **/
  this.setColor = function(color)
  {
   this.color = color;
  }

  /**
   * draw line dot
   * but we may not need draw line dot and dot,
   * becourse if x = 0, and y …, so we can draw it as
   **/
  function printDot(startX, startY, endX, endY)
  {
   document.write((’<span style=”position: absolute; left:’ + startX + ‘;top:’ + startY + ‘;width:’ + (endX - startX) + ‘;height:’ +
   (endY - startY) + ‘;font-size: 1px; background-color: ‘ + this.color + ‘;”></span>’));
  }

  /**
   * drawLine
   **/
  this.drawLine = function(startX, startY, endX, endY)
  {
   if (startX > endX) {
    var temp = endX;
    endX = startX;
    startX = temp;

    temp = endY;
    endY = startY;
    startY = temp;
   }

   if (startX == endX) {
    printDot(startX, startY, (endX + 1), endY);
   }
   else if (startY == endY) {
    printDot(startX, startY, endX, (endY + 1));
   }
   else {
    var e = (endY - startY) / (endX - startX);
    var tempX = startX;
    var widthY;
    while (startX < endX) {
     tempX++;
     widthY = Math.round((tempX - startX) * e);
     if (widthY == 0) {
      continue;
     }
     printDot(startX, startY, tempX, startY + widthY);
     startX = tempX;
     startY = startY + widthY;
    }
   }
  }
 }

//test.html

<html>
<head>
<title>zja ui test</title>
<script language=’javascript’ src=’zjaUI.js’></script>
</head>
<body>
<script language=’javascript’>

zjaUIo = new zjaUI();

var oX = 250;
var oY = 200;
function drawXAxis(len)
{
 zjaUIo.drawLine(oX - len, oY, oX + len, oY);
 zjaUIo.drawLine(oX + len - 5, oY - 5, oX + len, oY);
 zjaUIo.drawLine(oX + len - 5, oY + 5, oX + len, oY);
}

function drawYAxis(len)
{
 zjaUIo.drawLine(oX, oY - len, oX, oY + len);
 zjaUIo.drawLine(oX - 5, oY - len + 5, oX, oY - len);
 zjaUIo.drawLine(oX, oY - len, oX + 5, oY - len + 5);
}

function drawSin(axis_len, radius)
{
 var eal = ((2 * Math.PI) / axis_len);
 var pos = (oX - Math.round(axis_len / 2));
 var dig;
 var oldX = Math.round(oX - axis_len / 2);
 var oldY = oY;
 
 while(pos < (oX + Math.round(axis_len / 2))) {
  dig = ((pos - oX) * eal);
  cy = (oY + Math.round(Math.sin(dig) * radius / 2));
  zjaUIo.drawLine(oldX, oldY, pos, cy);

  oldX = pos;
  oldY = cy;
  pos++;
 }
}

var AXIS_LEN = 150;

drawXAxis(AXIS_LEN);
drawYAxis(AXIS_LEN);
drawSin(100, 100);
</script>
</body>
</html>

    测试一下，效果依旧。

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习
<< 前一篇：表单校验
后一篇：控制浏览器是否缓存网页状态 >>
文章信息
© 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习

京ICP备15002552号-1