h5-3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var aLi = document.getElementsByTagName(‘li‘);
    var oDiv = document.getElementById(‘div1‘);
    var i = 0;

    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(){//开始拖拽
            this.style.background = ‘green‘;
        };
        aLi[i].ondrag = function(){  //开始与结束之间触发,拖拽时停止时也触发,不同于move。
            document.title = i++;
        };
        aLi[i].ondragend = function(){//结束拖拽
            this.style.background = ‘yellow‘;
        };
    }

    oDiv.ondragenter = function(){//拖拽的目标控件被进入目标控件时。
        this.style.background = ‘blue‘;
    };

    oDiv.ondragover = function(ev){
        //进入和离开目标控件之间连续触发
        //要想触发drop事件(在目标元素上释放鼠标触发),就 必须在dragover当中阻止默认事件
        document.title = i++;
        ev.preventDefault();
    };

    oDiv.ondragleave = function(){//拖拽的目标控件被离开目标控件时。
        this.style.background = ‘red‘;
    };

    oDiv.ondrop = function(){//在目标元素上释放鼠标触发
        alert(123);
    };

};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>   //可以拖拽,发邮箱时拖拽。
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var oUl = document.getElementsByTagName(‘ul‘)[0];
    var aLi = oUl.getElementsByTagName(‘li‘);
    var oDiv = document.getElementById(‘div1‘);
    var i = 0;

    for(var i=0;i<aLi.length;i++){
        aLi[i].index = i;
        aLi[i].ondragstart = function(ev){
            var ev = ev || window.event;
            //ev.dataTransfer.setData(‘name‘,‘hello‘);
            ev.dataTransfer.setData(‘name‘,this.index);    //解决火狐不能拖拽,图片默认是可以拖拽的
            this.style.background = ‘green‘;
        };

        aLi[i].ondrag = function(){  //开始与结束连续触发
            document.title = i++;
        };

        aLi[i].ondragend = function(){
            this.style.background = ‘yellow‘;
        };
    }

    oDiv.ondragenter = function(){
        this.style.background = ‘blue‘;
    };

    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件,就 必须在dragover当中阻止默认事件
        //document.title = i++;
        ev.preventDefault();
    };

    oDiv.ondragleave = function(){
        this.style.background = ‘red‘;
    };

    oDiv.ondrop = function(ev){
        //alert(123);
        //alert( ev.dataTransfer.getData(‘name‘) );
        oUl.removeChild( aLi[ev.dataTransfer.getData(‘name‘)] );
        for(var i=0;i<aLi.length;i++){
            aLi[i].index = i;
        }
    };
};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
li{ list-style:none; width:100px; height:30px; background:yellow; margin:10px;}
#div1{ width:100px; height:100px; background:red; margin:200px;}
</style>
<script>
window.onload = function(){
    var oUl = document.getElementsByTagName(‘ul‘)[0];
    var aLi = oUl.getElementsByTagName(‘li‘);
    var oDiv = document.getElementById(‘div1‘);
    var oImg = document.getElementById(‘img1‘);
    var i = 0;

    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(ev){
            var ev = ev || window.event;
            ev.dataTransfer.setData(‘name‘,‘hello‘);//设置数据
            ev.dataTransfer.effectAllowed = ‘link‘;    //设置拖拽时鼠标样式
            ev.dataTransfer.setDragImage(oImg,100,20);//设置推拽的时候是一个图片样式,并且鼠标指针在100,20位置
        };

        aLi[i].ondragend = function(){
            this.style.background = ‘yellow‘;
        };
    }

    oDiv.ondragenter = function(){
        this.style.background = ‘yellow‘;
    };

    oDiv.ondragover = function(ev){
        //enter和leave之间连续触发
        //要想触发drop事件,就 必须在dragover当中阻止默认事件
        //document.title = i++;
        ev.preventDefault();
    };

    oDiv.ondragleave = function(){
        this.style.background = ‘red‘;
    };

    oDiv.ondrop = function(ev){
    };

};
</script>
</head>

<body>
<ul>
    <li draggable="true">a</li>
    <li draggable="true">b</li>
    <li draggable="true">c</li>
