webtimes

webtimes 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

webtimes 提出了问题 · 2016-04-11

fis3不自动刷新浏览器

fis3 server start
fis3 release -wL

两个命令后:
http://127.0.0.1:8080 修改项目文件,cmd命令行有实时编译提示,但不自动刷新浏览器,大家知道什么原因吗

关注 3 回答 2

webtimes 赞了回答 · 2016-04-10

解决学习React Native需要先学习React JS吗

摘自我马上完稿的书中的前言部分。这本书预计七月初上架销售。
初学者一个常见的困惑是弄不清React、React.js、React Native三者之间的关系。这是情有可原的。初学者经常发现很多讨论React Native技术的资料中,怎么突然说到React.js去了?过一会儿怎么又好象说到React基础框架去了?因此在讨论如何阅读本书之前,有必要先说明一下这三者的关系。React是基础框架,是一套基础设计实现理念,开发者不能直接使用它来开发移动应用或者网页。在它之上发展出了React.js框架用来开发网页,发展出来React Native用来开发移动应用。因为React基础框架与React.js框架是同时出现,同时进化发展,这造成了React基础框架的基本概念,设计思想都是在React.js的相关文档中描述。后来,Facebook推出React Native后,也没有把React相关的概念文档从React.js文档中分离出来。这就造成了学React Native要去看React.js文档,说React Native不时会说到React.js的情况。如果开发者只想关注移动应用开发,那么在React.js的如何开发网页的文档中整理出来React基础框架知识是件不轻松的活儿。现在,这本书推出了,有了这本书,读者可以不用再去看React.js文档了。

关注 15 回答 8

webtimes 提出了问题 · 2016-04-04

fis3-jello前端解决方案

使用fis3 init jello-demo 初始化了一个前端项目

问题1:如何可以直接预览此velocity 模板文件的内容?

问题2:fis3 release时提示无法加载fis3-parser-sass插件,可不管是npm还是淘宝镜像下安装此插件均报错:

图片描述

安装fis3-parser-sass插件报错:
图片描述

麻烦大家给出出主意谢谢

关注 2 回答 1

webtimes 提出了问题 · 2016-03-25

如果不借助react等,怎么样设计可复用的UI组件

我设想组件是:html+css+js

-modulesA
|_modulesA.tpl
|_modulesA.css
|_modulesA.js

-modulesB
|_modulesB.tpl
|_modulesB.css
|_modulesB.js

问题1:两个组件,modulesA、modulesB 独立设计,又想照顾到SEO
有需要的时候就载入到具体页面,最终合并压缩发布上线
具体该如何实现的呢?

问题2:常规的UI组件又是怎么实现的呢,尤其是做到可复用

关注 8 回答 4

webtimes 提出了问题 · 2016-03-22

大家seajs模块合并压缩用什么,spm?看了下教程好像不太直观,能给简单讲讲吗

网上的教程都不是很直观,望大家给讲讲怎么使用spm或其他合并压缩工具

关注 3 回答 3

webtimes 关注了问题 · 2016-03-22

解决求微信安卓端 js 不执行的解决思路

我有一个网页,在微信浏览器中,iOS 端一切正常,Android 端部分网页点击按钮没反应(jQuery 的 click 事件)。

  1. 所有测试均在微信内置浏览器中(电脑上是 微信web开发者工具);

  2. 电脑上调试一切正常;

  3. 所有苹果手机正常;

  4. 所有安卓手机不正常(大部分网页正常,只有几个用了 wxjs api 的网页不正常,但移除 wxjs api 后仍然不正常);

  5. 从远程调试结果来看,安卓端有问题的网页貌似一行 js 代码都没有执行,并且 console 没有报特殊的错误。

问: 有可能是哪些原因导致的?(提供几个思路即可。)


感谢各位提供的思路,不过目前还是毫无头绪。。。

关注 7 回答 5

webtimes 回答了问题 · 2016-03-16

解决前端如何百分百还原美工图?

别着急,做到高保真还原是可以的,但也不得不说有些所谓UI尺寸可以搞成14.1px 16.3px 这就没必要了,甚至UI图本身都是有各种不对齐,PS分组各种乱,然后你就是各种纠结是正常的,很多UI连基本的UI素养都没有,还不如一个平面美工,

如果上述状况都不存在可以做好以下工作:
PC端:样式可以先reset.css,然后效果图字体多少尺寸就是多少,图片或边框要注意哪些是不是要做成响应式的

