Hpyer 的未知空间 » javascript http://hpyer.cn 现实的世界里寻找点滴的未知空间 Wed, 16 May 2012 06:17:09 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 国家/州/市及省/市/区三级联动JS代码 http://hpyer.cn/codes/js-auto-change-city-list http://hpyer.cn/codes/js-auto-change-city-list#comments Mon, 26 Mar 2012 15:29:00 +0000 Hpyer http://hpyer.cn/?page_id=795 最近做项目要用到城市三级联动的JS程序，但是本人手头只有之前从扣扣上取得的脚本，然而这个脚本的数据是全世界城市的，而项目则需要国内的城市，且需要详细到县市区的，显然原来的数据不适合。

在询问了许久的谷歌和度娘后，终于找到了一份比较全的国内省市区的数据，按照原来数据的格式将其修改成了进行修正，以让现有的脚本可以完美的支持。

这样以来，只要让不同的项目读取所需的数据即可，足以满足日常的应用。

然而有时我们可能需要将城市信息直接输出，而不是以下拉列表的形式呈现给用，所以本人又对脚本做了优化，使之只需简单设置即可这一功能，也可以定义各个下拉列表的名称，也可以支持多语言（数据须后期再翻译）。

演示地址

http://demo.hpyer.cn/js/LocalList/

下载地址

JS三级联动脚本   [v1.0 - 64.08 kB - 42 Hits]

使用方式

<script type="text/javascript" src="LocalList.js"></script>
<script type="text/javascript">
// 全世界数据
var options = {
    country: 'country',        // “国家”下拉列表的名称
    state: 'state',            // “州”下拉列表的名称
    city: 'city',            // “城市”下拉列表的名称
    current: 'CHN|33|1',        // 当前默认值，用管道符“|”分割
    language: 'zh_cn',        // 数据文件的语言
    path_to_xml: 'data/world/',    // 数据文件的目录
    read_only: false        // 数据是否只读，若设置为true，则无需设置 country 和 state
};
 
// 中国数据
var options = {
    country: 'province',        // “省”下拉列表的名称
    state: 'city',            // “市”下拉列表的名称
    city: 'area',            // “区”下拉列表的名称
    current: '33|01|03',        // 当前默认值，用管道符“|”分割
    language: 'zh_cn',        // 数据文件的语言
    path_to_xml: 'data/china/',    // 数据文件的目录
    read_only: false        // 数据是否只读，若设置为true，则无需设置 country 和 state
};
LocalList.mf_init(options);
</script>
]]> http://hpyer.cn/codes/js-auto-change-city-list/feed 1 JavaScript 下四舍五入法、舍去法、进一法截取小数的方法 http://hpyer.cn/javascript-number-format.html http://hpyer.cn/javascript-number-format.html#comments Mon, 28 Nov 2011 08:58:01 +0000 Hpyer http://hpyer.cn/?p=778 JavaScript 版四舍五入法、舍去法、进一法截取小数的方法。若不指定小数位数，则按整数截取。

var Digit = {};
/**
 * 四舍五入法截取一个小数
 * @param float digit 要格式化的数字
 * @param integer length 要保留的小数位数
 * @return float
 */<br />
Digit.round = function(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.round(digit);
    digit = Math.round(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
/**
 * 舍去法截取一个小数
 * @param float digit 要格式化的数字
 * @param integer length 要保留的小数位数
 * @return float
 */
Digit.floor = function(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.floor(digit);
    digit = Math.floor(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
/**
 * 进一法截取一个小数
 * @param float digit 要格式化的数字
 * @param integer length 要保留的小数位数
 * @return float
 */
Digit.ceil = function(digit, length) {
    length = length ? parseInt(length) : 0;
    if (length <= 0) return Math.ceil(digit);
    digit = Math.ceil(digit * Math.pow(10, length)) / Math.pow(10, length);
    return digit;
};
 
// 使用方法
var num = 1.2345;
document.write("数字：" + num + "<br />");
document.write("四色五入法：<br />");
document.write(num + " 保留3位小数：" + Digit.round(num, 3) + "<br />");
document.write(num + " 保留2位小数：" + Digit.round(num, 2) + "<br />");
document.write("舍去法：<br />");
document.write(num + " 保留3位小数：" + Digit.floor(num, 3) + "<br />");
document.write(num + " 保留2位小数：" + Digit.floor(num, 2) + "<br />");
document.write("进一法：<br />");
document.write(num + " 保留3位小数：" + Digit.ceil(num, 3) + "<br />");
document.write(num + " 保留2位小数：" + Digit.ceil(num, 2) + "<br />");
]]> http://hpyer.cn/javascript-number-format.html/feed 0 调用腾讯QQ天气预报的JS代码 http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html#comments Sat, 17 Sep 2011 01:12:37 +0000 Hpyer http://hpyer.cn/?p=738 一直在用腾讯的天气预报，原本都挺好的。可是腾讯视乎发现了有外链情况。又是对其IP地址库（http://fw.qq.com:80/ipaddress）加了防盗链，又是升级了脚本代码。导致我原来发的脚本无法正常显示天气。所以，最近抽空修改其代码，使其可以具备自动识别地址的功能，也可以手动指定城市，当然，最总要的是可以自定义显示效果。

简化版（不自动识别用户所在地）测试效果：

 


代码如下：

<div id="wealth">&nbsp;</div>
<script type="text/javascript" src="j.minisite.weather.js" charset="gbk"></script>
<script type="text/javascript">
MiniSite.Weather.print(function(data) {
    // data.code: 城市代码
    // data.city: 城市名
    // data.current: 当前温度
    // data.range: 温度范围
    // data.wealth: 天气
    // data.link: 腾讯天气的链接地址
    document.getElementById('wealth').innerHTML = data.city + " " + data.range + " " + data.wealth;
},"浙江省","杭州市");
 
// 如果是直辖市
// MiniSite.Weather.print(function(data) {
//    document.getElementById('wealth').innerHTML = data.city + " " + data.range + " " + data.wealth;
//},"上海市","上海市");
 
// 若未填写省市，则默认显示北京的天气
// MiniSite.Weather.print(function(data) {
//    document.getElementById('wealth').innerHTML = data.city + " " + data.range + " " + data.wealth;
//});
 
// 完整版
// MiniSite.Weather.print(function(data) {
//    document.getElementById('wealth').innerHTML = data.city + " " + data.range + " " + data.wealth;
//},"url/to/get/location");
</script>

代码下载

简化版（不自动识别用户所在地）下载地址：JS调用腾讯天气-简化版   [v1.0 - 4.54 kB - 56 Hits]

完整版（自动识别用户所在地）下载地址：JS调用腾讯天气-完整版   [v1.0 - 9.2 kB - 6 Hits] （内含PHP，ASP两种脚本）

完整版需要通过服务器端脚本（PHP、ASP、Java等）来实现了。可以谷歌、百度一下“XX读取纯真IP库”（XX是对应的服务器端脚本）。

完整版的服务器端代码中不包含纯真IP库，请自行下载后放到server/data目录中，文件名是：qqwry.dat
纯真IP库最新版：http://www.crsky.com/soft/2611.html

]]> http://hpyer.cn/a-js-code-to-loading-weather-from-qq.html/feed 0 获取 javascript 时间戳 http://hpyer.cn/get-the-timestamp-of-javascript.html http://hpyer.cn/get-the-timestamp-of-javascript.html#comments Mon, 20 Jun 2011 03:52:53 +0000 Hpyer http://hpyer.cn/?p=724 获取从 1970年1月1日午夜开始的时间戳（单位：毫秒）。