</ul>
<div id="div1"></div>
<img src="miaov.png" id="img1"/>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

#div1{ width:200px; height:200px; background:red; margin:100px;}
</style>
<script>
//拖拽文件
window.onload = function(){
    var oDiv = document.getElementById(‘div1‘);
    oDiv.ondragenter = function(){
        this.innerHTML = ‘可以释放啦‘;
    };

    oDiv.ondragover = function(ev){
        ev.preventDefault();
    };

    oDiv.ondragleave = function(){
        this.innerHTML = ‘将文件拖拽到此区域‘;
    };

    oDiv.ondrop = function(ev){//拖拽到目标元素上释放鼠标完成拖拽时触发
        ev.preventDefault();//阻止浏览器的默认打开文件事件
        var fs = ev.dataTransfer.files;
        alert(fs.length);
        alert( fs[0].type );//拖一个文件就是第0个
        var fd = new FileReader();
        fd.readAsDataURL( fs[0] );//读取文件
        fd.onload = function(){//读取成功触发onload事件
            alert( this.result );
        };
    };
};
</script>
</head>

<body>
<div id="div1">将文件拖拽到此区域</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>

#div1{ width:200px; height:200px; background:red; margin:100px;}
</style>
<script>
window.onload = function(){
    var oDiv = document.getElementById(‘div1‘);
    var oUl = document.getElementById(‘ul1‘);
    oDiv.ondragenter = function(){
        this.innerHTML = ‘可以释放啦‘;
    };

    oDiv.ondragover = function(ev){
        ev.preventDefault();
    };

    oDiv.ondragleave = function(){
        this.innerHTML = ‘将文件拖拽到此区域‘;
    };

    oDiv.ondrop = function(ev){
        ev.preventDefault();
        var fs = ev.dataTransfer.files;//多个图片
        alert(fs.length);
        alert( fs[0].type );
        /*if(fs[0].type.indexOf(‘image‘)!=-1){
            var fd = new FileReader();
            fd.readAsDataURL( fs[0] );
            fd.onload = function(){
                var oLi = document.createElement(‘li‘);
                var oImg = document.createElement(‘img‘);
                oImg.src = this.result;
                oLi.appendChild(oImg);
                oUl.appendChild(oLi);
            };
        }
        else{
            alert(‘亲,请上传图片类型‘);
        }*/

        for(var i=0;i<fs.length;i++){
            if(fs[i].type.indexOf(‘image‘)!=-1){
                var fd = new FileReader();
                fd.readAsDataURL( fs[i] );
                fd.onload = function(){
                    var oLi = document.createElement(‘li‘);
                    var oImg = document.createElement(‘img‘);
                    oImg.src = this.result;//解析的图片
                    oLi.appendChild(oImg);
                    oUl.appendChild(oLi);
                };
            }
            else{
                alert(‘亲,请上传图片类型‘);
            }
        }
    };
};
</script>
</head>