移动端: 同上,字体单位建议用rem,rem是相对于根元素html做字体设置,不容易受继承干扰

总结:不要认为UI图是一定对的,如果一旦确定是合理的就按上述步骤来没问题的

关注 17 回答 12

webtimes 回答了问题 · 2016-03-16

css('width','xxz')为什么不能执行? /*xxz是事先定义好的*/

楼上说的很清楚了,加引号表示字符串,不加才是一个变量名,这时才可以随意改变这个变量值

关注 4 回答 4

webtimes 回答了问题 · 2016-03-16

解决论前端模块化与组件化的区别?

我觉得都可复用叫法不一样,有人叫组件显得高大上神秘些

关注 7 回答 4

webtimes 提出了问题 · 2016-03-15

技术选型,vue+Seajs+spm+FIS 的前端目录结构怎样才够合理

上述技术选型的前端目录结构怎样才够合理呢,大家给点指点,谢谢

关注 2 回答 1

webtimes 赞了回答 · 2016-03-14

现在前端js文件模块化主流方案是什么?

1、requireJS是服务器优先,遵循的是commonJS规范,他是使用同步机制加载模块的

2、如果要在前端使用的话,可以使用AMD规范,它是异步加载模块的,浏览器优先

3、当然,也可以使用CMD,即SeaJS那一套规范

4、如果不用这些规范,还可以自己使用原生Javascript来自定义模块

比如:

// 在此处定义模块
var myModule = (function () { 
    
    return {
        // 此处为模块所暴露的方法
    };
    
})();
// 在此处引入模块
(function ( myModule ) {
    
    // 通过模块来调用相应的方法
    myModule.METHOD_NAME;
    
})( myModule );

关注 3 回答 1

webtimes 提出了问题 · 2016-03-14

如何在phpStorm中使用JSLint检查js代码

图片描述如题,phpStorm本身有这个工具内置,但启用后写代码也没检查,需要手动吗,在哪里呢

关注 2 回答 1

webtimes 提出了问题 · 2016-03-09

解决写了一个jQuery面向对象轮播图插件,单个实例正常,但多个实例异常

问题描述:
单个实例是正常的,但二个实例时鼠标放在第一个实例上去后不停止播放,还是继续自动滚动播放,而第二个实例鼠标放上去后正常停止播放,问题何在呢,麻烦大家给看看,另外大家给提点建议,看看结构能不能改进的地方,谢谢

插件:jquery.playsee.js

/*
*
*插件:playsee 功能:图片轮播
*
* */

