精华内容
参与话题
问答
  • 原生JS

    2018-02-02 22:50:46
    jquery太有名了,以至于大家都忘记原生js了。 jquery一般有两个用处:浏览器兼容,简化dom操作。现在浏览器更新都很快,除了IE6用的人已经很少了。 例子1,发消息 win7的IE是IE11,2013年的。 xmlhttp=new ...

    jquery太有名了,以至于大家都忘记原生的js了。

    jquery一般有两个用处:浏览器兼容,简化dom操作。现在浏览器更新都很快,除了IE6用的人已经很少了。

    例子1,发消息

    win7的IE是IE11,2013年的。
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=state_Change;
    xmlhttp.open("GET","http://127.0.0.1:5000/hello/",true);
    xmlhttp.send(null);
        
        function state_Change(){
          if (xmlhttp.readyState==4)
             console.log('99999999999', xmlhttp.status, xmlhttp.responseText);
        }
        flask支持跨域也很方便,return时,加上code和http头就可以了
        @app.route('/hello/')
        @app.route('/hello/<name>')
        def hello(name=None):
         return render_template('hello.html', name=name),200,{"Access-Control-Allow-Origin":"*"}
        
        dom操作,见 http://blog.csdn.net/DUDUfine/article/details/75944536

    同步发消息更简单

    xmlhttp=new XMLHttpRequest();
    xmlhttp.open("GET","http://127.0.0.1:5000/hello/",false);
    xmlhttp.send(null);

    console.log('99', xmlhttp.status, xmlhttp.responseText);
       

     

     

     

     

     

     

    展开全文
  • 首先是html: 代码如下&lt;div class="carousel" id="carousel"&gt; &lt;div class="imageList"&gt; &lt;ul&gt; &lt;li&...img/

    首先是html:  代码如下

    <div class="carousel" id="carousel">
        <div class="imageList">
            <ul>
                <li><a href="#"><img src="img/0.png"></a></li>
                <li><a href="#"><img src="img/1.png"></a></li>
                <li><a href="#"><img src="img/2.png"></a></li>
                <li><a href="#"><img src="img/3.png"></a></li>
                <li><a href="#"><img src="img/4.png"></a></li>
            </ul>
        </div>
    </div>

    注意:以上图片请换成自己本地的图片!!!   记得加一个移动端的视口哦

    接下来就是css代码:

      

    *{
        margin: 0;
        padding: 0;
    }
    body{
        overflow: hidden;
    }
    .carousel{
        width:100%;
        overflow: hidden;
        border:1px solid black;
    }
    .carousel ul{
        list-style: none;
    }
    .carousel ul li{
        position: absolute;
        top:0;
        left:0;
        width: 100%;
    }
    .carousel ul li img{
        width:100%;
    

    }

    接下来就是js代码: 代码有点多 但是每一行都有注释

    var carousel = document.getElementById('carousel');
    var imageLis = document.querySelectorAll('#carousel ul li')
    //信号量
    var idx=2;
    var next=3;
    var prev=1;
    
    var windowWidth;
    //初始化
    init();
    //窗口变化
    window.onreset = init;
    function init() {
        //初始化,根据屏幕的变化,根据宽度计算轮播的高度
        windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
        //windowWidth / height = 200 /130;
        carousel.style.height = windowWidth / (200 / 130);
        //初始设置li的默认位置
        for (var i=0; i<imageLis.length;i++){
            imageLis[i].style.webkitTransform = 'translateX(' + windowWidth + 'px)';
        }
        //去掉所有图片的过度,因为鼠标滑动时不需要过度
        noneTransition();
        //让当前三个信号量上一张,下一张,当前张确定位置
        changex();
    }
    function noneTransition() {
        imageLis[idx].style.transition = 'none';
        imageLis[next].style.transition = 'none';
        imageLis[prev].style.transition = 'none';
    }
    function changex() {
        imageLis[idx].style.webkitTransform = 'translateX(0px)';
        imageLis[next].style.webkitTransform = 'translateX(' + windowWidth + 'px)';
        imageLis[prev].style.webkitTransform = 'translateX(' + -windowWidth + 'px)';
    }
    //手指事件监听
    carousel.addEventListener('touchstart',touchstartHandle,false);
    carousel.addEventListener('touchmove',touchmoveHandle,false);
    carousel.addEventListener('touchend',touchendHandle,false);
    //手指偏移量
    var deltaX;
    //开始记录时手指的位置
    var startX;
    //时间戳
    var startTime;
    
    function touchstartHandle(event) {
        event.preventDefault();
        //判断手指个数,如果大于1跟手指头,返回
        if (event.touches.length > 1){
            return;
        }
        //记录手指偏移量
        deltaX = event.touches[0].clientX;
        //记录手指位置
        startX = event.touches[0].clientX;
        //去掉过度
        noneTransition();
        //重新设置当前信号量的位置
        changex();
        //记录手指点下的时间
        startTime = new Date();
    }
    function touchmoveHandle() {
        event.preventDefault();
        //判断手指数
        if (event.touches.length > 1){
            return;
        }
        //获得当前坐标
        var clientX = event.touches[0].clientX - deltaX;
        //三张图片跟随手指的移动而移动
        imageLis[idx].style.webkitTransform = 'translateX(' + clientX + 'px)';
        imageLis[next].style.webkitTransform = 'translateX(' + (windowWidth + clientX) + 'px)';
        imageLis[prev].style.webkitTransform = 'translateX(' + (-windowWidth + clientX) + 'px)';
    }
    function touchendHandle(event) {
         event.preventDefault();
         //判断滑动是否成功
        //获取滑动距离
        var distence = event.changedTouches[0].clientX - startX;
        //获取滑动时间
        var time = new Date() - startTime;
        console.log(distence,time);
        //成功的条件  如果滑动的距离超过屏幕的一半,不管时间,表示成功
        //如果滑动的时间小雨500毫秒且移动距离大于30像素
        //如果滑动的距离为正数,表示向右,反之向左
        if (distence >= windowWidth / 2 || (distence > 30 && time < 500)){
            console.log('向右滑动成功');
            //改变信号量
            /*perv=1 idx=2 next=3
            * -->
            * prev=0 inx=1 next=2
            *
            * */
            next = idx;
            idx = prev;
            prev--;
            if (prev < 0){
                prev = 4;
            }
    
            //此时手指头已经移开了,接下来图片的运动靠的是过度
            //只需要给需要移动的人添加过度
            imageLis[idx].style.transition = 'all 0.3s ease 0s';
            imageLis[next].style.transition = 'all 0.3s ease 0s';
            //接下来就是移动了
            imageLis[idx].style.webkitTransform = 'translateX(0px)';
            imageLis[next].style.webkitTransform = 'translateX(' + windowWidth + 'px)';
    
        } else if (distence < -windowWidth / 2 || (distence < -30 && time < 500)){
            showNext();
            console.log('向左滑动成功')
        } else{
            console.log('滑动失败')
            //反回原位,三人都加过度
            imageLis[idx].style.transition = 'all 0.3s ease 0s';
            imageLis[prev].style.transition = 'all 0.3s ease 0s';
            imageLis[next].style.transition = 'all 0.3s ease 0s';
            //移动归位
            changex();
        }
    }
    function showNext() {
        /*
        * prev=1 idx=2 next=3;
        * -->
        * prev=2 idx=3 next=4
        * */
        prev=idx;
        idx=next;
        next++;
        if (next > 4){
            next = 0;
        }
        //新的next看不到不用管怎么变化
        imageLis[next].style.transition = 'none';
        imageLis[next].style.webkitTransform = 'translateX('+ windowWidth + 'px)';
    
        imageLis[idx].style.transition = 'all 0.3s ease 0s';
        imageLis[prev].style.transition = 'all 0.3s ease 0s';
    
        imageLis[idx].style.webkitTransform = 'translateX(0px)';
        imageLis[prev].style.webkitTransform = 'translateX(' + -windowWidth + 'px)';
    }

    展开全文
  • 原生js之道——原生js编写类选择器

    万次阅读 2016-04-19 21:52:48
    一、类选择器的概念 类选择器,就是通过class属性获取节点。... 在jquery中,我们可以很方便的通过$(“.red”)...但是在原生的javascript中,有getElementById(按照id属性获取元素)、getElementsByTagName(按照标签名

    一、类选择器的概念

    类选择器,就是通过class属性获取节点。比如一个html结构中,有三个p标签都具有class=”red”的属性,那么类选择器返回的就是这三个p标签。

    在jquery中,我们可以很方便的通过$(“.red”)这种方式按照类获取节点。但是在原生的javascript中,有getElementById(按照id属性获取元素)、getElementsByTagName(按照标签名获取元素)等方法,但是并没有类选择器相关方法。因此,编写原生js实现类选择器的方法非常关键。

     

    二、类选择器的实现

    通过利用原生js编写类选择器,可以更深入的了解js中的DOM相关操作,下面我们就来看一个简单的类选择器是如何实现的:

    function getElementsByClass(classnames){
      var classobj = newArray();
      var classint = 0;
      var tags =document.getElementsByTagName("*");
      for(var i in tags){
       if(tags[i].nodeType == 1){
         if(tags[i].getAttribute("class") == classnames){
           classobj[classint] = tags[i];
            classint++;
          }
        }
      }
      return classobj;
    }


    我们封装了一个getElementsByClass()方法,该方法的效果是:获取所有DOM节点,它们的class属性为选定值,并返回到一个数组中。该方法传递一个参数,即需要选择的class值。

    该类选择器的实现方法,首先创建一个空的数组classobj,用来存放获取到的DOM节点。classint变量用来进行索引的表示,方便数组操作。我们利用getElementsByTagName(“*”)方法获取了这个页面上的所有DOM节点(*表示匹配所有)。

    取出了所有DOM节点,我们就可以进行判断了。循环遍历取到的每一个节点,如果它的nodeType是1(元素节点),则利用getAttribute(“class”)方法获取节点的class属性值,并与传递进来的class参数进行比对,如果相同,说明是我们想要的节点,存入事先定义好的数组中。最后返回该数组即可。

     

    三、原生js类选择器测试

    下面我们来验证一下我们自己编写的类选择器是否正常工作,测试代码如下:

    <!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>无标题文档</title>
    <scriptsrc="classtest.js"></script>
    <script>
    window.onload =function(){
       var a = getElementsByClass("atest");
      a[0].onmouseover = function(){
        alert("class!!");
      }
    }
    </script>
    <style>
    .atest{background:blue;width:200px;height:200px;margin:40px;color:white;}
    .btest{background:green;width:200px;height:200px;margin:40px;color:white;}
    </style>
    </head>
    <body>
    <divclass="atest">atestAAA</div>
    <divclass="btest">atestBBB</div>
    </html>


    该代码我们利用我们自己封装的方法进行了测试,获取class为atest的元素,鼠标滑过后会弹出对话框。

    注意我们封装的这个方法返回的是一个数组,就如同jquery中的sibling()方法一样,需要加入索引才能选中元素。如果一个页面有多个选中元素,可以利用数组循环遍历进行相应操作。

    展开全文
  • 原生js读取json文件

    万次阅读 多人点赞 2019-05-23 14:43:32
    1.首先编写一个json文件:demo.json [ { "name":"张三", "sex":"男", "email":"zhangsan@123.com" }, { "name":"李四", "sex":"男", "email":"lisi@123.com" }, { "name":"王五", ...

    1.首先编写一个json文件:demo.json

    [ 
    { 
    "name":"张三", 
    "sex":"男", 
    "email":"zhangsan@123.com" 
    }, 
    { 
    "name":"李四", 
    "sex":"男", 
    "email":"lisi@123.com" 
    }, 
    { 
    "name":"王五", 
    "sex":"女", 
    "email":"wangwu@123.com" 
    } 
    ] 

    2.js读取json文件

    <script>
    		window.onload = function () {
                var url = "demo.json"/*json文件url,本地的就写本地的位置,如果是服务器的就写服务器的路径*/
                var request = new XMLHttpRequest();
                request.open("get", url);/*设置请求方法与路径*/
                request.send(null);/*不发送数据到服务器*/
                request.onload = function () {/*XHR对象获取到返回信息后执行*/
                    if (request.status == 200) {/*返回状态为200,即为数据获取成功*/
                        var json = JSON.parse(request.responseText);
                        for(var i=0;i<json.length;i++){
                        	console.log(json[i].name);
                        }
                        console.log(json);
                    }
                }
           }
    	</script>

    3.我的文件位置

    4.用Ajax也是可以的

    <script type="text/javascript">
        var Ajax = function ()
        {
            $.getJSON ("demo.json", function (data)
            {
                $.each (data, function (i, item)
                {
                   console.log(item.name);
                });
            });
        }();
    </script>
    $.ajax({
    				url: "demo.json",//json文件位置,文件名
    				type: "GET",//请求方式为get
    				dataType: "json", //返回数据格式为json
    				success: function(data) {//请求成功完成后要执行的方法 
    				   //给info赋值给定义好的变量
    				   var pageData=data;
    				   for(var i=0;i<data.length;i++){
    					   console.log(pageData[i].name);
    				   }
    				}
    			})

     

    展开全文
  • 原生js函数防抖

    万次阅读 多人点赞 2020-04-29 17:10:30
    函数防抖主要就是防止频繁触发事件就会频繁触发回调,回调要是操作dom或者其他耗时工作,浏览器受不了。 函数防抖: 好比电梯需要上人,来一个人,就要等几秒再走,再来个人又要多等一样的时间,再来一样。...
  • 原生js之fetch

    万次阅读 多人点赞 2020-04-08 23:17:47
    fetch不是ajax的进一步封装,是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象,是一个全局方法。 fetch规范与jQuery.ajax()主要有三种方式的不同: 当接收到一个代表错误的 HTTP 状态码时,从fetch...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 原生js打印插件Print.js

    万次阅读 2017-11-03 14:18:50
    以下是在Jquery插件库中找到的一款原生js打印插件,代码清洁简单,封装的代码也很好理解。index.html页面代码<!doctype html> <html> <head> <meta charset="UTF-8"> <title&...
  • 原生JS实现下拉刷新

    万次阅读 2017-12-11 11:00:58
    <!DOCTYPE html> <title>Document <title>Pull to Refresh ,height=device-
  • <!DOCTYPE html> <... <head> ...meta charset="utf-8" />...原生js彩色星星喷射特效</title> </head> <style type="text/css"> * { padding: 0; margi...
  • 原生JS扫雷游戏实战开发

    千人学习 2018-08-24 13:32:34
    本课程主要使用html、css和js开发扫雷游戏,包括游戏界面,游戏功能等
  • 原生JS获取ScrollTop/ScrollLeft

    万次阅读 2016-09-05 15:01:05
    使用原生JS获取浏览器ScrollTop,ScrollLeft的方法:function scroll() { if (window.pageYOffset != null){ // 支持IE9 + return{ left:window.pageXOffset, top:wi
  • 原生JS总结

    千次阅读 2019-07-02 14:46:37
    1.JS是一种编程语言,主要生成一些特效,完成用户和页面的交互 2.引入: 内部脚本 外部脚本 <script type ="text/javascript" src=""> </script> 浏览器内核:渲染引擎 JS引擎 ...
  • 原生JS写点击事件

    2018-07-10 00:15:56
    varallClick=document.getElementById("all1");...//JS监听 allClick.addEventListener('click',function(){ varbolcheck=this.checked; varobox=this.parentNode; varlis=obox.children[2].getEl...
  • 原生 JS总结

    千次阅读 2019-04-19 14:28:08
    =============== 通知: ...! -------------------在此谢过!----------- ...前言:随着前端市场日新月异的发展,现如今的市场要的不只是会切切图的小仔、小妹了,而是需要真正懂原生js闭包,继承,原...
  • 原生js日历

    千次阅读 2018-08-23 10:08:24
    js原生日历 参考文献: [1] js实现日历的简单算法 [2] 创建一个js日历(原生JS实现日历)
  • 原生js添加类名

    万次阅读 2018-01-18 23:48:01
    动态添加class类名在前端开发过程中是很常见得做法,比如说在实现轮播图的时候给当前图片的锚点添加一个active类,有又或者在实现动画的时候添加一个终态css...还是推荐用原生js来实现这些功能,这样能够有效的提升...
  • 原生js开关

    千次阅读 2018-04-26 17:30:56
    今天跟大家分享一个js的开关吧,当我第一看到这个开关的时候,觉得特别神奇,那是还是一个老师傅写给我看的,很简单一看就懂。var i=true; if(i){  $('.Bg1').css('display','block');  $('.Bg2').css('display','...
  • 原生js进度条

    2016-12-07 14:08:25
    原生js进度条代码块例如:<!doctype html> 无标题文档 *{ margin:0px; padding:0px;} #box{ width:300px; height:32px; margin:150px auto
  • 但是无效,用原生js var script = document.createElement('script'); script.type = 'text/javascript'; script.src = './script/sec.js'; //填自己的js路径 document.body.appendChild(script); 有效 ...
  • 原生JS实现动态返回顶部

    千次阅读 2018-12-05 22:41:52
    户体验效果来说,并不是最好的。(锚链接回到顶部时太快了,而且用户可能在看到某个感兴趣的东西想停下来,却停不下来)   【主体】  针对上面的缺点,我们试着用Javascript的方法来得到实现。...
  • 原生js封装transformCSS.js

    千次阅读 2019-09-16 20:49:39
    原生transformCSS.js方法封装 transform属性 CSS3中,transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后,元素主要可以进行以下变换: 旋转(rotate) 平移(translate) 缩放(scale) 倾斜...
  • 窗口可视区域宽度: document.documentElement.clientWidth ||document.body.clientWidth; 窗口可视区域高度: document.documentElement.clientHeight ||document.body.clientHeight; 窗口可视区域宽度+边线和滚动...
  • 原生JS与其他JS 区别

    千次阅读 2016-12-29 11:00:28
    1.原生js就是javascript ,也是网站前端核心内容,主要操作流程是,先获得DOM或切换DOM,然后修改DOM对象的属性或调用DOM对象的方法,存在的主要问题是低版本IE兼容性问题及复杂的DOM操作,高端研究人员必修 ...
  • 原生js创建并删除dom

    2020-08-07 16:12:47
    一言不合上代码,以canvas为例: id = "canvas1"; //创建一个canvas var canvas = document.createElement("canvas"); canvas.id = id; canvas.width = window.screen.availWidth;...canvas.height= window.screen....
  • vue原生js打印插件

    万次阅读 2018-06-12 14:20:59
    使用原生window.print var printhtml = window.getElementById(dom).innerHtml // 获取打印区域 var oldhtml = document.innerHtml // 保存原始内容 document.innerHtml = printhtml // 赋值打印 windo...

空空如也

1 2 3 4 5 ... 20
收藏数 34,946
精华内容 13,978
关键字:

原生js