<body>
<div id="div1">将文件拖拽到此区域</div>
<ul id="ul1">
</ul>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
li{ list-style:none;}
li{ float:left; width:200px; border:1px #000 solid; margin:10px;}
li img{ width:200px;}
p{ height:20px; border-bottom:1px #333 dashed;}
#div1{ width:600px; border:1px #000 solid; height:300px; clear:both;}
.box1{ float:left; width:200px;}
.box2{ float:left; width:200px;}
.box3{ float:left; width:200px;}
#allMoney{ float:right;}
</style>
<script>

window.onload = function(){
    var aLi = document.getElementsByTagName(‘li‘);//数组
    var oDiv = document.getElementById(‘div1‘);

    var obj = {};
    var iNum = 0;
    var allMoney = null;

    for(var i=0;i<aLi.length;i++){
        aLi[i].ondragstart = function(ev){
            var aP = this.getElementsByTagName(‘p‘);//数组
            ev.dataTransfer.setData(‘title‘,aP[0].innerHTML);
            ev.dataTransfer.setData(‘money‘,aP[1].innerHTML);
            ev.dataTransfer.setDragImage(this,0,0);//this是这个li
        };
    }

    oDiv.ondragover = function(ev){
        ev.preventDefault();
    };

    oDiv.ondrop = function(ev){
        ev.preventDefault();
        var sTitle = ev.dataTransfer.getData(‘title‘);
        var sMoney = ev.dataTransfer.getData(‘money‘);
        if( !obj[sTitle] ){
            var oP = document.createElement(‘p‘);
            var oSpan = document.createElement(‘span‘);
            oSpan.className = ‘box1‘;
            oSpan.innerHTML = 1;
            oP.appendChild( oSpan );
            var oSpan = document.createElement(‘span‘);
            oSpan.className = ‘box2‘;
            oSpan.innerHTML = sTitle;
            oP.appendChild( oSpan );
            var oSpan = document.createElement(‘span‘);
            oSpan.className = ‘box3‘;
            oSpan.innerHTML = sMoney;
            oP.appendChild( oSpan );
            oDiv.appendChild( oP );
            obj[sTitle] = 1;
        }
        else{
            var box1 = document.getElementsByClassName(‘box1‘);
            var box2 = document.getElementsByClassName(‘box2‘);
            for(var i=0;i<box2.length;i++){
                if(box2[i].innerHTML == sTitle){
                    box1[i].innerHTML = parseInt(box1[i].innerHTML) + 1;
                }
            }
        }

        if(!allMoney){
            allMoney = document.createElement(‘div‘);
            allMoney.id = ‘allMoney‘;
        }

        iNum += parseInt(sMoney);
        allMoney.innerHTML = iNum + ‘¥‘;
        oDiv.appendChild( allMoney );
    };

};

</script>
</head>

<body>
<ul>
    <li draggable="true">
        <img src="img1.jpg" />
        <p>javascript语言精粹</p>
        <p>40¥</p>
    </li>
    <li draggable="true">
        <img src="img2.jpg" />
        <p>javascript权威指南</p>
        <p>120¥</p>
    </li>
    <li draggable="true">
        <img src="img3.jpg" />
        <p>精通javascript</p>
        <p>35¥</p>
    </li>
    <li draggable="true">
        <img src="img4.jpg" />
        <p>DOM编程艺术</p>
        <p>45¥</p>
    </li>
</ul>
<div id="div1">
    <!--<p>
        <span class="box1">1</span>
        <span class="box2">DOM编程艺术</span>
        <span class="box3">45¥</span>
    </p>
    <p>
        <span class="box1">1</span>
        <span class="box2">DOM编程艺术</span>
        <span class="box3">45¥</span>
    </p>
    <div id="allMoney">90¥</div>-->
</div>
</body>
</html>
时间: 2024-08-30 06:46:30

h5-3的相关文章

H5版如何在微信外(非微信浏览器)进行微信支付技术方案

官方是支持在非微信内置浏览器中调起微信支付的!H5支付是基于公众号基础开发的一种非微信内浏览器支付方式(需要单独申请支付权限),可以满足在微信外的手机H5页面进行微信支付的需求.同时,由于H5链接传播十分方便.来源不易追踪,商户需要特别注意做好防钓鱼.防刷单的处理,控制风险. 流程原理 接口说明 (1)用户打开商户H5网页选购商品,生成支付订单:(2)商户调用[统一下单]接口(接口中trade_type需定义为WAP),获得预支付交易会话标识prepayid:(3)商户按照微信H5支付协议生成d

浅谈h5移动端页面的适配问题

一.前言 昨天唠叨了哈没用的,今天说点有用的把.先说一下响应式布局吧,我一直认为响应式布局的分项目,一下布局简单得项目做响应式还是可以可以得.例如博客.后台管理系统等.但是有些会认为响应式很牛逼,尤其是在不懂前端的人眼中,一味的追求响应式布局,我觉得复杂的布局项目做响应式还不如做二套样式,因为响应式的样式混在一起真的维护起来是恨费劲的.可能我说的不对,但是发表 一点点自己的看法.说道这里就想说一下移动端的布局,有很多人就是想把手机端得程序兼容ipad,我就觉得这个很不可思议为什么要这么做得,命名

微信h5支付demo微信H5支付demo非微信浏览器支付demo微信wap支付

一.首先先确定H5支付权限已经申请!(需要微信h5支付demo的可以加 851 488 243 备注:h5支付) 二.开发流程 1.用户在商户侧完成下单,使用微信支付进行支付 2.由商户后台向微信支付发起下单请求(调用统一下单接口)注:交易类型trade_type=MWEB 3.统一下单接口返回支付相关参数给商户后台,如支付跳转url(参数名"mweb_url"),商户通过mweb_url调起微信支付中间页 4.中间页进行H5权限的校验,安全性检查(此处常见错误请见下文) 5.如支付成

移动端h5实现拍照上传图片并预览

.移动端实现图片上传并预览,用到h5的input的file属性及filereader对象:经测除了android上不支持多图片上传,其他基本ok实用: 一:先说一下单张图片上传(先上代码): html结构(含多张图片容器div): 1 <div class="fileBtn"> 2 <p>点击添加图片</p> 3 <input id="fileBtn" type="file" onchange="

cocos Creator js 房卡麻将/血战/H5四川麻将源码下载搭建

房卡麻将/血战/H5四川麻将 源码 支持iOS/Android/H5 完整源码 1.基于NODEJS+MYSQL的服务器,成熟的技术方案,高效稳定,且方便Windows开发,Linux平台布署,节约服务器运转成本. 2.采用最新版本的cocos引擎,cocos creator开发,可快速的进行界面调整.且能够快速地发布iOS,Android版本. 3.如需H5版本,只需针对H5平台进行资源优化即可. 4.成熟可靠的房卡式设计,能满足大部分用户使用体验. 5.产品经过大量测试,可以运转稳定. 测试

ios嵌套H5页面,出现的小bug;

ios嵌套H5页面,点击数字时就会弹出打电话的功能:解决方法: 在head标签中添加: <meta name="format-detection" content="telephone=no"> ios嵌套H5页面,只要碰到页面,就会使input获取焦点,调取ios键盘,解决方法:在页面上添加js如下: $("body")[0].addEventListener("touchstart",function(){ d

那些H5用到的技术(1)——素材加载

编码环境前言什么时候用到素材加载?loading提示,让用户等待图片的加载音频的加载利用神器PreloadJS总结 编码环境 Sublime Text 3 插件包括: Autoprefixer 自动补全CSS ColorPicker 颜色选择器 ConvertToUTF8 转码 GBK Support 支持GBK HTML-CSS-JS Prettify 前端代码格式化 SublimeCodeIntel 最好用的自动补全 Chrome 57.0.2950.5 m 用来预览以及调试 gifcam

h5中五大存储方式

h5之前,存储主要是用cookies.cookies缺点有在请求头上带着数据,大小是4k之内.主Domain污染. 主要应用:购物车.客户登录 对于IE浏览器有UserData,大小是64k,只有IE浏览器支持. 目标 解决4k的大小问题 解决请求头常带存储信息的问题 解决关系型存储的问题 跨浏览器 1.本地存储localstorage 存储方式: 以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除. 大小: 每个域名5M 支持情况: 注意:IE9 localStorag

H5框架之Bootstrap(二)

H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经把bootstrap了解个大概了,接下来我们就开始学习一下它里面的东西. 浏览器支持 旧的浏览器可能无法很好的支持 Bootstrap 支持 Internet Explorer 8 及更高版本的 IE 浏览器 CSS源码研究 我们不是在head里面引入了下面这些文件么 <!-- 新 Bootstra

Android 原生开发、H5、React-Native使用利弊和场景技术分享

http://m.blog.csdn.net/article/details?id=51778086 发表于2016/6/28 18:52:46  1176人阅读 最近工作中接触到React-Native框架,对其进行一些技术分析,结合之前了解的H5的一部分,加上自己做了很久的原生开发(十几个android app.sdk,包括2个ios), 总结下目前了解到的这三种移动端应用开发方式的特点和试用范围,作为个人知识的记录,也作作为公司内部互相学习的分享. 一.原生开发   原生开发是系统自带的a