js实现通知提醒

通知类型一:标题闪烁

效果:http://www.zhangxinxu.com/study/201607/title-shine.html

通知类型二:电脑桌面右下角弹窗提醒

效果:http://www.zhangxinxu.com/study/201607/web-notifications.html

通知类型三:声音通知

 

【原文1】http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification

【原文2】http://jaywcjlove.github.io/iNotify/#t30实例六

【参考】http://javascript.ruanyifeng.com/bom/notification.html

表单提交前验证

目的:

表单提交前,对表单内容先做检查处理,若不符合要求,则禁止表单提交并做相应提示。

实现:

方式一,form标签中使用onsubmit=”return chk_form();”

方式二,提交按钮使用onclick=”return chk_form();”

方式三,把提交按钮改成普通按钮,对该按钮绑定js事件,使用$(‘#form’).submit()

注意:

以上提到的检查函数chk_form(),不能写在jquery的 $(function(){...}); 中,否则可能不会执行,可以单独写在一个 <script>...</script> 中

爬虫学习

找了些不错的爬虫平台,学习参考:

JS版爬虫:

1.http://www.shenjianshou.cn/

2.https://github.com/ShenJianShou/crawler_samples

Python版爬虫:

http://scrapy.org/

PHP版获取页面内容:

http://sourceforge.net/projects/simplehtmldom/

.Net版爬虫:

http://www.locoy.com/

http://www.bazhuayu.com/

Jquery Mobile开发——奇怪的空行

现象:使用Jquery Mobile开发页面时,在listview中发现排版不正常,有莫名其妙的‘很窄的空行’,检查代码多遍也没发现问题,将官方代码贴在上面对比时发现官方的显示正常(代码完全一样,样式却不同——官方的正常,我的有空白)。

解决:使用浏览器检查DOM元素时发现,我的多了些‘&nbsp;’,即空格,将代码空格部分全部清楚,使代码在同一行显示后,显示正常,空白没了。

奇怪的事:我想复原问题现象,以便截图发出来,结果复原不了了,空白行没有了!

评论:神奇的Jquery Mobile

ajax中不能使用return

问题:

写JS时,在A方法中需获取B方法的返回值,此返回值在B方法中是通过ajax得到的,然后在ajax的success回调函数中使用return 将结果返回给调用者A,但A始终收不到返回值,显示undefined。

 

原因:

在ajax的回调函数中不能使用return语句返回结果,原因不详(此结论由实际操作总结而来)。

解决方式:(错误的解决方式,详见下文)

在B 方法中,将ajax的success回调函数中得到结果保存至某变量中,然后在B方法的结尾,ajax操作外,将此变量使用return返回给调用者即可。

重要更新:

以上解决方式通过实践检验,又发现不妥之处:因为是ajax,不能保证及时响应,所以有可能存在B执行return语句时,ajax还没收到结果并将结果赋值给tmp临时变量。于是会出现刷新页面时(特别是第一次刷新),有时并无ajax结果显示出来,再次刷新后就可能正常了。

所以,

建议直接在ajax的回调函数中处理返回结果,不要将其return给某个用于处理显示结果的方法。在上面的例子中,即将A方法中的内容写在B方法中的ajax回调函数里。

javascript中莫名其妙的错误Uncaught SyntaxError: Unexpected token )

JQuery类库版本:jquery-1.7.1.min.js

JQuery代码:

chrome中的错误报告:

firefox中的错误报告:

说明:

从代码上看,没有任何语法错误,但浏览器始终提示那个“不存在的错误”。

解析:

注释内容和JS代码放在同一行,导致某种错误。

解决方法:

将注释内容从代码行移出,可单独放一行。如,

Javascript或submit按钮刷新当前页失效

现象:

最近为老板做个产品信息管理的小程序,在做搜索那块时发现多次点击表单的提交按钮(表单内容没变),或调用javascript的window.location.href=window.location,window.reload()等方式都无效(页面内容无刷新,尽管标签页看似重新加载了),但使用F5刷新有效。

场景再现:

HTML代码:

操作:第一次在输入框中输入一些信息时,提交成功,页面刷新,输入框被清空;第二次输入相同内容时,提交失败,页面内容未刷新,输入框内容不消失。

原因:

Form表单的action属性值是“#”(换用AJAX方式提交表单)。

解释:

地址栏中,若地址未发生改变,且最后一个字符是“#”的话,浏览器是不会重新加载新页面的,尽管调用了javascript的刷新当前页的方法(window.location.href=window.location,window.reload()等)。

解决:

既然不用Form表单的自带提交功能,而改用AJAX等方式提交的话,去掉action属性及其属性值即可。