;(function($, window, document, undefined){

    //定义一个构造函数对象 Seesee 
    var Seesee = function(ele,opt){

        this.$ele = $(ele); //ID定义

        //基本DOM选择器配置
        this.CONFIG = {
            'titleNav': this.$ele.find(".title-nav li"), //标题显示
            'sliderPrev': this.$ele.find(".slider-prev"), //左箭头
            'slidernext': this.$ele.find(".slider-next"), ////右箭头
            'icoNav': this.$ele.find(".slider-nav li"), //图标导航
            'numNav': this.$ele.find(".num-nav b"), //数字显示
            'sliderMain': this.$ele.find(".slider-main"), //图片列表
            'index': 0 //当前索引号
        };

        //定义用户可更改的默认值
        this.defaults = {
            'width': 395, //视口或图片宽度
            'speed': 10, //速度
            'imgNum': 4 //图片数量
        };

        //定义并接受合成设置的值
        this.settings = $.extend({}, this.defaults, opt);

    };

    //Seesee 的方法
    Seesee.prototype = {
        initialize: function(){
            var _this = this;

            //默认开始播放 (改变index)
            this.play();

            //下一个按钮点击事件 (改变index)
            this.CONFIG.slidernext.click(function(){
                _this.getIndex()();
                _this.slidernextBtn(_this.CONFIG.index);
                _this.byIndex(_this.CONFIG.index);
            });

            //上一个按钮点击事件 (改变index)
            this.CONFIG.sliderPrev.click(function(){
                _this.getIndexMin()();
                _this.byIndex(_this.CONFIG.index);
                _this.sliderPrevBtn(_this.CONFIG.index);
            });

            //图标导航,点击事件
            this.CONFIG.icoNav.click(function(){
                _this.byIndexInto(_this.CONFIG.index, $(this).attr("data-src"));
            });

            //定义鼠标移入移出停止开始播放
            this.$ele.hover(
                function(){
                    _this.stop();
                },function(){
                    _this.play();
                }
            );

            //debugger

        },
        byIndex: function(index){

            this.titleNav(this.CONFIG.titleNav, index);
            this.icoNav(this.CONFIG.icoNav, index);
            this.numNav(this.CONFIG.numNav, index);
        },
        getIndex: function(){
            //索引号获取控制
            var _this = this;
            var currentIndex = function(){
                if(_this.CONFIG.index < (_this.settings.imgNum - 1)){
                    ++_this.CONFIG.index;
                }else{
                    _this.CONFIG.index = 0;
                }

                return _this.CONFIG.index;
            };

            return currentIndex;

        },
        getIndexMin: function(){
            //索引号获取控制,索引号递减
            var _this = this;
            var currentIndex = function(){
                if(_this.CONFIG.index > 0){
                    --_this.CONFIG.index;
                }else{
                    _this.CONFIG.index = (_this.settings.imgNum - 1);
                }

                return _this.CONFIG.index;
            };

            return currentIndex;

        },
        play: function(){
            //自动播放

            var _this = this;

            timer = setInterval(function(){

                _this.getIndex()(); //动态生成当前索引号的index的值

                //当前索引号传入以下方法执行多个显示效果
                _this.byIndex(_this.CONFIG.index);
                _this.slidernextBtn(_this.CONFIG.index);

            }, 2000);

        },
        stop: function(){
            //停止自动播放
            clearInterval(timer);
        },
        showOne: function(obj, index){
            //显示一个其他元素都隐藏不显示

            //让所有指定选择符元素群组的各个元素都隐藏
            for(var i=0; i<this.settings.imgNum; i++){
                $(obj[i]).removeClass("slider-selected");
            }

            //指定当前索引index的元素显示
            $(obj[index]).addClass("slider-selected");


        },
        sport: function(setw){
            //设置运动过渡效果

            this.CONFIG.sliderMain.animate({left: setw}, "slow");

        },
        sliderPrevBtn: function(index){
            //上一个按钮操作

            var setw = -(index * this.settings.width) + "px";

            //执行运动方法
            this.sport(setw);

        },
        slidernextBtn: function(index){
            //下一个按钮操作


            var setw = -(index * this.settings.width) + "px";

            //执行运动方法
            this.sport(setw);

        },
        titleNav: function(obj, index){
            this.showOne(obj, index); //显示当前图标
        },
        icoNav: function(obj, index){
            this.showOne(obj, index);
        },
        numNav: function(obj, index){
            this.showOne(obj, index);
        },
        byIndexInto: function(index, clickIndex){
            //参数说明: index 当前索引号,clickIndex 点击对象的索引号

            if(clickIndex > index){
                this.slidernextBtn(clickIndex);
                this.byIndex(clickIndex);
            }else{
                this.sliderPrevBtn(clickIndex);
                this.byIndex(clickIndex);
            }
        }

    };

    //定义一个插件并命名
    $.fn.playsee = function(option){
        var seesee = new Seesee(this, option);
        return seesee.initialize();
    }

})(jQuery, window, document);

html:

<div class="slider" id="lunbo1" style="position: relative">

    <!--图片列表-->
    <div class="slider-body" style="position: relative;">

        <ul class="slider-main" style="width: 1580px; left: 0px; position: absolute;">

            <li class="slider-panel ">
                <a href="1.html" target="_blank" title="">
                    <img data-original="../../../images/jd1/1.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel ">
                <a href="2.html" target="_blank" title="">
                    <img data-original="../../../images/jd1/2.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel ">
                <a href="3.html" target="_blank" title="">
                    <img data-original="../../../images/jd1/3.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel slider-panel-selected">
                <a href="4.html" target="_blank" title="">
                    <img data-original="../../../images/jd1/4.jpg" width="395" height="237"  alt="">
                </a>
            </li>

        </ul>


    </div>

    <!--圆点导航-->
    <div class="slider-nav">
        <ul>
            <li class="slider-item slider-selected" data-data-original="0"></li>
            <li class="slider-item" data-data-original="1"></li>
            <li class="slider-item" data-data-original="2"></li>
            <li class="slider-item" data-data-original="3"></li>
        </ul>
    </div>

    <!--数字显示-->
    <div class="num-nav">
        <ul>
            <b class="slider-item slider-selected">1</b>
            <b class="slider-item">2</b>
            <b class="slider-item">3</b>
            <b class="slider-item">4</b>

        </ul>
    </div>

    <!--标题-->
    <div class="title-nav">
        <ul>
            <li class="slider-item slider-selected">11111111</li>
            <li class="slider-item">222222222</li>
            <li class="slider-item">33333333333</li>
            <li class="slider-item">444444444444</li>
        </ul>
    </div>

    <!--左右箭头-->
    <div class="slider-page">
        <a href="javascript:void(0)" class="slider-prev">&lt;</a>
        <a href="javascript:void(0)" class="slider-next">&gt;</a>
    </div>


