JavaScript on Dapeng Zhang

禁止在iphone或者ipad上双击或者单击页面

Tue, 22 Jul 2025 18:31:52 +0800

先看一段代码

$('.advertise-main .advertise-cover').bind('touchend', function(event){
 event.preventDefault();
});

能明白这个是用来啥的不！

阻止safari 再iphone或者ipad上不能点击页面，禁止再iphone或者ipad上双击页面

参考：http://appcropolis.com/blog/howto/implementing-doubletap-on-iphones-and-ipads//

iOS与JavaScript交互: MessageHandler

Tue, 15 Jul 2025 09:51:00 +0000

WKWebView有一个内容交互控制器，该对象提供了通过JS向WKWebView发送消息的途径。需要设置MessageHandler，我把这个功能简称为MessageHandler。

首先了解下iOS开发中需要调用的方法

- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

和

- (void)removeScriptMessageHandlerForName:(NSString *)name;

下面看下如何调用

添加MessageHandler

[self.webView.configuration.userContentController addScriptMessageHandler:self name:@"showAlert"];

移除MessageHandler

[self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"showAlert"];

JS调用

window.webkit.messageHandlers.<name>.postMessage(<messageBody>)

这个name就是设置MessageHandler的第二个参数

window.webkit.messageHandlers.getString.postMessage(null);

注意点

在JS中写起来简单，不用再用创建URL的方式那么麻烦了。

JS传递参数更方便。使用拦截URL的方式传递参数，只能把参数拼接在后面，如果遇到要传递的参数中有特殊字符，如&、=、?等，必须得转换，否则参数解析肯定会出错。

示例演示

html代码部分

四个按钮分别演示JS传NULL给WKWebView，然后WKWebView调用JS方法；JS传字符串、JS传数组、JS传字典改变导航背景。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script>
 function loadURL(url) {
 var iFrame;
 iFrame = document.createElement("iframe");
 iFrame.setAttribute("src", url);
 iFrame.setAttribute("style", "display:none;");
 iFrame.setAttribute("height", "0px");
 iFrame.setAttribute("width", "0px");
 iFrame.setAttribute("frameborder", "0");
 document.body.appendChild(iFrame);
 // 发起请求后这个iFrame就没用了，所以把它从dom上移除掉
 iFrame.parentNode.removeChild(iFrame);
 iFrame = null;
 }

 function asyncAlert(content) {
 setTimeout(function(){
 alert(content);
 },1);
 }

 function showAlert() {
 window.webkit.messageHandlers.showAlert.postMessage(null);
 }

 function alertWithMessage(content) {
 asyncAlert(content);
 document.getElementById("returnValue").value = content;
 }

 function postString() {
 window.webkit.messageHandlers.postString.
 postMessage('r=10,g=170,b=250,a=0.5');
 }

 function postArray() {
 window.webkit.messageHandlers.postArray.
 postMessage([Math.floor(Math.random()*255),
 Math.floor(Math.random()*255),
 Math.floor(Math.random()*255),0.5]);
 }

 function postDictionary() {
 window.webkit.messageHandlers.postDictionary.
 postMessage({red: Math.floor(Math.random()*255), 
 green: Math.floor(Math.random()*255),
 blue: Math.floor(Math.random()*255),
 alpha: 0.5});
 }

 </script>
</head>

<body>
 <input type="button" value="OC调用JS方法" onclick="showAlert()">
 <input type="button" value="JS传字符串" onclick="postString()">
 <input type="button" value="JS传数组" onclick="postArray()">
 <input type="button" value="JS传字典" onclick="postDictionary()">
</body>

</html>

object-c代码部分

加载WKWebView

- (void)loadWebView {
 // 偏好配置
 WKWebViewConfiguration *config = [WKWebViewConfiguration new];
 config.preferences = [WKPreferences new];
 config.preferences.minimumFontSize = 30.0f;
 config.preferences.javaScriptCanOpenWindowsAutomatically = YES;

 self.webView = [[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
 self.webView.UIDelegate = self; // 设置交互代理
 [self.view addSubview:self.webView];

 // 加载HTML
 NSString *path = [[NSBundle mainBundle] pathForResource:@"index2" ofType:@"html"];
 NSString *htmlStr = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
 [self.webView loadHTMLString:htmlStr baseURL:nil];
}

添加和移除处理

- (void)viewWillAppear:(BOOL)animated {
 [super viewWillAppear:animated];
 [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"showAlert"];
 [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"postString"];
 [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"postArray"];
 [self.webView.configuration.userContentController addScriptMessageHandler:self name:@"postDictionary"];
}

- (void)dealloc {
 [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"showAlert"];
 [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"postString"];
 [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"postArray"];
 [self.webView.configuration.userContentController removeScriptMessageHandlerForName:@"postDictionary"];
}

实现协议

我这里实现了两个协议 WKUIDelegate,WKScriptMessageHandler，WKUIDelegate是因为我在JS中弹出了alert。WKScriptMessageHandler是因为我们要处理JS调用OC方法的请求。

#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
 if ([message.name isEqualToString:@"showAlert"]) {
 [self alert];
 }
 else if ([message.name isEqualToString:@"postString"]) {
 [self changeColorWithString:message.body];
 }
 else if ([message.name isEqualToString:@"postArray"]) {
 [self changeColorWithArray:message.body];
 }
 else if ([message.name isEqualToString:@"postDictionary"]) {
 [self changeColorWithDictionary:message.body];
 }
}

- (void)alert {
 // OC调用JS
 NSString *jsStr = [NSString stringWithFormat:@"alertWithMessage('%@')", @"OC调用JS的方法"];
 [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
 NSLog(@"%@----%@",result, error);
 }];
}

- (void)changeColorWithString:(NSString *)string {
 NSArray *params =[string componentsSeparatedByString:@","];

 NSMutableDictionary *tempDic = [NSMutableDictionary dictionary];
 for (NSString *paramStr in params) {
 NSArray *dicArray = [paramStr componentsSeparatedByString:@"="];
 if (dicArray.count > 1) {
 NSString *decodeValue = [dicArray[1] stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
 [tempDic setObject:decodeValue forKey:dicArray[0]];
 }
 }
 CGFloat r = [[tempDic objectForKey:@"r"] floatValue];
 CGFloat g = [[tempDic objectForKey:@"g"] floatValue];
 CGFloat b = [[tempDic objectForKey:@"b"] floatValue];
 CGFloat a = [[tempDic objectForKey:@"a"] floatValue];

 self.navigationController.navigationBar.backgroundColor = [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:a];
}

- (void)changeColorWithArray:(NSArray *)array {
 CGFloat r = [array[0] floatValue]/255.0;
 CGFloat g = [array[1] floatValue]/255.0;
 CGFloat b = [array[2] floatValue]/255.0;
 CGFloat alpha = [array[3] floatValue];
 self.navigationController.navigationBar.backgroundColor = [UIColor colorWithRed:r green:g blue:b alpha:alpha];
}

- (void)changeColorWithDictionary:(NSDictionary *)dict {
 CGFloat r = [dict[@"red"] floatValue]/255.0;
 CGFloat g = [dict[@"green"] floatValue]/255.0;
 CGFloat b = [dict[@"blue"] floatValue]/255.0;
 CGFloat alpha = [dict[@"alpha"] floatValue];
 self.navigationController.navigationBar.backgroundColor = [UIColor colorWithRed:r green:g blue:b alpha:alpha];
}

WKWebView中使用弹窗

#pragma mark - WKUIDelegate
- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler {
 UIAlertController *alertCrontroller = [UIAlertController alertControllerWithTitle:@"提示" message:message preferredStyle:UIAlertControllerStyleAlert];
 [alertCrontroller addAction:[UIAlertAction actionWithTitle:@"知道了" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
 completionHandler();
 }]];
 [self presentViewController:alertCrontroller animated:YES completion:nil];
}

文章参考：https://www.jianshu.com/p/160f529e16fa

JavaScript全局异常监测

Mon, 14 Jul 2025 14:44:50 +0000

JavaScript全局异常监测

在写代码的过程中一直遇到一个问题，就是如何来监测异常代码的处理

如果在开发中，可以使用chrome dev tools来监测代码异常，并能时刻监测代码的异常部分

但是在代码上线之后，如果监测代码就比较麻烦

这里提供一个监测全局的代码，虽然也很多网站有关于类似代码的分享

这里主要是记录下，防止忘记，找起来麻烦，关键是这个代码是我自己经过测试使用，比较完善的一个，也许别人也有其他版本

但是我这个版本我保证是可以用的

只需要放在<script></script>标签里面就可以了，如果需要将异常的代码信息上传到服务器，可以自己修改下，将console.log部分改成数据请求的代码就可以了

代码如下

window.onerror = function(msg,url,l){
 txt="There was an error on this page.\n\n"
 txt+="Error: " + msg + "\n"
 txt+="URL: " + url + "\n"
 txt+="Line: " + l + "\n\n"
 txt+="Click OK to continue.\n\n"
 console.log(txt);
 return true
};

webapp中vuejs组合qiniu js sdk实现上传视频功能

Fri, 11 Jul 2025 11:16:09 +0000

采用七牛的SDK方式上传（qiniu sdk文件可以去官网示例页面下载，放在github上的文件需要自己下载后打包的，很麻烦）

首先看下公用的上传函数

function uploadWithSDK (file, token, putExtra, config, domain) {
 var self = this;

 var finishedAttr = [];

 var compareChunks = [];

 var observable;

 if (file) {
 // var key = file.name;
 var key = 'activity/' + (new Date().valueOf()) + '/' + self.uploadKey;
 putExtra.params["x:name"] = key.split(".")[0];

 // 设置next,error,complete对应的操作，分别处理相应的进度信息，错误信息，以及完成后的操作
 var error = function (err) {
 console.log('err = ', err);
 self.uploading = false;
 };

 var complete = function (res) {
 console.log('res = ', res);
 self.uploading = false;
 self.uploaded = true;
 var url = self.domain + '/' + res.key;
 console.log(url);
 self.videoUrl = url
 };

 var next = function (response) {
 var chunks = response.chunks || [];
 var total = response.total;
 console.log('total = ', total);
 console.log('chunks = ', chunks);
 self.uploadPercent = (total.percent + '').substr(0, 5) + '%';
 };

 var subObject = {
 next: next,
 error: error,
 complete: complete
 };

 var subscription;

 // 调用sdk上传接口获得相应的observable，控制上传和暂停
 observable = qiniu.upload(file, key, token, putExtra, config);

 subscription = observable.subscribe(subObject);

 // subscription.unsubscribe();
 }
}

调用上传视频函数

function uploadVideo(event) {
 var file = event.target.files[0];
 // this.uploading = true;

 console.log(file);
 console.log(file.size);

 var config = {
 useCdnDomain: true,
 disableStatisticsReport: false,
 retryCount: 6,
 region: qiniu.region.z0
 };

 var putExtra = {
 fname: "",
 params: {},
 mimeType: null
 };

 uploadWithSDK(file, this.uploadToken, putExtra, config, this.domain);
}