// 其毫秒部分都为 0，即只是精确到秒的毫秒数
// 将值除以 1000 后，可以和 PHP 互通
var timestamp = Date.parse(new Date());

或者：

// 精确到毫秒数
// 将值除以 1000 后取整也可和 PHP 互通，Math.ceil(timestamp / 1000)
var timestamp = (new Date()).valueOf();
]]> http://hpyer.cn/get-the-timestamp-of-javascript.html/feed 0 IE6 下修复 PNG 图片的 Javascript 代码 http://hpyer.cn/js-code-about-png-fix-in-ie6.html http://hpyer.cn/js-code-about-png-fix-in-ie6.html#comments Fri, 29 Apr 2011 15:07:42 +0000 Hpyer http://hpyer.cn/?p=717 　　最近开始学DIV+CSS布局和PS切图，发现PNG这东西是好，图像更真实、逼真，可惜就是IE6对透明背景的PNG图片支持不好，需要辅助以IE提供的滤镜才可以。

　　为了代码可以复用，网上找了很多JS代码，发现没几个好用的。不过Hpyer在此推荐的这个代码使用上还是比较方便的。

　　使用方法：

<!--[if lt IE 7]>
<script defer type="text/javascript" src="js/pngfix_inline.js"></script>
<script type="text/javascript" src="js/pngfix_bg.js"></script>
<![endif]-->

　　但是，IE6 下 PNG 图片修复后，会存在以下问题：

  • 导致背景图被放大（填充）为整个区域。 – 要求切图更为细致，样式 padding 也会影响整个区域的大小
  • 导致该区域的链接、按钮等失效。 – 需要使用样式 position:relative; 再对链接、按钮等修复

下载地址：IE6_pngfix   [v1.0 - 12.43 kB - 20 Hits]

压缩包中包含示例代码

 

]]> http://hpyer.cn/js-code-about-png-fix-in-ie6.html/feed 0 图片幻灯片JSlider http://hpyer.cn/codes/jslider http://hpyer.cn/codes/jslider#comments Mon, 19 Jan 2009 03:19:05 +0000 Hpyer http://hpyer.cn/?page_id=496 Summry / 概览：

This is an images slide based on Javascript.
这是一款基于 Javascript 的图片幻灯片程序。

DEMO / 示例：

http://demo.hpyer.cn/js/jslider/

Download / 下载：

JSlider   [v1.0 - 155.32 kB - 84 Hits]

Standard version (without any JS libraries) / 标准版（无须任何 JS 类库）

Usage / 用法：

1. Import script / 引入脚本

<script language="javascript" type="text/javascript" src="jslider.js"></script>

2. Import stylesheet / 引入样式

<link rel="stylesheet" type="text/css" href="jslider.css" />

3. Create slide / 创建幻灯片

<div id="jslider2" class="jslider"></div>
<script language="javascript" type="text/javascript">
var items = [];
items.push({
    file: 'images/1.jpg',
    link: '#1'
});
items.push({
    file: 'images/2.jpg',
    link: '#2',
    desc: 'Title'
});
JSlider.init('jslider', items, {width:'200px', height:'200px'});
</script>
]]> http://hpyer.cn/codes/jslider/feed 0