VS code调试JavaScript

2016-08-27, 星期六 |
JavaScriptIDE插件

搜索并安装VS Code插件 - Debugger for Chrome

添加用于调试js的launch.json文件到.vscode目录下

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome against localhost, with sourcemaps",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:8080",
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}"
        },
        {
            "name": "Attach to Chrome, with sourcemaps",
            "type": "chrome",
        

垂直对齐单行区块内的图片和文本

2016-08-19, 星期五 |
前端样式

垂直对齐单行区块内的图片和文本

DOM结构

<div class="prj-item"><a href="#"><img src="img/icon_4.png" height="40" alt=""> <span>竞足单关</span><p class="small">曼联vs皇家马德里队</p> </a></div>

prj-item 作为图片和文本容器

CSS

.prj-item { padding-left: 50px; }
.prj-item img{ position: absolute; left: 15px; height: 40px; }
.prj-item p.small{ color: #8b8b8b; padding-left: 12px; margin-bottom: 0; }

主要是给容器prj-item里面的唯一一个图片img以绝对定位。然后给prj-item padding-left足以容下img,这样span标签的开始位置就不会是容器prj-

移动端网页简易自制弹出层

2016-08-19, 星期五 |
前端弹出层

DOM结构

<p>我已经阅读并同意<a class="red-text" href="javascript:popupXieyi();">《用户合买代购协议》</a></p>

<div class="xieyi hide">
  <div class="pheader"><div class="ptitle center font18 white-text">用户购买协议</div></div>
  <div class="pbody white font14" style="color:#bfbfbf;">
    <p style="text-indent:2em;">本协议系甲、乙双方自愿签订,甲方愿意将自己购买于 年 月 日的 色 电动车 转让给乙方,乙方愿意购买并接管上述产品并达成以下协议,本协议自签订之日起执行。</p>
    <p>1、甲方愿意以 元的价格出售自己私有的电动车,出售后不得随意以任何理由提高或者更改价

免记,图片轮滑插件js及css

2016-08-19, 星期五 |
前端插件slider

jQuery插件 materialize.min.js 包含了图片轮滑的插件slider.js,使用该轮滑插件相比其他同类插件,DOM结构最为简单。但是 materialize.min.js 依赖其框架的css文件 materialize.min.css。而materialize.min.css是一套完整的css框架,会对浏览器元素的默认样式重置,这种重置会对诸如表单、按钮等过度的渲染,口味重,我个人认为这种重置会对页面元素的表现起破坏作用。因此为了配合materialize.min.js的轮滑插件,必须提取materialize.min.css起作用的部分。

CSS文件

/* slider.css */
/* block slider */
.slider {
    position: relative;
    height: 400px;
    width: 100%;
}
.slider .slides {
    background-color: #9e9e9e;
    margin: 0;
    height: 400px;
}
.slider .slides l

JavaScript产生0-9之间互异的随机数

2016-08-08, 星期一 |
前端JS函数

JavaScript产生多个0-9之间互异的随机数

// Generate some random integer. 0 to 9.
var genRandomInt = function(num, not_same){
    not_same = not_same||false;
    var randArr = [];
    if(not_same){ // they are differ to each other.
        var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
        for (var i = 0; i < num; i++) {
            var rand = Math.floor(Math.random()*(10-num));
            console.log('rand is: ', rand);
            randArr.push(arr.splice(rand, 1)[0]);
        }

    }else{
        for (va