触发file的click事件

function upload() {
 this.$refs.fileElem.dispatchEvent(new MouseEvent('click'));
}

从上面代码可以看出，代码适用于vuejs中，但是触发click的话，只要是js代码都能实现

vuejs中视频上传相关变量初始化

data: {
 uploadToken: '',
 domain: '',
 uploadKey: '',
 randomKey: '',
 uploading: false,
 uploaded: false,
 videoUrl: '',
 uploadPercent: '',
}

vuejs中上传视频隐藏表单的HTML

<!-- 上传图片的隐藏元素 -->
<div style="display:none">
 <form id="fileElem1">
 <input ref=fileElem type="file" class="file" accept="video/*" name="img" @change="uploadVideo($event)" style="display: none">
 </form>
</div>

vuejs中上传视频按钮部分

<span @click='upload' style="">上传视频</span>

这里七牛的sdk请去官网下载

想不通直接打包一个不挺好的嘛，自己下载下来非常麻烦。（实例地址 http://jssdk-v2.demo.qiniu.io/）

Javascript的base64实现及使用

Thu, 10 Jul 2025 11:52:44 +0000

实例及实现原理如下

var uploadKey = 'avatar/20191212/userid-1.png';

// key 进行base64处理
// 第一步使用encodeURIComponent() 函数把字符串作为 URI 组件进行编码
// 第二步使用unescape() 函数对通过 escape() 编码的字符串进行解码
// 第三步使用btoa() 方法用于创建一个 base-64 编码的字符串。该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。base64 解码使用方法是 atob() 。

var key = btoa(unescape(encodeURIComponent(uploadKey)));

var url = "http://upload.qiniup.com/putb64/12" + '/key/' + key;

运行上面代码结果如下

> var uploadKey = 'avatar/20191212/userid-1.png';
< undefined
> var key = btoa(unescape(encodeURIComponent(uploadKey)));
< undefined
> var url = "http://upload.qiniup.com/putb64/12"+'/key/'+key; 
< undefined
> console.log(url)
 VM7861:1 http://upload.qiniup.com/putb64/12/key/YXZhdGFyLzIwMTkxMjEyL3VzZXJpZC0xLnBuZw==
> undefined

参考如下 https://stackoverflow.com/questions/246801/how-can-you-encode-a-string-to-base64-in-javascript

我们分解执行下

> var a = encodeURIComponent(uploadKey)
< undefined
> console.log(a)
< avatar%2F20191212%2Fuserid-1.png
> undefined
< var b = unescape(a);
> undefined
< console.log(b)
 avatar/20191212/userid-1.png
> undefined
< var c = btoa(b)
> undefined
< console.log(c)
 YXZhdGFyLzIwMTkxMjEyL3VzZXJpZC0xLnBuZw==
> undefined

ESLint - no-await-in-loop 疑惑

Thu, 03 Jul 2025 17:11:47 +0000

在使用eslint的时候，遇到async/await语法会报错，总是提示 no-await-in-loop。举个例子看下面的代码的逻辑

for (let i = 0; i < userRedpacketItem.length; i += 1) {
 userRedpacketItem[i].product_id = await productModel.redpacketMapPrdIdToRefId(ctx, userRedpacketItem[i].product_id);
 // 是否过期
 userRedpacketItem[i] = userHasRedpacketModel.markExpire(userRedpacketItem[i]);
}

注意点是在for循环中使用了await

有点懵了，不能await，那我怎么取值进行更新值呢，根本就没有办法处理了，难我要先进行取值然后在进行循环赋值？嗯，这样肯定不行的，看来自己还是有点菜，不知其中的规范用法，好了，进行不断学习找到了解决办法，看下面的代码

await Promise.all(userRedpacketItem.map(async (item) => {
 let newItem = item;
 newItem.product_id = await productModel.redpacketMapPrdIdToRefId(ctx, item.product_id);
 // 是否过期
 newItem = userHasRedpacketModel.markExpire(item);
 return newItem;
}));

嗯这样就不报错了，而且这个方法觉得也很node。

jQuery 图片加载成功调用指定执行方法

Thu, 03 Jul 2025 17:11:40 +0000

页面中总有一些操作是，需要图片加载完之后去做的，下面的代码可实现，需要的拿走

$("img").one("load", function(v) {
 // 逻辑处理
 $(v.target).parent().parent().find('.over-shade').css({'height':$(v.target).height()});
}).each(function() {
 if(this.complete) $(this).load();
});

JavaScript 之事件统计，防重复统计

Thu, 03 Jul 2025 11:59:17 +0000

事件统计防重复统计，不服来挑错

function track(eventName, params) {
 var img = new Image();
 if(typeof params == 'object') {
 params = JSON.stringify(params);
 } else {
 params = '';
 }
 var t = new Date().valueOf();
 var random = Math.random();
 var referrer = document.referrer;
 img.src = '/track?event='+encodeURIComponent(eventName)+'&params=' + encodeURIComponent(params) + '&t='+t+'&r='+random+'&referrer='+referrer;
}

后端将r值t值,外加一个ip的值，作为唯一的索引。为了做到数据准确到达，程序端少操作为主，这样会减少操作事件，将逻辑交给数据库操作了，增加数据到达率。

let insertEventSql = `REPLACE INTO ${config.mysql.prefix}xxxx.event_log 
 (${keys.join(',')}) 
 VALUES 
 (${values.join(',')})`;

如何检测javascript的变量是 undefined，防止终止js运行

Thu, 03 Jul 2025 11:08:29 +0000

为了防止未定义的变量，导致程序运行失败，需要我们判断下变量是否未undefined

typeof(decryptData) != "undefined" ? decryptData.payResult : ''

这里还是个对象的值，想想如果不是undefined，但是没有payResult的情况吧。

JavaScript 日期时间戳转换

Wed, 02 Jul 2025 16:01:06 +0000

日期转时间戳

var date = '2016/05/09';
date = [date, '00:00:00'].join(' ')
date = Math.round(new Date(date).valueOf() / 1000);

//以上是我觉得兼容性比较强的

时间戳转日期

new Date().toLocaleString()

JavaScript的中的test和match，结果你不敢相信

Mon, 30 Jun 2025 15:57:08 +0000

大家看下代码，这个test和match还是晕了我很久的。

var __parsers = [];
__parsers.push({'regExp':/.*one.*/g});
__parsers.push({'regExp':/.*two.*/g});
__parsers.push({'regExp':/.*three.*/g});
__parsers.push({'regExp':/.*four.*/g});
__parsers.push({'regExp':/.*five.*/g});
__parsers.push({'regExp':/.*six.*/g});
__parsers.push({'regExp':/.*seven.*/g});
__parsers.push({'regExp':/.*eight.*/g});

var matchParser = function(subject){
	for (var i = 0; i < __parsers.length; i++) {
	 // console.log('RegExp:',__parsers[i].regExp);
		if(subject.match(__parsers[i].regExp)){
		 return __parsers[i];
		}
	}
	throw new Error('No Match');
}

var testParser = function(subject){
	for (var i = 0; i < __parsers.length; i++) {
	 // console.log('RegExp:',__parsers[i].regExp);
		if (__parsers[i].regExp.test(subject)) {
			return __parsers[i];
		}
	}
	throw new Error('No Match');
}

简单的测试代码就这些。我们用一个循环来执行。

//第一种测试

for(var i=0;i<5;i++){
	var subject = 'two';
	try{
		console.log(testParser(subject));
	}catch(err){
		console.log(err.message);
	}
}

//结果

{ regExp: /.*two.*/g }
No Match
{ regExp: /.*two.*/g }
No Match
{ regExp: /.*two.*/g }

看吧，还是有没有匹配到的吧。罪过啊。

//第二种测试

for(var i=0;i<5;i++){
	var subject = 'two';
	try{
		console.log(matchParser(subject));
	}catch(err){
		console.log(err.message);
	}
}

//结果

{ regExp: /.*two.*/g }
{ regExp: /.*two.*/g }
{ regExp: /.*two.*/g }
{ regExp: /.*two.*/g }
{ regExp: /.*two.*/g }

你们看，是不是瞬间很开心啊。

可以使用nodejs执行整理执行一下。被坑了的感觉有木有啊！

可以看出来，使用match的全部匹配出来了，为什么，给你一个可想的空间吧。match完胜啊。

Gulp 实现 js、CSS,img 合并和压缩

Mon, 30 Jun 2025 14:08:55 +0000

前提条件，知道如何安装nodejs、gulp，这里不做介绍，可以自行google

实现此功能需要安装的gulp工具有如下

npm install gulp-htmlmin gulp-imagemin imagemin-pngcrush gulp-minify-css gulp-jshint gulp-uglify gulp-concat gulp-rename gulp-notify --save-dev

gulp配置文件如下

//在你的项目根目录下创建gulpfile.js，代码如下：
 
// 引入 gulp
var gulp = require('gulp');
 
// 引入组件
var htmlmin = require('gulp-htmlmin'), //html压缩
 imagemin = require('gulp-imagemin'),//图片压缩
 pngcrush = require('imagemin-pngcrush'),
 minifycss = require('gulp-minify-css'),//css压缩
 jshint = require('gulp-jshint'),//js检测
 uglify = require('gulp-uglify'),//js压缩
 concat = require('gulp-concat'),//文件合并
 rename = require('gulp-rename'),//文件更名
 notify = require('gulp-notify');//提示信息
 
// 压缩html
gulp.task('html', function() {
 return gulp.src('src/*.html')
 .pipe(htmlmin({collapseWhitespace: true}))
 .pipe(gulp.dest('./dest'))
 .pipe(notify({ message: 'html task ok' }));
 
});
 
// 压缩图片
gulp.task('img', function() {
 return gulp.src('src/images/*')
 .pipe(imagemin({
 progressive: true,
 svgoPlugins: [{removeViewBox: false}],
 use: [pngcrush()]
 }))
 .pipe(gulp.dest('./dest/images/'))
 .pipe(notify({ message: 'img task ok' }));
});
 
// 合并、压缩、重命名css
gulp.task('css', function() {
 return gulp.src('src/css/*.css')
 .pipe(concat('main.css'))
 .pipe(gulp.dest('dest/css'))
 .pipe(rename({ suffix: '.min' }))
 .pipe(minifycss())
 .pipe(gulp.dest('dest/css'))
 .pipe(notify({ message: 'css task ok' }));
});
 
// 检查js
gulp.task('lint', function() {
 return gulp.src('src/js/*.js')
 .pipe(jshint())
 .pipe(jshint.reporter('default'))
 .pipe(notify({ message: 'lint task ok' }));
});
 
// 合并、压缩js文件
gulp.task('js', function() {
 return gulp.src('src/js/*.js')
 .pipe(concat('all.js'))
 .pipe(gulp.dest('dest/js'))
 .pipe(rename({ suffix: '.min' }))
 .pipe(uglify())
 .pipe(gulp.dest('dest/js'))
 .pipe(notify({ message: 'js task ok' }));
});
 