</div>

<div class="slider" id="lunbo2" style="position: relative">

    <!--图片列表-->
    <div class="slider-body" style="position: relative;">

        <ul class="slider-main" style="width: 1580px; left: 0px; position: absolute;">

            <li class="slider-panel ">
                <a href="1.html" target="_blank" title="">
                    <img data-original="../../../images/jd1/1.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel ">
                <a href="2.html" target="_blank" title="">
                    <img data-original="../../../images/jd1/2.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel ">
                <a href="3.html" target="_blank" title="">
                    <img data-original="../../../images/jd1/3.jpg" width="395" height="237"  alt="">
                </a>
            </li>
            <li class="slider-panel slider-panel-selected">
                <a href="4.html" target="_blank" title="">
                    <img data-original="../../../images/jd1/4.jpg" width="395" height="237"  alt="">
                </a>
            </li>

        </ul>


    </div>

    <!--圆点导航-->
    <div class="slider-nav">
        <ul>
            <li class="slider-item slider-selected" data-data-original="0"></li>
            <li class="slider-item" data-data-original="1"></li>
            <li class="slider-item" data-data-original="2"></li>
            <li class="slider-item" data-data-original="3"></li>
        </ul>
    </div>

    <!--数字显示-->
    <div class="num-nav">
        <ul>
            <b class="slider-item slider-selected">1</b>
            <b class="slider-item">2</b>
            <b class="slider-item">3</b>
            <b class="slider-item">4</b>

        </ul>
    </div>

    <!--标题-->
    <div class="title-nav">
        <ul>
            <li class="slider-item slider-selected">11111111如何齐家治国</li>
            <li class="slider-item">222222222科技人员可离岗创业  及时回应关切</li>
            <li class="slider-item">33333333333联想移动端表现不佳 CEO杨元庆被质疑不称职</li>
            <li class="slider-item">444444444444韩媒:金**妹妹或成联合国首个制裁对象</li>
        </ul>
    </div>

    <!--左右箭头-->
    <div class="slider-page">
        <a href="javascript:void(0)" class="slider-prev">&lt;</a>
        <a href="javascript:void(0)" class="slider-next">&gt;</a>
    </div>


</div>

js:

<script data-original="../lib/jquery/1.11.1/jquery.min.js"></script>
<script data-original="js/jquery.playsee.js"></script>
<script>
    $(function(){
        $("#lunbo1").playsee();
        $("#lunbo2").playsee();
    })
</script>

CSS:

body{
    margin: 0;
}
.slider{
    overflow: hidden;
    margin: 50px;
    padding: 0;
    width: 395px;
    height: 237px;
    background-color: #ccc;
}

.slider ul,.slider ul li{
    margin: 0;
    padding: 0;
}

.slider-panel-selected{
    display: block;
}
.slider-panel{
    float: left;
}

.slider-nav{
    overflow: hidden;
    position: absolute;
    right:10px;
    bottom: 20px;
    width: 100px;
    height: 15px;

}

.slider-nav .slider-item{
    display: block;
    margin-right: 5px;
    float: left;
    width: 15px;
    height: 15px;
    border-radius: 10px;
    background-color:#f4fcfe;
}

.slider-nav .slider-selected{
    background-color:#fd472b;
}

.title-nav{
    position: absolute;
    right:10px;
    top: 10px;

    width: 90%;
    height:20px;
    line-height: 20px;
    background-color: #f00;
}
.title-nav .slider-item{
    display: none;
}
.title-nav .slider-selected{
    display: block;
}

.num-nav{
    position: absolute;
    right:10px;
    top: 130px;
    width: 50px;
    height:50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50px;
    background-color: #f00;
}
.num-nav b{
    font-size: 20px;
}
.slider-page{
    position: absolute;

    top: 75px;
    width: 100%;
    height:50px;
    line-height: 50px;
    text-align: center;

}
.slider-page a{
    display: block;
    width: 50px;
    height: 50px;
    background-color: #8FA4F5;
}
.slider-page .slider-prev{
    float: left;

}

