前端技术

解决低版本安卓系统中webview对css的background写法不兼容问题

对接第三方app的时候发现内嵌网页里面的背景图死活出不来,但是在同一个手机上的微信自带浏览器确是正常的,通过各种尝试终于发现问题,记录一下。

» 阅读全文

写一个常用的模拟ajax上传文件的通用方法

ajax作为一门重量级的技术,在前端交互体验上是非常重要的,但是文件上的上传始终没法做到ajax那种无刷新上传。

暂且不谈HTML5的特性,也不用Flash这种即将退出历史舞台的东西,要实现页面的无刷新上传还是有一些难度的,但是项目必须要这么做的时候,就得想办法搞定了。

仔细研究一番原理后开始写了,这东西13年时候写的,躺在我硬盘角落快3年了,做个笔记,偶尔也会用到。

» 阅读全文

js操作数组的一些实用方法 [转载]

前端开发中js的熟练程度直接影响了页面开发的进度,对js中各种方法属性的熟练掌握当然是必要的功课,比如对数组的操作。

在Python或者PHP中,操作数组是非常方便的,写习惯了Python,忽然切换到js中突然忘记了数组的操作方法,悲催...

找了下资料,整理的不错,转载过来做下记录...

转载自:http://blog.sina.com.cn/s/blog_60e74b5d01017og5.html

» 阅读全文

js时间戳转换成时分秒

function MillisecondToDate(msd) {
    var time = parseFloat(msd) / 1000;
    if (null != time && "" != time) {
        if (time > 60 && time < 60 * 60) {
            time = parseInt(time / 60.0) + "分" + parseInt((parseFloat(time / 60.0) -
                parseInt(time / 60.0)) * 60) + "秒";
        }
        // else if (time >= 60 * 60 && time < 60 * 60 * 24) {
        else if (time >= 60 * 60) {
            time = parseInt(time / 3600.0) + "时" + parseInt((parseFloat(time / 3600.0) -
                parseInt(time / 3600.0)) * 60) + "分" +
                parseInt((parseFloat((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60) -
                parseInt((parseFloat(time / 3600.0) - parseInt(time / 3600.0)) * 60)) * 60) + "秒";
        }
        else {
            time = parseInt(time) + "秒";
        }
    }
    return time;
}

js时间转换时间戳

function get_unix_time(dateStr){
    var newstr = dateStr.replace(/-/g,'/'); 
    var date =  new Date(newstr); 
    var time_str = date.getTime().toString();
    return time_str;
}

media动态设置字体实现字体自适应移动端屏幕尺寸

@media only screen and (max-width:300px){body{font-size:8.33333px}.viewport{max-width:300px}}
@media only screen and (max-width:310px) and (min-width:300px){body{font-size:8.33333px}.viewport{max-width:310px}}
@media only screen and (max-width:320px) and (min-width:310px){body{font-size:8.61111px}.viewport{max-width:320px}}
@media only screen and (max-width:350px) and (min-width:320px){body{font-size:8.88889px}.viewport{max-width:350px}}
@media only screen and (max-width:360px) and (min-width:350px){body{font-size:9.72222px}.viewport{max-width:360px}}
@media only screen and (max-width:400px) and (min-width:360px){body{font-size:10px}.viewport{max-width:400px}}
@media only screen and (max-width:470px) and (min-width:400px){body{font-size:11.11111px}.viewport{max-width:470px}}
@media only screen and (max-width:480px) and (min-width:470px){body{font-size:13.05556px}.viewport{max-width:480px}}
@media only screen and (max-width:540px) and (min-width:480px){body{font-size:13.33333px}.viewport{max-width:540px}}
@media only screen and (max-width:560px) and (min-width:540px){body{font-size:15px}.viewport{max-width:560px}}
@media only screen and (max-width:570px) and (min-width:560px){body{font-size:15.55556px}.viewport{max-width:570px}}
@media only screen and (max-width:630px) and (min-width:570px){body{font-size:15.83333px}.viewport{max-width:630px}}
@media only screen and (max-width:640px) and (min-width:630px){body{font-size:17.5px}.viewport{max-width:640px}}
@media only screen and (max-width:710px) and (min-width:640px){body{font-size:17.77778px}.viewport{max-width:710px}}
@media only screen and (max-width:720px) and (min-width:710px){body{font-size:19.72222px}.viewport{max-width:720px}}
@media only screen and (min-width:720px){body{font-size:20px}.viewport{width:720px}}

手机页面开发中的微信分享js与PHP实现

手机页面开发经常遇到需要分享的功能。朋友圈分享与好友分享并不是一样的。分享带特定的标题和图片。

» 阅读全文

CSS设置input placeholder文本的样式[转载]

placeholder是HTML5  input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值。
当然我们今天讨论的不是placeholder这个属性,而是设置placeholder的文本样式的选择器。

火狐和webkit核心浏览器的属性名字不一样,谁叫不是一个娘生的呢。

/* webkit 浏览器*/
#field1::-webkit-input-placeholder { color:#00f; }
#field2::-webkit-input-placeholder {
	color:#090;
	background:lightgreen;
	text-transform:uppercase;
}
#field3::-webkit-input-placeholder {
	font-style:italic;
	text-decoration:overline;
	letter-spacing:3px;
	color:#999;
}
/* 火狐浏览器 */
#field1::-moz-placeholder { color:#00f; }
#field2::-moz-placeholder {
	color:#090;
	background:lightgreen;
	text-transform:uppercase;
}
#field3::-moz-placeholder {
	font-style:italic;
	text-decoration:overline;
	letter-spacing:3px;
	color:#999;
}
当然,和CSS设置::selection选中文本样式一样,你只能设置几个和文本有关系的CSS样式:Color, font-style, font-varian, background, text-decoration
PS:IE从IE 10才开始支持placeholder属性,伪选择器名字还不得而知,估计是加前缀-ms-了