// 默认任务
gulp.task('default', function(){
 gulp.run('img', 'css', 'lint', 'js', 'html');
 
 // 监听html文件变化
 gulp.watch('src/*.html', function(){
 gulp.run('html');
 });
 
 // Watch .css files
 gulp.watch('src/css/*.css', ['css']);
 
 // Watch .js files
 gulp.watch('src/js/*.js', ['lint', 'js']);
 
 // Watch image files
 gulp.watch('src/images/*', ['img']);
});

执行下看看效果吧

Grunt 实现 js、CSS 合并和压缩

Mon, 30 Jun 2025 14:08:52 +0000

前提条件，知道如何安装nodejs、grunt，这里不做介绍，可以自行google

实现此功能需要安装的Grunt工具有如下

grunt-contrib-concat

grunt-contrib-uglify

grunt-css

1、实现js的合并和压缩

module.exports = function(grunt) {
 // 配置
 grunt.initConfig({
 pkg : grunt.file.readJSON('package.json'),
 concat : { //合并文件
 domop : {
 src: ['assets/test1.js', 'assets/test2.js'], //源文件目录
 dest: 'dest/result.js' //目标文件目录，自动创建dest目录
 }
 },
 uglify : { //压缩文件
 options : {
 banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
 },
 build : {
 src : 'dest/result.js',
 dest : 'dest/result.min.js'
 }
 }
 });
 // 载入concat和uglify插件，分别对于合并和压缩
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 // 注册任务
 grunt.registerTask('default', ['concat', 'uglify']);
};

2、实现css的合并和压缩

module.exports = function(grunt){
 grunt.initConfig({
 pkg:grunt.file.readJSON('package.json'),
 concat:{
 css:{
 src:['assets/*.css'],
 dest:'dest/all.css',
 }
 },
 cssmin:{
 css: {
 src: 'dest/asset/all.css',
 dest: 'dest/asset/all-min.css'
 }
 }
 
 });
 // 载入concat和css插件
 grunt.loadNpmTasks('grunt-contrib-concat');//用于合并
 grunt.loadNpmTasks('grunt-css');//用于压缩
 grunt.registerTask('default',['concat','cssmin']);//任务
};

禁止图片另存为

Mon, 30 Jun 2025 11:48:58 +0000

实现图片禁止另存为

<script type="text/javascript" >
function stop(){
 return false;
}
document.onkeydown = stop;
document.onselectstart = stop;
document.onmousedown = stop;
document.oncontextmenu=stop;
</script>

将以上代码加入之间

如何将 Skype 嵌入网页

Mon, 30 Jun 2025 11:48:54 +0000

第一次使用，skype嵌入网页，还真是没有类似微博那么简单，不过功能很强大

Html代码：

<div id="skype" style="position:absolute;text-align:right;top:200px;width:100%">
<a href="skype:david_tompeng?call">
 <img src="http://mystatus.skype.com/smallclassic/david_tompeng" style="border: none;" alt="My status" />
</a>
</div>

不能浮动，加个js

<script>
 $.fn.smartFloat = function() {
 var position = function(element) {
 var top = element.position().top; //当前元素对象element距离浏览器上边缘的距离
 var pos = element.css("position"); //当前元素距离页面document顶部的距离
 $(window).scroll(function() { //侦听滚动时
 var scrolls = $(this).scrollTop();
 if (scrolls > top) { //如果滚动到页面超出了当前元素element的相对页面顶部的高度
 if (window.XMLHttpRequest) { //如果不是ie6
 element.css({ //设置css
 position: "fixed", //固定定位,即不再跟随滚动
 top: 200 //距离页面顶部为0
 }).addClass("shadow"); //加上阴影样式.shadow
 } else { //如果是ie6
 element.css({
 top: scrolls //与页面顶部距离
 });
 }
 }else {
 element.css({ //如果当前元素element未滚动到浏览器上边缘，则使用默认样式
 position: pos,
 top: top
 }).removeClass("shadow");//移除阴影样式.shadow
 }
 });
 };
 return $(this).each(function() {
 position($(this));
 });
 };
 
 $(function(){
 $("#skype").smartFloat();
 })
</script>

不要忘记引入检测代码

<script type="text/javascript" src="http://download.skype.com/share/skypebuttons/js/skypeCheck.js"></script>

jQuery 消息提醒插件 toastmessage

Fri, 27 Jun 2025 14:14:50 +0000

最近做系统，想到使用后台要使用消息提醒，但是一直苦恼消息提醒的效果，于是找了一个toastmessage，还不错。记录下使用的方法。

第一步：引入需要的文件

<script type="text/javascript" src="/js/admin/toastmessage/jquery.toastmessage.js"></script>
<link href="/js/admin/toastmessage/css/jquery.toastmessage.css" type="text/css" rel="stylesheet" />

第二步：测试使用的函数

<script>
 function showSuccessToast() {
 $().toastmessage('showSuccessToast', "Success Dialog which is fading away ...");
 }
 function showStickySuccessToast() {
 $().toastmessage('showToast', {
 text : 'Success Dialog which is sticky',
 sticky : true,
 position : 'top-right',
 type : 'success',
 closeText: '',
 close : function () {
 console.log("toast is closed ...");
 }
 });
 
 }
 function showNoticeToast() {
 $().toastmessage('showNoticeToast', "Notice Dialog which is fading away ...");
 }
 function showStickyNoticeToast() {
 $().toastmessage('showToast', {
 text : 'Notice Dialog which is sticky',
 sticky : true,
 position : 'top-right',
 type : 'notice',
 closeText: '',
 close : function () {console.log("toast is closed ...");}
 });
 }
 function showWarningToast() {
 $().toastmessage('showWarningToast', "Warning Dialog which is fading away ...");
 }
 function showStickyWarningToast() {
 $().toastmessage('showToast', {
 text : 'Warning Dialog which is sticky',
 sticky : true,
 position : 'top-right',
 type : 'warning',
 closeText: '',
 close : function () {
 console.log("toast is closed ...");
 }
 });
 }
 function showErrorToast() {
 $().toastmessage('showErrorToast', "Error Dialog which is fading away ...");
 }
 function showStickyErrorToast() {
 $().toastmessage('showToast', {
 text : 'Error Dialog which is sticky',
 sticky : true,
 position : 'top-right',
 type : 'error',
 closeText: '',
 close : function () {
 console.log("toast is closed ...");
 }
 });
 }
</script>

实例网站：

http://akquinet.github.io/jquery-toastmessage-plugin/demo/demo.html

尝试SuperSlide2,实现图片滚动

Fri, 27 Jun 2025 14:14:33 +0000

尝试SuperSlide2,实现图片滚动，感觉很强大，这里只是简单的演示其中一种类型，想看更多类型的话，可以去http://www.superslide2.com 查看，这里贴一下自己演示的代码，期望对使用的朋友所有启发，我这里是结合了两个例子实现的

css代码：

.focus-item ul li.item{
 text-align: center;
}
.scroll-area .prev,.scroll-area .next{
 position: absolute;
 bottom: 590px;
 width: 29px;
 height: 64px;
 opacity: 0.6;
 overflow: hidden;
 display: none;
 text-indent: -999px;
 border: medium none;
 background: url('/images/arrowLR.png') no-repeat scroll 0% 0% transparent;
}
.scroll-area .prev{
 left: 0px;
 background-position: -50px 0px;
}
.scroll-area .next{
 right: 0px;
}
.scroll-area .bdOn .prev,.scroll-area .bdOn .next{
 display: block;
}

.scroll-area .focus-hd{
 /*width: 832px;*/
 /*left: 60px;*/
 /*position: absolute;*/
 /*height: 100px;*/
 /*overflow: hidden;*/
 left: 63px;
 position: absolute;
}

.focus-hd .sNext, .focus-hd .sPrev{
 float: left;
 display: block;
 width: 14px;
 height: 47px;
 text-indent: -9999px;
 background: url('/images/sprites1008.png') no-repeat scroll 0px -3046px transparent;
}
.focus-hd .sNext{
 background-position: 0px -2698px;
}

.focus-hd .show_bottom_nav {
 float: left;
 margin: 0px 6px;
 display: inline;
 width: 832px;
 overflow: hidden;
}
.focus-hd .show_bottom_nav ul li{
 margin-left:15px;
}

html演示代码：

<div id="" class="scroll-area">
 <div class="focus-item">
 <ul>
 <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" class="item" data-text-id="#thumbTxt1">
 <img src="/attachments/news_gallery/20140528162328_454.jpg" alt="标题1" />
 </li>
 <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" class="item" data-text-id="#thumbTxt2">
 <img src="/attachments/news_gallery/20140528162328_733.jpg" alt="标题2" />
 </li>
 </ul>
 <a class="prev" href="javascript:void(0)"></a>
 <a class="next" href="javascript:void(0)"></a>
 </div>


 <div class="focus-hd" style="">
 <a class="sPrev prevStop" href="javascript:void(0)">←</a>
 <div class="show_bottom_nav">
 <ul>
 <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" class="item" data-text-id="#thumbTxt1" style="float: left">
 <img style="width: 150px;height: 100px" src="/attachments/news_gallery/20140528162328_454.jpg" alt="标题1" />
 </li>
 <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" class="item" data-text-id="#thumbTxt2" style="float: left">
 <img style="width: 150px;height: 100px" src="/attachments/news_gallery/20140528162328_733.jpg" alt="标题2" />
 </li>
 </ul>
 </div>
 <a class="sNext" href="javascript:void(0)">→</a>
 </div>
</div>

js脚本代码：