.slider-page .slider-next{
    float: right;
}

.num-nav .slider-item{
    display: none;
}

.slider-selected{
    display: block !important;
}

关注 7 回答 5

webtimes 提出了问题 · 2016-03-04

解决CSS3 transition动画属性指定前后问题

img{
    opacity: 0.5;
    transition: 0.35s all;
}

img:hover{
    opacity: 1;
    margin-left: -50px;

}

<img data-original="img/1.jpg">

如上简单动画代码也知道transtion属性各个参数以及日常用法,但我尝试了下改变transition: 0.35s all;属性的设置位置,比如第一种情况也就是如上代码,呈现的效果是我想要的效果,就是鼠标移入离开都过渡很平缓,但我将transition: 0.35s all;从img{}标签移到hover里如下:(则效果不是我想要的,鼠标移入后过渡平缓,可鼠标离开后几乎没有平缓过渡效果,我的问题是两种位置设置呈现不同的效果的原因是什么,有什么讲究呢,谢谢)

img{
    opacity: 0.5;
   
}

img:hover{
    opacity: 1;
    margin-left: -50px;
     transition: 0.35s all;

}

<img data-original="img/1.jpg">

关注 3 回答 2

webtimes 赞了回答 · 2016-03-02

解决NodeJS运行 server.js错误

应该是路径不对吧,您的server.js在哪个文件夹下?

关注 4 回答 3

webtimes 提出了问题 · 2016-03-02

解决NodeJS运行 server.js错误

用范例代码测试了下,怎么会报错呢

var http = require('http');

http.createServer(function (request, response) {

    // 发送 HTTP 头部
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(8000);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8000/');

图片描述

关注 4 回答 3

webtimes 提出了问题 · 2016-02-18

一个JS轮播报错

写了个面向对象轮播,实例化后默认执行这个defaultRunning()方法,执行正常,鼠标移动到对象上也正常停止播放,但当鼠标离开后,开始报错,似乎this的指向变了,目前没搞明白,麻烦大家给看看,谢谢

报错提示:
图片描述

程序部分代码:

function Plays(){
    //代码略
}

Plays.prototype = {
    defaultRunning: function(){
        //默认执行的方法
        this.play();
        
        //鼠标移动上去停止播放
        this.obj.onmouseover = this.stop;

        //鼠标离开后继续播放
        this.obj.onmouseout = this.play;
    },
    prevPage: function(){
        //上一个

    },
    nextPage: function(){
        //下一个
        console.log("nextPage执行的代码");

    },
    play: function(){
        //默认定时执行
        var _this = this;
        timer = setInterval(function(){
            _this.nextPage(); //报错的位置
        },1000);

    },
    stop: function(){
        clearInterval(timer);
    }
}

new Plays(). defaultRunning();

关注 3 回答 2

webtimes 提出了问题 · 2016-01-29

解决js跨域问题,有没有很简单的方法呢

以下是同一主域名不同子域名的情况,网上查了很多方法比如什么8种常用方法,发现都不是很好实践,大伙帮看看怎么能比较简单点,就是page1.html 通过ajax访问到echo.php数据,谢谢

http://a.w1.com/page1.html

<div id="div1"></div>

<script>
new Core.AjaxRequest({
    url: "http://w1.com/api/echo.php",
    target:"div1"
});
</script>

http://w1.com/api/echo.php:

<?php
echo "ajax请求数据";

==================================
其实我是希望用js原生的方法解决这个问题,解决了http://a.w1.com访问http://w1.com跨域问题,谢谢各位
目前已经找到解决办法是:
http://a.w1.com/page1.html

<script>
function createScript(sUrl){
        var oScript = document.createElement("script");
        oScript.type = "text/javascript";
        oScript.src = sUrl;
        document.getElementsByTagName("head")[0].appendChild(oScript);
}

createScript("http://w1.com/api/echo.php?callback=dosomething");

function dosomething(jsondata){
    document.getElementById("div1").innerHTML = jsondata;
}
</script>

http://w1.com/api/echo.php:

<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>

关注 7 回答 7

webtimes 提出了问题 · 2016-01-20

解决大家手机端前端页面都用什么框架能快速组织呈现前端HTML页面

如题,怎么样才高效,大家都是怎么做的

关注 9 回答 6

webtimes 提出了问题 · 2016-01-14

大家所在公司的前端组件库是如何建设的

如题,怎么样才算是比较合理,比如目录结构,书写规范,css js html image都要考虑到是吧

关注 4 回答 1