月度归档：2013年12月

一个简单的php Calender(日历）

未分类 
<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);

/**
 * 
 * 我的日历
 * date_default_timezone_set date mktime
 * @param int $year
 * @param int $month
 * @param string $timezone
 */
function myCalender($year = '', $month = '', $timezone = 'Asia/Shanghai')
{
 
 date_default_timezone_set ( $timezone );
 $year = abs ( intval ( $year ) );
 $month = abs ( intval ( $month ) );
 
 //是否是32位机
 if (is32())
 {
 if ($year < 1970 or $year >= 2038)
 {
 $year = date ( 'Y' );
 }
 } else
 {
 if ($year <= 0)
 {
 $year = date ( 'Y' );
 }
 
 }
 
 if ($month <= 0 or $month > 12)
 {
 $month = date ( 'm' );
 }
 
 //上一年
 $pretYear = $year - 1;
 //上一月
 $mpYear = $year;
 $preMonth = $month - 1;
 if ($preMonth <= 0)
 {
 $preMonth = 1;
 $mpYear = $pretYear;
 }
 
 //下一年
 $nextYear = $year + 1;
 //下一月
 $mnYear = $year;
 $nextMonth = $month + 1;
 if ($nextMonth > 12)
 {
 $nextMonth = 1;
 $mnYear = $nextYear;
 }
 
 //日历头
 $html = <<<HTML
<table width="500" border="1">
  <tr align="center">
    <td><a href="?y=$pretYear">上一年</a></td>
    <td><a href="?y=$mpYear&m=$preMonth">上一月</a></td>
     <td><a href="?">回到今天</a></td>
    <td><a href="?y=$mnYear&m=$nextMonth">下一月</a></td>
 <td><a href="?y=$nextYear">下一年</a></td>
  </tr>
  <tr align="center">
    <td colspan="5">{$year}年{$month}月</td>
  </tr>
  <tr>
  	<td colspan="5">
 <table width="100%" border="1">
 <tr align="center">
 <td style="background-color:#DAF0DD;">星期一</td>
 <td style="background-color:#DAF0DD;">星期二</td>
 <td style="background-color:#DAF0DD;">星期三</td>
 <td style="background-color:#DAF0DD;">星期四</td>
 <td style="background-color:#DAF0DD;">星期五</td>
 <td style="background-color:#F60;color:#fff;font-weight: bold;">星期六</td>
 <td style="background-color:#F60;color:#fff;font-weight: bold;">星期天</td>
 </tr>
HTML;
 
 $currentDay = date ( 'Y-m-j' );
 
 //当月最后一天
 $lastday = date ( 'j', mktime ( 0, 0, 0, $nextMonth, 0, $year ) );
 
 //循环输出天数
 $day = 1;
 $line = '';
 while ( $day <= $lastday )
 {
 $cday = $year . '-' . $month . '-' . $day;
 
 //当前星期几
 $nowWeek = date ( 'N', mktime ( 0, 0, 0, $month, $day, $year ) );
 
 if ($day == 1)
 {
 $line = '<tr align="center">';
 $line .= str_repeat ( '<td>&nbsp;</td>', $nowWeek - 1 );
 }
 
 if ($cday == $currentDay)
 {
 $style = 'style="color:red;"';
 } else
 {
 $style = '';
 }
 
 $line .= "<td $style>$day</td>";
 
 //一周结束
 if ($nowWeek == 7)
 {
 $line .= '</tr>';
 $html .= $line;
 $line = '<tr align="center">';
 }
 
 //全月结束
 if ($day == $lastday)
 {
 if ($nowWeek != 7)
 {
 $line .= str_repeat ( '<td>&nbsp;</td>', 7 - $nowWeek );
 }
 $line .= '</tr>';
 $html .= $line;
 
 break;
 }
 
 $day ++;
 }
 
 $html .= <<<HTML
 </table> 
 </td>
  </tr>
</table>
HTML;
 return $html;
}

/**
 * 
 * 检测是否是32位机
 */
function is32()
{
 $is32 = False;
 if (strtotime ( '2039-10-10' ) === False)
 {
 $is32 = True;
 }
 return $is32;
}
header("Content-type: text/html; charset=utf-8"); 
$y=$_REQUEST['y'];
$m=$_REQUEST['m'];
if(!$y){
 $y=2013;
}
echo myCalender($y);


?>

Html5版本的全套股票行情图

未分类

html54stock.0314

请使用支持html5的浏览器查看，推荐使用google chrome或者ipad体验，ie6，7，8都不支持html5

下面是行情图的快照和每个图的实现难点简介，有兴趣的朋友请用svn checkout出来，或者直接访问项目文件看源码 。

Google code的项目地址是：https://html54stock.googlecode.com

K线图 滑块控制

这个K线图和flash实现的K线图非常接近，滑块控制是实现的难点，这里是根据滑块滑动的位置计算k线数据的范围，并实时重画，事实证明
html5
canvas标签的性能还是相当的好的，在PC机上每秒可以重画20次以上，而在iPad上每秒可以重画10次左右，在ipad上流畅性有一定问题，所以
在ipad上实现了另外一个版本，使用手指滑动通过touch相关的时间控制范围

K线图 触摸控制

请使用ipad体验效果 

这个K线图和上面的基本一样，但是控制K线范围改用了触摸事件，用touchstart,touchmove等事件，这个需要事实计算手指所在的坐标，然后根据坐标判断是否要显示浮窗，显示K线柱的高，开，低，收等信息。

大分时图

分时图的实现是在一张画布上，当鼠标在画布上移动时，需要根据鼠标的坐标出十字，并显示鼠标所在时间的价格，这儿的十字叉是div实现的，而在画布
上显示对应时间的价格是用了画布的clearRect方法，先把指定区域的内容清除掉，然后再重新画上对应价格。这样实现的流畅性非常的好，无论是在平板
上还是在PC上。

小分时图

交易分析图

交易分析图画图不是难点，难点在于对鼠标事件或touch事件的处理，上图中的浮动框、十字叉都是div，这样的性能可以接受，而事实修改画布则不流畅。

成交额分析图

成交额分析图的实现基本上没什么难点。

百度地图取屏幕中心坐标

未分类 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9c9978a893e2dd6c3be3d3241f8e8f61"></script>
    <title>获取地图当前中心点</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
 
    // 百度地图API功能
    var map = new BMap.Map("allmap");            // 创建Map实例
    map.centerAndZoom(new BMap.Point(116.4035,39.915),8);  //初始化时，即可设置中心点和地图缩放级别。
    map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
    map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
    map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
    map.enableScrollWheelZoom();                            //启用滚轮放大缩小
    map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
 
    map.addEventListener("dragend", function(){
        //alert("你点击了地图");
        //alert("当前地图中心点：" + map.getCenter().lng + "," + map.getCenter().lat);
        map.clearOverlays();
        var marker1 = new BMap.Marker(new BMap.Point(map.getCenter().lng, map.getCenter().lat));  // 创建标注
        map.addOverlay(marker1);              // 将标注添加到地图中
    });
 
</script>

高德谷哥地图转百度地图

未分类
http://api.map.baidu.com/ag/coord/convert?from=2&to=4&x=23.134521&y=113.358803
 
from: 来源坐标系   （0表示原始GPS坐标，2表示Google坐标）
to: 转换后的坐标  (4就是百度自己啦，好像这个必须是4才行）
x: 精度
y: 纬度
 
 
 
 
JS：
BMap.Convertor.translate(ggPoint,2,translateCallback);    
//GCJ-02坐标转成百度坐标