jQuery(".scroll-area").slide({titCell:'.focus-hd li',mainCell:'.focus-item ul',delayTime:0,trigger:0,autoPlay:true});
jQuery(".scroll-area .focus-item").hover(function(){jQuery(this).addClass("bdOn")},function(){jQuery(this).removeClass('bdOn')});
//小标签的导航
jQuery(".scroll-area .show_bottom_nav").slide({ mainCell:"ul",delayTime:100,vis:5,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext" });

结合jQuery.lazyload和masonry实现瀑布流

Fri, 27 Jun 2025 14:14:30 +0000

结合jQuery.lazyload和masonry实现瀑布流

这里主要是使用jQuery.lazyload配合masonry实现瀑布流的重新排列，有时候网站的速度慢，图片加载慢，获取不到图片的

宽度和高度，所以使用lazyload可以在图片加载完之后，进行瀑布流的重新排列。

实现方法如下：

/**
 * 自动刷新
 * @type {*|jQuery|HTMLElement}
 */
var $container = $('#main');
$container.imagesLoaded( function(){
 $container.masonry({
 itemSelector : '.item',
 columnWidth:205,
	 gutterWidth:10,
 isAnimated: true
 });
});
var pre_href;
//滚动
$(window).scroll(function(){
 // 当滚动到最底部以上100像素时， 加载新内容
 if ($(document).height() - $(this).scrollTop() - $(this).height()<100) {
 ajax_load_data();
 }
});

function ajax_load_data(){
 var href = $('#page-nav').find('.nextprev').attr('href');
 if(href && href != pre_href){
 console.log('href = '+href);
 pre_href = href;

 $.ajax({
 url:href,//获取元素列表的地址
 data:{'act':'ajax_wap_index'},
 dataType:'json',
 type:'post',
 beforeSend:function(){
 show_loading_body();
 },
 complete:function(){
 show_loading_body();
 },
 success:function(data){
 if(data.status != undefined && data.status == 'ok'){
 if(data.html){
 var $boxes = $( data.html );
 $container.append( $boxes ).masonry("appended", $boxes, true);//追加元素
 $container.imagesLoaded(function () {
 $container.masonry();
 });//加载完图片后，会实现自动重新排列。【这里是重点】
 }

 if(data.str_pages){
 $('#page-nav').html(data.str_pages);//设置下一个分页的地址。【可以自己补充】
 }
 }
 }
 });
 }
}

Masonry 不使用Infinite 实现数据无限加载 ajax无限加载【通过分页自动加载】

Fri, 27 Jun 2025 11:00:02 +0000

masonry 不使用Infinite 实现数据无限加载 ajax无限加载【通过分页自动加载】

<!-- 引入文件 -->
<script type="text/javascript" src="/wap/js/masonry/jquery.masonry.min.js"></script>
<script type="text/javascript" src="/wap/js/masonry/js/jquery.infinitescroll.min.js"></script>

<div class="bg_e7">
 <div class="p4_3">
 <ul class="ul_mt4" id="masonry">
 {#foreach $list as $item#}<!-- foreach循环 多个DOM元素 -->
 <li class="masonry-item">
 <div class="dierg"></div>
 <div class="p04">
 <div>
 <a href='{#wap_url_reset("{#$item.mark#}/show","id/{#$item.oid#}")#}'>
 <img width="143" src="{#$item.cover#}" />
 </a>
 </div>
 <div class="p3_5">
 <div class="h24_jc_c666">
 <a href='{#wap_url_reset("{#$item.mark#}/show","id/{#$item.oid#}")#}'>
 {#$item.o_title|cut_str:7#}
 </a>
 </div>
 <div class="h20_c666">
 <a href='{#wap_url_reset("{#$item.mark#}/show","id/{#$item.oid#}")#}'>
 {#$item.o_content|cut_str_with_string:7#}
 </a>
 </div>
 <div class="h22_lh20">
 <div class='{#if $item.mark == "news"#}zx_img1{#elseif $item.mark == "case"#}anli_1{#elseif $item.mark == "activity"#}fbg1_bg{#/if#}'>
 <a href='{#wap_url_reset("{#$item.mark#}/index")#}'>
 {#$wapcategory[$item.cid].cat_name#}
 </a>
 </div>
 <div class="fr_cb2">
 {#if $item.ccid#}
 <strong class="color3">/</strong> <a href='{#wap_url_reset("{#$item.mark#}/index","cid/{#$item.cid#}-ccid/{#$item.ccid#}")#}'>{#$wapcategory[$item.ccid].cat_name#}</a>
 {#/if#}
 </div>
 </div>
 </div>
 </div>
 <div class="diyig"></div>
 </li>
 {#/foreach#}
 </ul>
 </div>

 <div id="page-nav" style="display: none">
 <div class="pages"><b class="page_icon">上一页</b><b>1</b><a href="?p=2">2</a><a href="?p=2" class="nextprev" rel="2">下一页</a></div>
 </div>

 <div class="h100_cboth"></div>
 <div class="min_w640"><div class="pdwei_img"><img src="/wap/images/wfd_img.jpg" width="100%" /><div class="dwenimg"><img src="/wap/images/gbi.png" /></div></div></div>
</div>
<script>
 $(function(){
 var $container = $('#masonry');
 $container.imagesLoaded( function(){
 $container.masonry({
 itemSelector : '.masonry-item',
 gutterWidth : 2,
 isAnimated: true
 });
 });

 var pre_href;
 //滚动
 $(window).scroll(function(){
 // 当滚动到最底部以上100像素时， 加载新内容
 if ($(document).height() - $(this).scrollTop() - $(this).height()<100) {
 ajax_load_data();
 }
 });

 function ajax_load_data(){
 var href = $('#page-nav').find('.nextprev').attr('href');
 if(href && href != pre_href){
 console.log('href = '+href);
 pre_href = href;

 $.ajax({
 url:href,
 data:{'act':'ajax_wap_news'},
 dataType:'json',
 type:'post',
 beforeSend:function(){
 show_loading_body();
 },
 complete:function(){
 show_loading_body();
 },
 success:function(data){
 if(data.status != undefined && data.status == 'ok'){
 if(data.html){
 var $boxes = $( data.html );
 $container.append( $boxes ).masonry( 'appended', $boxes);
 }

 if(data.str_pages){
 $('#page-nav').html(data.str_pages);
 }
 }
 }
 });
 }
 }
 });
</script>

Blocksit 瀑布流插件实现瀑布流数据异步加载（无限加载）

Fri, 27 Jun 2025 10:59:59 +0000

Blocksit 瀑布流插件实现瀑布流数据异步加载（无限加载）

<div style="width:1000px; overflow:hidden; margin:0 auto"> 
 <div class="kppcl" style="width:1008px; position:relative" id="kppcl">

 <div class="kppcld">
 <div class="kppcld_t">
 <div class="kpic"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></a></div>
 <div class="kname"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>
 <div class="kinfor">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <th>时&nbsp;&nbsp;&nbsp;&nbsp;间：</th>
 <td>{#$item.start_date#}-{#$item.end_date#}</td>
 </tr>
 <tr>
 <th>地&nbsp;&nbsp;&nbsp;&nbsp;点：</th>
 <td>{#$item.area_name#}</td>
 </tr>
 </table>
 </div>
 </div>
 <div class="kppcld_b"></div>
 </div>

 <div class="kppcld">
 <div class="kppcld_t">
 <div class="kpic"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></a></div>
 <div class="kname"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>
 <div class="kinfor">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <th>时&nbsp;&nbsp;&nbsp;&nbsp;间：</th>
 <td>{#$item.start_date#}-{#$item.end_date#}</td>
 </tr>
 <tr>
 <th>地&nbsp;&nbsp;&nbsp;&nbsp;点：</th>
 <td>{#$item.area_name#}</td>
 </tr>
 </table>
 </div>
 </div>
 <div class="kppcld_b"></div>
 </div>

 <div class="kppcld">
 <div class="kppcld_t">
 <div class="kpic"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'><img src="{#$item.logo#}" width="322" /></a></div>
 <div class="kname"><a href='{#url_reset("activity/detail","id_{#$item.id#}")#}'>{#$item.title#}</a></div>
 <div class="kinfor">
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <th>时&nbsp;&nbsp;&nbsp;&nbsp;间：</th>
 <td>{#$item.start_date#}-{#$item.end_date#}</td>
 </tr>
 <tr>
 <th>地&nbsp;&nbsp;&nbsp;&nbsp;点：</th>
 <td>{#$item.area_name#}</td>
 </tr>
 </table>
 </div>
 </div>
 <div class="kppcld_b"></div>
 </div>

 </div>

 <div id="page" style="display: none">
 <div class="pages"><b class="page_icon">上一页</b><b>1</b><a href="?p=2">2</a><a href="?p=2" class="nextprev" rel="2">下一页</a></div>
 </div>

</div>
<script src="/js/blocksit.min.js"></script>
<script language="javascript" type="text/javascript">
 $(window).load( function() {
 $('#kppcl').BlocksIt({
 numOfCol: 3,
 offsetX: 5,
 offsetY: 5
 });
 });

 var current_p = 0;
 //滚动
 $(window).scroll(function(){
 // 当滚动到最底部以上100像素时， 加载新内容
 if ($(document).height() - $(this).scrollTop() - $(this).height()<100) {
 ajax_load_data();
 }
 });
 function ajax_load_data(){
 var next_p = $('#page').find('.nextprev').attr('rel');
 if(next_p && next_p != current_p){
 console.log('nextpage = '+next_p);
 current_p = next_p;

 $.ajax({
 url:'{#url_reset("request/front/ajax","","php")#}',
 data:{'act':'ajax_forum','p':next_p},
 dataType:'json',
 type:'post',
 beforeSend:function(){
 show_loading_body();
 },
 complete:function(){
 show_loading_body();
 },
 success:function(data){
 if(data.status != undefined && data.status == 'ok'){
 if(data.html){
 $('#kppcl').append(data.html).BlocksIt('reload');
 }

 if(data.pages_str){
 $('#page').html(data.pages_str);
 }
 }
 }
 });
 }
 }
</script>

参考文章：

http://my.oschina.net/Rayn/blog/123938

JavaScript 手机发送验证码操作按钮延迟操作

Fri, 27 Jun 2025 10:59:54 +0000

Js 手机发送验证码操作按钮延迟操作

实例代码记录：

<script type="text/javascript">
 function start_sms_button(obj){
 var count = 1 ;
 var sum = 30;
 var i = setInterval(function(){
 if(count > 10){
 obj.attr('disabled',false);
 obj.val('发送验证码');
 clearInterval(i);
 }else{
 obj.val('剩余'+parseInt(sum - count)+'秒');
 }
 count++;
 },1000);
 }

 $(function(){
 //发送验证码
 $('#send_sms').click(function(){
 var phone_obj = $('input[name="phone"]');
 var send_obj = $('input#send_sms');
 var val = phone_obj.val();
 if(val){
 if(IsMobile(val)){
 send_obj.attr('disabled',"disabled");
 //30秒后重新启动发送按钮
 start_sms_button(send_obj);
 $.ajax({
 url:'{#url_reset("index/sms")#}',
 data:{'mobile':val},
 dataType:'json',
 type:'post',
 beforeSend:function(){
 show_loading_body();
 },
 complete:function(){
 show_loading_body();
 },
 success:function(data){
 if(data.status!=undefined && (data.status == 'ok' || data.status == 'error')){
 showMsg(data.msg);
 }
 }
 });
 }else{
 showMsg("手机号的格式错误");
 }
 }else{
 showMsg('手机号不能为空');
 }
 });
 });
</script>

JavaScript 实现Copy动作

Fri, 27 Jun 2025 10:59:46 +0000

实现点击按钮，复制文本框中的的内容

<script type="text/javascript">
function copyUrl2()
{
 var Url2=document.getElementById("biao1");
 Url2.select(); // 选择对象
 document.execCommand("Copy"); // 执行浏览器复制命令
 alert("已复制好，可贴粘。");
}
</script>
<textarea cols="20" rows="10" id="biao1">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />

复制专题地址和 url 地址，传给 QQ/MSN 上的好友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>Js复制代码</title>
</head>
<body>
 <p>
 <input type="button" name="anniu1" onClick='copyToClipBoard()' value="复制专题地址和url地址，传给QQ/MSN上的好友">
 <script language="javascript">
 function copyToClipBoard(){
 var clipBoardContent="";
 clipBoardContent+=document.title;
 clipBoardContent+="";
 clipBoardContent+=this.location.href;
 window.clipboardData.setData("Text",clipBoardContent);
 alert("复制成功，请粘贴到你的QQ/MSN上推荐给你的好友");
 }
 </script>
 </p>
</body>

直接复制 url

<input type="button" name="anniu2" onClick='copyUrl()' value="复制URL地址">
<script language="javascript">
function copyUrl()
{
 var clipBoardContent=this.location.href;
 window.clipboardData.setData("Text",clipBoardContent);
 alert("复制成功!");
}
</script>

点击文本框时，复制文本框里面的内容

<input onclick="oCopy(this)" value="你好.要copy的内容!">
<script language="javascript">
function oCopy(obj){
 obj.select();
 js=obj.createTextRange();
 js.execCommand("Copy")
 alert("复制成功!");
}
</script>

复制文本框或者隐藏域中的内容

<script language="javascript">
function CopyUrl(target){
 target.value=myimg.value;
 target.select(); 
 js=myimg.createTextRange(); 
 js.execCommand("Copy");
 alert("复制成功!");
}
function AddImg(target){
 target.value="[IMG]"+myimg.value+"[/ img]";
 target.select();
 js=target.createTextRange(); 
 js.execCommand("Copy");
 alert("复制成功!");
}
</script>

复制 span 标记中的内容

<script type="text/javascript">
function copyText(obj) 
{
 var rng = document.body.createTextRange();
 rng.moveToElementText(obj);
 rng.scrollIntoView();
 rng.select();
 rng.execCommand("Copy");
 rng.collapse(false);
 alert("复制成功!");
}
</script>

浏览器兼容 copyToClipboard(“拷贝内容”)

function copyToClipboard(txt) {
 if (window.clipboardData) {
 window.clipboardData.clearData();
 clipboardData.setData("Text", txt);
 alert("复制成功！");

 } else if (navigator.userAgent.indexOf("Opera") != -1) {
 window.location = txt;
 } else if (window.netscape) {
 try {
 netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
 } catch (e) {
 alert("被浏览器拒绝！\n请在浏览器地址栏输入'about:config'并回车\n然后将 'signed.applets.codebase_principal_support'设置为'true'");
 }
 var clip = Components.classes['@mozilla.org/widget/clipboard;1'].createInstance(Components.interfaces.nsIClipboard);
 if (!clip)
 return;
 var trans = Components.classes['@mozilla.org/widget/transferable;1'].createInstance(Components.interfaces.nsITransferable);
 if (!trans)
 return;
 trans.addDataFlavor("text/unicode");
 var str = new Object();
 var len = new Object();
 var str = Components.classes["@mozilla.org/supports-string;1"].createInstance(Components.interfaces.nsISupportsString);
 var copytext = txt;
 str.data = copytext;
 trans.setTransferData("text/unicode", str, copytext.length * 2);
 var clipid = Components.interfaces.nsIClipboard;
 if (!clip)
 return false;
 clip.setData(trans, null, clipid.kGlobalClipboard);
 alert("复制成功！");
 }
}

参考地址：

http://www.cnblogs.com/athens/archive/2013/01/16/2862981.html

JavaScript jquery-form-validate 异步提交表单和进行后台验证的操作方式

Fri, 27 Jun 2025 10:59:31 +0000

一般来说，表单的异步验证，要不就自己写一个，这里使用jquery validation表单验证，实现起来很简单的

先看下样式表和js脚本

<style>
 label.error{
 display: none;
 width: 0px;
 }
 .login .log input.error, .login .log select.error,.login .log textarea.error{
 border: 2px solid red;
 background-color: #FFFFD5;
 margin: 0px;
 color: red;
 }
</style>
<script src="/js/jquery-validation/dist/jquery.validate.js" type="text/javascript"></script>
<script src="/js/jquery-validation/lib/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
 //去掉提示
 jQuery.validator.messages.required = "";
 $('form#login').validate({
 borderColorOnError : '#FFF',
 invalidHandler: function(e, validator) {
 //错误个数
 var errors = validator.numberOfInvalids();
 if (errors) {
 $("label.error").css('display',"none");
 } else {
 $("label.error").hide();
 }
 },
 submitHandler: function(form) {
 $(form).ajaxSubmit({
 beforeSend:function(){
 show_loading_body();
 },
 complete:function(){
 show_loading_body();
 },
 success:function(data){
 data = JSON.parse(data);
 if(data.url != undefined && data.status != undefined && data.status == 'ok'){
 $('.jgCode').show();
 }else{

 }
 }

 });
 }

 });
 });
</script>

跟ajax的使用方式基本上是一致的

function show_loading_body() {
 if ($("#layer_loading").length > 0) {
 $("#layer_loading").css("display") == 'none' ? $("#layer_loading").css(
 'display', '') : $("#layer_loading").css('display', 'none');
 } else {
 var yScroll = document.documentElement.scrollTop;
 var screenheight = document.documentElement.clientHeight;
 var t = yScroll + screenheight - 240;
 //alert(t);
 //if (t > document.body.clientHeight) {
 // t = document.body.clientHeight;
 //}
 $("body")
 .append(
 '<div id="layer_loading" style="position:absolute;z-index:1001;" id="layer_loading"><img src="/images/public/load.gif" title="loading……" alt="loading……"/> loading……</div>');
 $("#layer_loading").css("left",
 (($(document).width()) / 2 - (parseInt(200) / 2)) + "px").css(
 "top", t + "px");
 $("#layer_loading").show();
 }
}

后台的验证，我这里说一下我的验证方式。结合ajax和非ajax的一个整合操作（PHP）

if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
 echo json_encode(array('status'=>'dsd'));
 exit;
}else{
 if(!ckgdcode($checkcode)){
 redirect ( "您输入的验证码有误！请返回重新登陆！", url_reset('login')."?url=".$return_url );
 exit;

 }
}

这样子的话，就不需要在另外传递参数来判断了。

JavaScript jquery-form-validate html标签中实现验证信息的修改 messages

Fri, 27 Jun 2025 10:59:28 +0000

示例代码：

<dl class="element">
 <dt>E-mail：</dt>
 <dd><input type="text" name="info[email]" class="text required email" data-validation="required" data-msg-email="请输入有效的Email地址"/></dd>
</dl>

实例二：

<input id="inputSignupEmail" class="span10" name="email" type="text" placeholder="Email" 
 data-rule-required="true" 
 data-rule-email="true" 
 data-msg-required="请输入Email地址" 
 data-msg-email="请输入有效的Email地址"/>

从中可以看出规则的使用，不在需要单独写js来定义了，除非你要remote

调用jquery-validate

<script src="/js/jquery-validation/dist/jquery.validate.js" type="text/javascript"></script>
<script src="/js/jquery-validation/lib/jquery.form.js" type="text/javascript"></script>
<script type="text/javascript">
 $(function(){
 //去掉提示
 jQuery.validator.messages.required = "";
 $('form#yuyue').validate({
 borderColorOnError : '#FFF',
 invalidHandler: function(e, validator) {
 //错误个数
 var errors = validator.numberOfInvalids();
 if (errors) {
 $("label.error").css('display',"none");
 } else {
 $("label.error").hide();
 }
 }
 });
 });
</script>

JavaScript实现邮箱登陆跳转

Fri, 27 Jun 2025 10:59:13 +0000

javascript实现邮箱登陆跳转，代码如下

<script type="text/javascript">
var hash={
 'qq.com': 'http://mail.qq.com',
 'gmail.com': 'http://mail.google.com',
 'sina.com': 'http://mail.sina.com.cn',
 '163.com': 'http://mail.163.com',
 '126.com': 'http://mail.126.com',
 'yeah.net': 'http://www.yeah.net/',
 'sohu.com': 'http://mail.sohu.com/',
 'tom.com': 'http://mail.tom.com/',
 'sogou.com': 'http://mail.sogou.com/',
 '139.com': 'http://mail.10086.cn/',
 'hotmail.com': 'http://www.hotmail.com',
 'live.com': 'http://login.live.com/',
 'live.cn': 'http://login.live.cn/',
 'live.com.cn': 'http://login.live.com.cn',
 '189.com': 'http://webmail16.189.cn/webmail/',
 'yahoo.com.cn': 'http://mail.cn.yahoo.com/',
 'yahoo.cn': 'http://mail.cn.yahoo.com/',
 'eyou.com': 'http://www.eyou.com/',
 '21cn.com': 'http://mail.21cn.com/',
 '188.com': 'http://www.188.com/',
 'foxmail.coom': 'http://www.foxmail.com'
};

$(function(){
 $(".mail").each(function() {
 var url = $(this).text().split('@')[1];
 for (var j in hash){
 $(this).attr("href", hash[url]);
 }
 });
})
</script>

js弹出新窗口而不会被浏览器阻止的方法

<form id="emailForm" action="mail.qq.com" method="get" target="_blank">
 <input type="hidden" id="isHidden" value="yiwo"/>
</form>
<script type="text/javascript">
function(){
 $("#emailForm").attr("action","http://" + gotoEmail($("#regEmail").val()));
 $("#emailForm").submit();
 window.location.href="index.action";}
 
</script>

jQuery.hash解析url hash，监听hashchange

Fri, 27 Jun 2025 09:45:18 +0000

什么是hashsearch、hashpath

其实那，hashsearch、hashpath这两个词是我自造的。在javascript语言里称url改变该部分不会影响页面重新加载的部分为hash，在后台语言里称之为fragment（碎片）。在这里，我们统称为hash。

在js里获取hash部分，可以使用如下语句获取：

// 获取当前浏览器的hash部分

// 如浏览器的url为：http://qianduanblog.com/#helloworld

var hash=location.hash;//=>"#helloworld"

在html发展的历史中，以前使用hash的作用很简单，就是做锚点使用。hash的“#”和CSS里的“#”是相同的意思，表示id。url的hash部分为#123，那么就会在页面打开的时候直接定位到id=123的元素位置。这个特性，已经被所有浏览器所接受并支持。通常这一功能用作于文章的目录部分，表示索引作用。

如下示例：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>指向id=123的内容</title>
	<style>
	div
	{
		height: 200px;
		margin-bottom: 10px;
		background: #eee;
	}
	</style>
</head>
<body>
	<a href="#123">点击这里立即跳转到id=123的元素位置</a>
	<div id="121">id=121</div>
	<div id="122">id=122</div>
	<div id="123">id=123</div>
	<div id="124">id=124</div>
	<div id="125">id=125</div>
</body>
</html>

如上例子，点击a链接就改变了当前url的hash，指向了hash指向的位置。当前了，如果为hash的id的元素不存在的话，那么各个浏览器的反应是各不相同的，部分高级浏览器不会改变页面滚动条的位置，部分低级浏览器会直接跳转到页面顶部。

说到这里，要解释下什么是hashsearch、hashpath了。从字面可以理解，hashsearch=hash+search，hashpath=hash+path。可能在专业术语里已经有这两个字了，但都与这篇文章无关，因为这俩个词是自造的。什么是hash，我们已经知道了。

那什么是search呢？

在url中有一部分是search部分，如：

http://qianduanblog.com/?name=aaa&age=100
http://qianduanblog.com/?name=bbb&age=10

url的“?”后面的部分称之为search值，是被后台程序所接收的。

path又是什么呢？

如下：

http://qianduanblog.com/name/aaa/age/100
http://qianduanblog.com/name/bbb/age/10

一眼就看出来了，search和path的不同点，通常我们都把search的url重定向成path类型的。

所以，由上可知，hashsearch、hashpath分别指的是：

http://qianduanblog.com/#?name=aaa&age=100
http://qianduanblog.com/#!name/aaa/age/100

规范1：hashsearch的开头部分为“#?”，而hashpath的开头部分为“#!”，多个“#”会被忽略，多个“?”或“!”会被最后一个“?”或“!”所覆盖，如下：

http://qianduanblog.com/#!name/aaa/age/100
http://qianduanblog.com/#####!!!!!!name/aaa/age/100
http://qianduanblog.com/#####????!name/aaa/age/100

以上3个url的hash会被解析成相同的结果。

规范2：hash部分的解析以开头的协议规定（“?”表示search类型，“!”表示path类型），与后面的内容无关，不符合规范的部分会被抛弃解析。

哪些地方可以用hashsearch、hashpath

也许我们都认为url的hash是个小角色，它的作用微乎其微，就像当初我们认为ajax很渺小一样可笑。值得回味的是，把ajax发扬光大的谷歌同样在把url的hash也再次推向时代的前言，它是随着ajax的出现，诞生的一种新型url结构。

先看看如下几个url：

http://qianduanblog.com/#!user/aaa
http://qianduanblog.com/#!user/bbb
http://qianduanblog.com/#!user/ccc
http://qianduanblog.com/#!user/ddd

从url的结构，很明显的看出来，这四个url的目的肯定是不同的，分别表示aaa、bbb、ccc、ddd四个用户所见的页面，但是有一点相同的是，这四个url是同一个页面，在浏览器打开的时候，只请求一次，不会分别请求。这是hash在url中发挥的重要特性。

有这样一个疑问了，既然页面相同的，那么四个用户的页面又如何区分呢？这里必须用到ajax，在页面载入之后，ajax载入四个用户独特的内容。

在当今，hash部分通常应用于单页面应用的丰富表现里，国外很多网站（twitter、谷歌等）已经这样做了，同样国内的如网易邮箱也这样做了。这样做的好处是：

页面只需要一次加载。
页面体验流畅，反应速度快。
页面内容按需加载，减轻服务器压力。
页面可以适配搜索引擎。

前3条的意思很明显，第4条的详细内容，我在这里就不说了，大家有兴趣可以去查看谷歌的介绍文字：jquery插件2：jquery.hash解析url hash，监听hashchange https://developers.google.com/webmasters/ajax-crawling/docs/getting-started。大概的意思是hashpath是可以被搜索引擎认识的，而hashsearch则不可以（目前）。所以，我们可以根据内容的不同来选择不同的hash类型。

jquery.hash及hashchange

说明：jquery.hash.js默认的hashType为hashpath，其标示符为”!“，而hashsearch的标示符为”?”。

3.1、解析hash

按照以上的hash规则，我们可以把hash解析成键值对，$.hash();就可以直接解析，例：

// http://qianduanblog.com/#!a/1/b/2/c/3
// http://qianduanblog.com/#?a=1&b=2&c=3
// $.hash();
// =>{a:"1",b:"2",c:"3"}

3.2、读取hash

把hash解析成了键值对（json对象），读取它就很好办了，例：

// http://qianduanblog.com/#!a/1/b/2/c/3
// http://qianduanblog.com/#?a=1&b=2&c=3
$.hash("a");
// =>"1"
$.hash(["a","b"]);
// =>{a:"1",b:"2"}

3.3、设置hash

设置hash的值也很简单，如：

// 单个设置
$.hash("a","11");
// =>http://qianduanblog.com/#!a/11/b/2/c/3
// 单个设置的时候同时修改hash类型
$.hash("a","11","?");
// =>http://qianduanblog.com/#?a=11&b=2&c=3
// 多个设置
$.hash({a:111,b:222});
// =>http://qianduanblog.com/#?a=111&b=222&c=3
// 多个设置的时候同时修改hash类型
$.hash({a:111,b:222},"!");
// =>http://qianduanblog.com/#!a/111/b/222/c/3

3.4、删除hash

删除hash操作也很简单，例：

// 删除单个
$.hash("a",null)
// =>http://qianduanblog.com/#!b/222/c/3
// 删除多个
$.hash(["a","b"],null)
// =>http://qianduanblog.com/#!c/3

3.5、清空hash

清空操作一如既往的方便，例：

$.hash(null);
// =>http://qianduanblog.com/#

3.6、监听hashchange

监听的使用方法也很便捷，例：

// 单监听，当监听的变量发生变化时触发
// 假设a值由1变化为2
$.hash("listen","a",function(oldObj,newObj){
// 当hash中的a值发生变化就会触发监听事件
// 回调函数有2个参数
// 参数1：旧值的对象，如这里监听的是a，那么其为{a:1}
// 参数2：现值的对象，如这里监听的是a，那么其为{a:2}
});
// 并监听，当监听的变量都同时发生变化时才触发
// 假设b由2=>3
// 假设c由3=>4
$.hash("listenAnd",["b","c"],function(oldObj,newObj){
// 参数1：旧值的对象，如这里监听的是b、c，那么其为{b:2,c:3}
// 参数2：现值的对象，如这里监听的是b、c，那么其为{b:3,c:4}
});
// 或监听，当监听的变量任何一个发生变化时都触发
// 假设d由4=>5
// 假设e没变5=>5
$.hash("listenOr",["d","e"],function(oldObj,newObj){
// 参数1：旧值的对象，如这里监听的是d、e，那么其为{d:4,e:5}
// 参数2：现值的对象，如这里监听的是d、e，那么其为{b:5,e:5}
});

插件下载及演示

下载地址：

http://festatic.aliapp.com/#jquery.hash

http://festatic.aliapp.com/js/jquery.hash/#!a/1/b/2/c/3

参考文章：

http://qianduanblog.com/2003.html

window.location.hash属性介绍

Fri, 27 Jun 2025 09:45:15 +0000

来了解一下hash，javascript中的hash是啥。

location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin" 。利用这个属性值可以做一个非常有意义的事情。

很多人都喜欢收藏网页，以便于以后的浏览。不过对于Ajax页面来说的话，一般用一个页面来处理所有的事务，也就是说，如果你浏览到一个Ajax页面里边有意思的内容，想将它收藏起来，可是地址只有一个呀，下次你打开这个地址，还是得像以往一样不断地去点击网页，找到你钟情的那个页面。另外的话，浏览器上的“前进”“后退”按钮也会失效，这于很多习惯了传统页面的用户来说，是一个很大的使用障碍。

那么，怎么用location.hash来解决这两个问题呢？其实一点也不神秘。

比如，某人的管理系统，主要功能有三个：普通搜索、高级搜索、后台管理，我分别给它们分配一个hash值：#search、#advsearch、#admin，在页面初始化的时候，通过window.location.hash来判断用户需要访问的页面，然后通过javascript来调整显示页面

var hash; 
hash=(!window.location.hash)?"#search":window.location.hash; 
window.location.hash=hash; 
//调整地址栏地址，使前进、后退按钮能使用 
switch(hash){ 
 case "#search": 
 selectPanel("pnlSearch"); //显示普通搜索面板 
 break; 
 case "#advsearch": 
 selectPanel("adSearch"); //显示高级搜索面板
 break;
 case "#admin": 
 selectPanel("adminSearch"); //显示后台搜索面板
 break;
}

通过window.location.hash=hash这个语句来调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用（实质上欺骗了浏览器）。然后再根据hash值的不同来显示不同的面板（用户可以收藏对应的面板了），这就使得Ajax页面的浏览趋于传统化了。

不过现在有一个比较简单的解决方式。

history.pushState()

参考文章：

http://www.cnblogs.com/china-aspx/archive/2008/04/20/1162597.html

waterfall的使用方法及一些seo优化问题

Thu, 26 Jun 2025 11:15:45 +0000

waterfall的版本很多，我这里只使用了其中的一个版本，下载地址是在这里http://wlog.cn/waterfall/

具体的使用方法很简单，博文里面也有介绍的，这里我简答的贴出自己的使用方法。

<script>
$(function(){
 $('#container').waterfall({
 itemCls: 'item',
 colWidth: 230,
 gutterWidth: 15,
 gutterHeight: 15,
 checkImagesLoaded: true,
 dataType: 'html',
 path: function(page) {
 return '/ajax/?page=' + page;
 },
 callbacks:{
 /*
 * loadingError
 * @param {String} xhr , "end" "error"
 */
 loadingError: function($message, xhr) {
 $message.html('');
 },
 loadingStart:function($message, xhr){
 $message.html('');
 }
 }
 });
 $('.container-block').css({'visibility':'visible'})
});
</script>

不要忘记引入js文件

关于这中瀑布流的方式，对页面的seo是不是很好的，但是也是有解决方案的，第一种就是，页面初始化的时候，先展示500条数据。第二种方法是，页面加上侧边栏，进行必要的导航。

使用JS在textarea在光标处插入内容

Mon, 23 Jun 2025 15:49:14 +0000

今天在写一个小功能，就是添加视频，然后将视频的标题和链接添加到textarea中，其实是如此的简单，我确如此的…

//插入数据到指定的位置
function insertText(string){
 var obj = $("#description").get(0);
 var str = string;
 if (document.selection) {
 obj.focus();
 var sel = document.selection.createRange();
 sel.text = str;
 } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
 var startPos = obj.selectionStart;
 var endPos = obj.selectionEnd;
 var tmpStr = obj.value;
 obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
 } else {
 obj.value += str;
 }
}

jQuery validate 实例 remote操作自定义错误提示

Fri, 20 Jun 2025 11:07:37 +0000

jquery validate 实例 remote操作自定义错误提示

关于这个网站上好多的示例，但是为看到过有关于remote的操作，还有关于自定义错误提示的示例，自己google一下，自己又测试了一下来个PHP版本的，此项目方案更适合于QEEPHP框架，或者其他的框架。

html代码

<form id='complete-form' action="" method="post">
 	<li class="input">
 <span class="title">邮箱</span>
 <input id='email' name='email' type="email" />
 <span class="back"></span>
 </li>
 <li class="input">
 <span class="title">登录密码</span>
 <input id='password' name='password' type="password" />
 <span class="back"></span></li>
 <li class="input">
 <span class="title">确认密码</span>
 <input id='repassword' name='repassword' type="password" />
 <span class="back"></span>
 </li>
 <li class="submit">
 <span>完成注册</span>
 </li>
 </form>

js代码

<script language="javascript">
 $(function(){
 $('form#complete-form').validate({
 rules: {
 email:{
 required:true,
 email:true,
 remote:{
 url:'/default/isemail/type/validate',
 type:'post'
 },
 },
 password:{
 required:true,
 minlength:6,
 },
 repassword:{
 required:true,
 equalTo:password,
 minlength:6,
 }
 },
 messages:{
 email:{
 required:'邮箱地址不能为空',
 email:'邮箱格式错误',
 remote:'该邮箱已经被注册 <a href="/default/bind">绑定账号</a>'
 },
 password:{
 required:'登录密码不能为空',
 minlength:'密码长度不能少于6个字符'
 },
 repassword:{
 required:'确认密码不能为空',
 minlength:'密码长度不能少于6个字符',
 equalTo:'确认密码与输入的密码不一致'
 }
 },
 errorElement:'em',
 errorPlacement: function(error, element) {
 error.appendTo( element.parent().find('.back')); 
 
 },
 });
 
 $("#complete .submit span").click(function(){
 $("#complete form").submit();	
 })
 });
</script>

php后台操作代码：

/**
 * Email是否存在
 */
public function actionIsEmail(){
 $email = $this->_context->post('email','');
 $ajaxType = $this->_context->get('type','');

 $email = $this->filter($email);
 $obj = User_Star::find('email=?',$email)->query();
 
 if(empty($obj->id)){
 if($ajaxType != 'validate'){
 $message['error'] = 1;//可以注册
 $message['email'] = false;
 echo json_encode($message);
 exit;
 }else{
 echo 'true';
 exit;
 }
 }else{
 if($ajaxType != 'validate'){
 $message['error'] = 0;//不可以注册
 $message['email'] = true;
 echo json_encode($message);
 exit;
 }else{
 echo 'false';
 exit;
 }
 }
}

这里提示几点，

1，记载jquery框架库

2，加载jauery.validate插件

3，php后台输出操作，一定是字符串型的

JavaScript 数组的数据字典用法

Thu, 19 Jun 2025 13:54:55 +0000

javascript 中的数组可以当做数据字典用，还可以当栈用，等很多用法。普通的数组用法只是数据字典用法的一个特例。

比如：arr[1]=“gao”;

只是key是int类型，value是字符串类型。其实数组的key和value都是object类型。相当于c# 中的hashtable.

<script>
var dict=new Array;
dict["省"]="山东";
dict["市"]="济南";
dict["县"]="市中心";
alert(dict["省"]); 
for(var k in dict)
{
 alert(k); //结果是key的值，也就是 "省"，"市"，"县"
}
for(var k in dict)
{
 alert(dict[k]); //结果是value的值，也就是 "山东"，"济南"，"市中心"
}
</script>

复制到自己的html页面去吧，运行一下，效果不是吹的，呵呵

滚动条下拉自动加载内容

Wed, 18 Jun 2025 11:28:53 +0000

先来看看代码：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>

 <script type="text/javascript">
 $(document).ready(function(){
 var range = 50; //距下边界长度/单位px
 var elemt = 500; //插入元素高度/单位px
 var maxnum = 3; //设置加载最多次数
 var num = 0;
 $(window).scroll(function(){
 var srollPos = $(window).scrollTop(); //滚动条距顶部距离(页面超出窗口的高度)
 var dbHiht = $("body").height(); //页面(约等于窗体)高度/单位px
 var main = $("#try"); //主体元素
 var mainHiht = main.height(); //主体元素高度/单位px

 if((srollPos + dbHiht) >= (mainHiht-range) && num != maxnum){
 main.append("<div style='height:"+elemt+"' >hello world"+srollPos+"---"+num+"</div>");
 num++;
 }
 });
 });
 </script>
</head>
<body>
 <div id="try" style="height:960px">
 <div id="follow">this is a scroll test;<br/> 页面下拉自动加载内容</div>
 </div>
</body>
</html>

原理很简单，通过注释可以很清楚是怎么实现的。

有人评论说

把偏移再加70将达到更好的滚动到底部再加载的效果。如下：(srollPos + dbHiht) >= (mainHiht-range+70)

JavaScript模板简介

Tue, 17 Jun 2025 15:51:20 +0000

除（Firefox）自带的XUL模板系统外，还可以使用JavaScript模板，这种方法也可以实现内容格式与结构的分离，但依赖于JavaScript模板引擎通过JavaScript业务逻辑将内容注入到模板中，不需要使用RDF/XML这样的技术

按语法风格

100%基于标准（没有自定义语法）

纯JavaScript（JavaScript函数调用生成HTML）

JsonML(没有“浏览器端模板”)，也可以使用JavaScript的JSON子集
domMaster 和 nodejs master_texthtml
Mootools Template Engine (null-tech.com)

纯HTML（使用JavaScript选择器找出正常的HTML，按业务逻辑填充）

PURE
mustache (有一些设计逻辑，但语法简单)
Chain.js (死链接); 这里有说明
LightningDOM
Mootools Template Engine(zealdev.wordpress.com)

XSL

XSLTJS (实现跨浏览器支持的XSL模板)

E4X

E4X for templating (注意E4X已被废弃)

标准友好的（自定义属性或者语法，但大部分采用标准兼容的用法）

X/HTML/E4X/XUL 自定义属性和元素

Adobe Spry processing instruction attributes
ASP.NET client templates
Seethrough (使用具有名称空间的E4X属性和元素，注意虽然E4X已被废弃)
XUL Templates (只支持XUL)

纯JavaScript嵌入在HTML/XML设计逻辑（ASP/JSP/PHP或者大括号{}风格）

自定义用法

HTML + 大括号{} 使用自定义的设计逻辑

ASP.NET 客户端模板
ExtJS中的模板 (死链接，可通过archive.org获取)
JavaScriptTemplates
JSmarty (借鉴与Smarty，有更多功能和近期更新)
jQSmarty: jQuery Smarty Plugin (死链接) (这里有介绍)
JS Repeater
JTemplates
mjst
Mjt
mustache (感谢janl)
Templates in JQuery
Templates in Prototype
Whiskers.js

HTML + 没有名称空间的自定义元素和属性

ASP/JSP风格的自定义逻辑，使用<%…%>

JavaScript Micro-Templating 语法与(asp|jsp|php)相似
BetterJavascriptTemplates
PureJSTemplate
JSONML Browser-Side Templates
BabaJS
Templates in Prototype

按特性

通过元素/节点匹配模板，将整个文档翻译到另一个

XSL

XSLTJS (跨浏览器使用的XSL模板)

Nodejs的加载html页面和远程获取页面进行匹配操作

Tue, 17 Jun 2025 15:51:17 +0000

1，nodejs 的加载html页面

function detail(response, query_param){
	fs.readFile('./sina_weibo.html','utf-8',function(err, data) {//读取内容
 if(err) throw err;
 response.setHeader('content-type', 'text/html;charset=utf-8');
		response.writeHead(200, {"Content-Type": "text/plain"});
		response.write(data);
		response.end();
 });
	
}

2，远程获取页面并进行匹配的操作

function blog(response, query_param){
 // fs.readFile('./sina_weibo.html','utf-8',function(err, data) {//读取内容
 // if(err) throw err;
 // return data;
 // });

	response.setHeader('content-type', 'text/html;charset=utf-8');
	response.writeHead(200, {"Content-Type": "text/plain"});
 var options = { 
 host: '10.211.55.5', 
 port: 8006, 
 path: '/detail'
 };
 
 var html = '追加变量的变量 ';
 http.get(options, function(res) { 
 res.on('data', function(data) { 
 console.log("data here = " + data);
 // collect the data chunks to the variable named "html" 
 html += data; 
 html += "这里在获取数据";
 }).on('end', function() { 
 // the whole of webpage data has been collected. parsing time! 
 var title = $(html).find('div h3 span').each(function($this){ 
 var a = $(this).children('a').attr('href'); 
 var b = $(this).children('a').text();
 console.log(b + ":" + options.host + a); 
 html += b + ":" + options.host + a;
 response.write(html);
 });
 html += "这里在循环数据";
 });
 html += '结束';
 });
	response.end();
}

执行上面的方法，在nodejs里面需要加入几个模块

var querystring = require("querystring");
var fs = require("fs");
var http = require('http');
var $ = require('jquery');

如果没有安装jquery的话，执行下面的命令

npm install jquery

如果没有安装npm 的话，建议去google一下吧

jQuery获取和设置Select选项方法

Tue, 17 Jun 2025 15:51:13 +0000

获取Select ：
获取select 选中的 text:

$("#select_id”).find("option:selected”).text();

获取select选中的 value:

$("#select_id option:selected”).val();
($("#select_id”).val();这个方法是错误的)

获取select选中的索引:

$("#select_id ").get(0).selectedIndex;

设置select:
设置select 选中的索引：

$("#select_id ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value：

$("#select_id ").attr("value”,”Normal");
$("#select_id ").val("Normal”);
$("#select_id ").get(0).value = value;

设置select 选中的text:

var count=$("#select_id ").find("option”).length;
for(var i=0;i<count;i++)
{ 
	if($("#select_id ").get(0).options[i].text == text)
	{
		$("#select_id ").get(0).options[i].selected = true;
		break;
	}
}

select根据value默认选中

$("#SelectID option[value='selectValue']").attr("selected”,true)

清空 Select:

$("#select_id ").empty();
$("#veg1″).find("option”).clone().appendTo("#veg2″); 添加另一个select option
$("#veg2″).get(0).selectedIndex=2; 设置选中项

JavaScript使用console.log输出当前的行号

Thu, 12 Jun 2025 17:19:01 +0000

看到一篇帖子，感觉写的很牛，摘抄在这里了：（代码如下）

(function () {
 if (Error.captureStackTrace && Object.defineProperty) {

 var global = window;

 Object.defineProperty(global, '__STACK__', {
 get: function () {
 var old = Error.prepareStackTrace;
 Error.prepareStackTrace = function (error, stack) {
 return stack;
 };

 var err = new Error();
 Error.captureStackTrace(err, arguments.callee);
 Error.prepareStackTrace = old;

 return err.stack;
 }
 });

 Object.defineProperty(global, '__LINE__', {
 get: function () {
 return __STACK__[1].getLineNumber();
 }
 });

 Object.defineProperty(global, '__FILE__', {
 get: function () {
 return __STACK__[1].getFileName();
 }
 });
 }
})();

var test = function () {
 console.log(__LINE__,__FILE__);
};

test();

Django模板中使用CSS, JavaScript

Thu, 12 Jun 2025 11:49:32 +0000

测试环境

(r'^css/(?P<path>.*)$', 'django.views.static.serve', {'document_root': '/var/www/django-demo/css'}),
(r'^js/(?P</path><path>.*)$', 'django.views.static.serve', {'document_root': '/var/www/django-demo/js'}),
(r'^images/(?P</path><path>.*)$', 'django.views.static.serve', {'document_root': '/var/www/django-demo/images'}),

模板中使用下述方式即可：

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

注：可采用os.path.dirname(globals()["__file__"])来获得当前文件所在路径，比如

(r'^css/(?P<path>.*)$', 'django.views.static.serve', {'document_root': os.path.dirname(globals()["__file__"])+'/css'}),

可以使用os.path.abspath()函数返回此路径的绝对路径。
==============
要在django的tempalte file中引用css、js、gif等静态文件，首先一条setting.py中DEBUG开关打开。

1、在project目录下建立一个存放静态文件的目录，如：medias

2、在url.py patterns中增加一行：

(r'^site_media/(?P<path>.*)$','django.views.static.serve',{'document_root':settings.STATIC_PATH}),

还要from django.conf import setting

3、在setting.py中加入一行：

STATIC_PATH='./medias'

如此设置后，就可以在template file 中引用media中存放的静态文件了，如：

<img src='/site_media/django.gif'>

线上环境

在使用Django开发的Web项目中是避免不了使用css、javascript、js等静态文件的，而对于这些静态文件的处理，django官网这样写：Django itself doesn’t serve static (media) files, such as images, style sheets, or video. It leaves that job to whichever Web server you choose.就是说django本身不处理类似于图片、样式表、视频等静态文件，它将此项工作交给了你选择的Web服务器。
在网上搜索到的django项目处理静态文件的示例中，大家似乎都在使用如下的方法让django处理静态文件：

urlpatterns += patterns('', (r'^static/(?P.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}), )

而对于django.views.static.serve方法，django官网说得很清楚：Using this method is inefficient and insecure. Do not use this in a production setting. Use this only for development.就是说这种方法是低效且不安全的，不要在生产环境使用此方法，只在开发环境使用。
这时对于静态文件的处理，我们只能使用我们选择的Web服务器来处理了。比如使用nginx服务器的话，可以如下设置：

server {
 listen 80; ## listen for ipv4; this line is default and implied
 root /home/davidzhang/pythonweb/mysite/mysite;
 index index.html index.htm;

 # Make site accessible from http://localhost/
 server_name local.ubuntu.python.blog.com;

 access_log /var/log/uwsgi/local.ubuntu.python.blog.access.log;
 error_log /var/log/uwsgi/local.ubuntu.python.blog.error.log;

 location / {
 include uwsgi_params;
 uwsgi_pass unix:///tmp/mysite.socket;
 #uwsgi_pass 127.0.0.1:9090;
 }
 location ^~ /static { #^~ 与 /static之间有空格
 alias /usr/local/lib/python2.7/dist-packages/Django-1.4.2-py2.7.egg/django/contrib/admin/static;
 }

 location ~* ^/(css|img|js)/.*$ {
 root /home/davidzhang/pythonweb/mysite/media;
 expires 12h;
 break;
 }

 location ~ ^.+\.(gif|jpg|png|ico|jpeg)$ {
 expires 3d;
 }
}

用Javascript获取页面元素的位置

Fri, 06 Jun 2025 14:28:24 +0000

一、网页的大小和浏览器窗口的大小

首先，要明确两个基本概念。

一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。

浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport（视口）。

很显然，如果网页的内容能够在浏览器窗口中全部显示（也就是不出现滚动条），那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。

二、获取网页的大小

网页上的每个元素，都有clientHeight和clientWidth属性。这两个属性指元素的内容部分再加上padding的所占据的视觉面积，不包括border和滚动条占用的空间。

因此，document元素的clientHeight和clientWidth属性，就代表了网页的大小。

function getViewport() {
 if (document.compatMode == "BackCompat") {
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 }
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 }
 }
}

上面的getViewport函数就可以返回浏览器窗口的高和宽。使用的时候，有三个地方需要注意：

1）这个函数必须在页面加载完成后才能运行，否则document对象还没生成，浏览器会报错。

2）大多数情况下，都是document.documentElement.clientWidth返回正确值。但是，在IE6的quirks模式中，document.body.clientWidth返回正确的值，因此函数中加入了对文档模式的判断。

3）clientWidth和clientHeight都是只读属性，不能对它们赋值。

三、获取网页大小的另一种方法

网页上的每个元素还有scrollHeight和scrollWidth属性，指包含滚动条在内的该元素的视觉面积。

那么，document对象的scrollHeight和scrollWidth属性就是网页的大小，意思就是滚动条滚过的所有长度和宽度。

仿照getViewport()函数，可以写出getPagearea()函数。

function getPagearea() {
 if (document.compatMode == "BackCompat") {
 return {
 width: document.body.scrollWidth,
 height: document.body.scrollHeight
 }
 } else {
 return {
 width: document.documentElement.scrollWidth,
 height: document.documentElement.scrollHeight
 }
 }
}

但是，这个函数有一个问题。如果网页内容能够在浏览器窗口中全部显示，不出现滚动条，那么网页的clientWidth和scrollWidth应该相等。但是实际上，不同浏览器有不同的处理，这两个值未必相等。所以，我们需要取它们之中较大的那个值，因此要对getPagearea()函数进行改写。

function getPagearea() {
 if (document.compatMode == "BackCompat") {
 return {
 width: Math.max(document.body.scrollWidth,
 document.body.clientWidth),
 height: Math.max(document.body.scrollHeight,
 document.body.clientHeight)
 }
 } else {
 return {
 width: Math.max(document.documentElement.scrollWidth,
 document.documentElement.clientWidth),
 height: Math.max(document.documentElement.scrollHeight,
 document.documentElement.clientHeight)
 }
 }
}

四、获取网页元素的绝对位置

网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。这个绝对位置要通过计算才能得到。

首先，每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。所以，只需要将这两个值进行累加，就可以得到该元素的绝对坐标。

下面两个函数可以用来获取绝对位置的横坐标和纵坐标。

function getElementLeft(element) {
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;

 while (current !== null) {
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }

 return actualLeft;
}

function getElementTop(element) {
 var actualTop = element.offsetTop;
 var current = element.offsetParent;

 while (current !== null) {
 actualTop += current.offsetTop;
 current = current.offsetParent;
 }

 return actualTop;
}

由于在表格和iframe中，offsetParent对象未必等于父容器，所以上面的函数对于表格和iframe中的元素不适用。

五、获取网页元素的相对位置

网页元素的相对位置，指该元素左上角相对于浏览器窗口左上角的坐标。

有了绝对位置以后，获得相对位置就很容易了，只要将绝对坐标减去页面的滚动条滚动的距离就可以了。滚动条滚动的垂直距离，是document对象的scrollTop属性；滚动条滚动的水平距离是document对象的scrollLeft属性。

对上一节中的两个函数进行相应的改写：

function getElementViewLeft(element) {
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;

 while (current !== null) {
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }

 if (document.compatMode == "BackCompat") {
 var elementScrollLeft = document.body.scrollLeft;
 } else {
 var elementScrollLeft = document.documentElement.scrollLeft;
 }

 return actualLeft - elementScrollLeft;
}

function getElementViewTop(element) {
 var actualTop = element.offsetTop;
 var current = element.offsetParent;

 while (current !== null) {
 actualTop += current.offsetTop;
 current = current.offsetParent;
 }

 if (document.compatMode == "BackCompat") {
 var elementScrollTop = document.body.scrollTop;
 } else {
 var elementScrollTop = document.documentElement.scrollTop;
 }

 return actualTop - elementScrollTop;
}

scrollTop和scrollLeft属性是可以赋值的，并且会立即自动滚动网页到相应位置，因此可以利用它们改变网页元素的相对位置。另外，element.scrollIntoView()方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角。

六、获取元素位置的快速方法

除了上面的函数以外，还有一种快速方法，可以立刻获得网页元素的位置。

那就是使用getBoundingClientRect()方法。它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。

所以，网页元素的相对位置就是

var X= this.getBoundingClientRect().left;
var Y =this.getBoundingClientRect().top;

再加上滚动距离，就可以得到绝对位置

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

目前，IE、Firefox 3.0+、Opera 9.5+都支持该方法，而Firefox 2.x、Safari、Chrome、Konqueror不支持。

原文网址：http://www.ruanyifeng.com/blog/2009/09/find_element_s_position_using_javascript.html

JavaScript on Dapeng Zhang

禁止在iphone或者ipad上双击或者单击页面

iOS与JavaScript交互: MessageHandler

JS调用

注意点

示例演示

JavaScript全局异常监测

webapp中vuejs组合qiniu js sdk实现上传视频功能

Javascript的base64实现及使用

ESLint - no-await-in-loop 疑惑

jQuery 图片加载成功调用指定执行方法

JavaScript 之 事件统计，防重复统计

如何检测javascript的变量是 undefined，防止终止js运行

JavaScript 日期时间戳转换

JavaScript的中的test和match，结果你不敢相信

Gulp 实现 js、CSS,img 合并和压缩

Grunt 实现 js、CSS 合并和压缩

禁止图片另存为

如何将 Skype 嵌入网页

jQuery 消息提醒插件 toastmessage

尝试SuperSlide2,实现图片滚动

结合jQuery.lazyload和masonry实现瀑布流

Masonry 不使用Infinite 实现数据无限加载 ajax无限加载【通过分页自动加载】

Blocksit 瀑布流插件 实现瀑布流数据 异步加载（无限加载）

JavaScript 手机发送验证码 操作按钮延迟操作

JavaScript 实现Copy动作

JavaScript jquery-form-validate 异步提交表单和进行后台验证的操作方式

JavaScript jquery-form-validate html标签中实现 验证信息的修改 messages

JavaScript实现 邮箱登陆跳转

jQuery.hash解析url hash，监听hashchange

window.location.hash属性介绍

waterfall的使用方法 及 一些seo优化问题

使用JS在textarea在光标处插入内容

jQuery validate 实例 remote操作 自定义错误提示

JavaScript 数组的数据字典用法

滚动条下拉自动加载内容

JavaScript模板简介

Nodejs的加载html页面和远程获取页面进行匹配操作

jQuery获取和设置Select选项方法

JavaScript使用console.log输出当前的行号

Django模板中使用CSS, JavaScript

用Javascript获取页面元素的位置

JavaScript 之事件统计，防重复统计

Blocksit 瀑布流插件实现瀑布流数据异步加载（无限加载）

JavaScript 手机发送验证码操作按钮延迟操作

JavaScript jquery-form-validate html标签中实现验证信息的修改 messages

JavaScript实现邮箱登陆跳转

waterfall的使用方法及一些seo优化问题

jQuery validate 实例 remote操作自定义错误提示