html5 touch引发的一个应用以及营销
首先这里mark下自己搞的一个应用，当然有copy 的成分。
这里面有几个重要的地方
- 一个是touch事件的阻止冒泡，这个自己用了一个函数实现了。
- 还有一个是touchstart事件和tauchend事件的处理。
- 还有就是读取到的时间怎么转化成真正的时间。
stopPropagation的作用跟cancelBubble是一样的．都是用来阻止浏览器默认的事件冒泡行为．他们的不同之处是:stopPropagation符合W3C标准．适用于FireFox等浏览器，不支持IE.而cancelBubble方法不符合W3C的标准．且只支持IE浏览器
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>你能精准地按出一秒吗？title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><style type="text/css">* {margin:0; padding: 0;}html,body {width: 100%;height: 100%;overflow: hidden;background-color:#91C1AF; }/*body {background:url(http://t1.qpic.cn/mblogpic/227d0142d8ee196e1140/2000) repeat; }*/#box {width:100%;height:100%;background:url(http://t1.qpic.cn/mblogpic/227d0142d8ee196e1140/2000) repeat;overflow: hidden;text-align: center;}#top {width: 200px ;height: 110px; background:url(http://t1.qpic.cn/mblogpic/f0a794dda41b96115500/2000);background-size: 100% 100%; margin: 10% auto 0}#box h1 {font-size: 16px;font-weight: normal;padding: 10px;color: #666;}#content {width: 280px;background: #fff;border-radius: 20px;margin: 0 auto;line-height: 24px;padding: 5px 3px;color: #666;font-size: 18px;}#content h2 {font-size: 24px;display: inline;color: #f5484b;}#btn_bg {width: 110px;height: 110px;border-radius: 55px;background:#eee; margin: 10px auto;position: relative;border:1px solid #f0d0d0;}#btn_bt {width: 90px;height: 90px; border-radius: 45px;background: #E4A96A;line-height: 90px;position: absolute;top: 10px;left: 10px;border: 0;}#btn_bt span {color: #fff;font-size: 24px;}.active {-webkit-box-shadow:1px 1px 6px 2px rgba(0,0,0,0.4) inset ;-ms-box-shadow:1px 1px 6px 2px rgba(0,0,0,0.4) inset ; box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.4) inset ; }#box a {border-radius: 5px;background-color: rgb(228, 169, 106);display: block;width:120px;height:20px;padding: 5px;text-decoration: none;font-size: 16px;color: #fff;margin: 0 auto;margin-top: 10px;}#share {width: 100%;height: 100%;background: rgba(0,0,0,0.9) url(http://t1.qpic.cn/mblogpic/778e197134145bd8c758/2000) no-repeat;background-position: top right; position: absolute;top:0;right: 0;z-index: 99;display: none;}#logo {width: 80px;height: 80px;background:url(http://t1.qpic.cn/mblogpic/1b60299d2dd78769c1f2/2000);background-size: 100% 100%; margin: 10px auto;}.footer{position: fixed;bottom: 0;width: 100%;display: block;}.footer img{display:block;}style>
head><body>
<div id="wx_pic" style="margin:0 auto;display:none;">
div><div style="text-align: center;background:#91C1AF"><div id="" style="width: 100%; text-align: center; display: block; background:#91C1AF; margin: 0 auto;"><div id="box" style="width: 100%; height: 100%; background:#91C1AF;text-align: center;overflow: scroll"><div id="top">div><h1>你能精确地按出一秒吗？h1><p id="content">p><div id="btn_bg"><div id="btn_bt"><span style="display: block">按住span>div>div><a style="margin-top:20px" id="share_a" href="http://www.stkeyi.cn/mei/yimiao/?from=groupmessage&isappinstalled=0#">炫耀一下a><a href="http://no985.com/yixiujiandan2/index.php">更多好玩a><a href="http://no985.com/yixiujiandan/index.php">zjumakera><div id="share">div>div>div>
div><script>window.onload = function(){/*初始化*/var wWidth = document.documentElement.clientWidth;var wHeight = document.documentElement.clientHeight;var oBox = document.getElementById("box");oBox.style.width = wWidth + 'px';oBox.style.height = wHeight + 'px';var oBtn = document.getElementById("btn_bt");var oP = document.getElementById("content");var timeStart = 0;var timeEnd = 0;function absorbEvent_(event) {var e = event || window.event;e.preventDefault && e.preventDefault();e.stopPropagation && e.stopPropagation();e.cancelBubble = true;e.returnValue = false;return false;}function preventLongPressMenu(node) {node.ontouchstart = absorbEvent_;node.ontouchmove = absorbEvent_;node.ontouchend = absorbEvent_;node.ontouchcancel = absorbEvent_;}preventLongPressMenu(oBtn);/*触摸事件*/oBtn.addEventListener("touchstart",function(){timeStart = (new Date()).valueOf();oBtn.className = "active";},false);oBtn.addEventListener("touchend",function(){timeEnd = (new Date()).valueOf();time = (timeEnd - timeStart)/1000;oBtn.className = "";var text = '';var text2 = '';var title = '';if(time >0 && time <= 0.6) {text = ''
+time+' 秒
这都想成为时间达人?要决战到天亮的节奏啊！';text2 = ''+time+'秒,你还差得远呢?';title = '我按出了'+time+'秒，按出一秒你就是时间达人！哈哈哈...';} else if(time > 0.6 && time <= 0.9) {text = ''
+time+' 秒
与时间达人的差距只在呼吸间!';text2 = ''+time+'秒,差距只在呼吸间!';title = '我按出了'+time+'秒，按出一秒你就是时间达人哦！哈哈哈...';} else if(time >0.9 && time <= 1.0) {text = ''
+time+' 秒
叼爆了! 你是开挂了吧！发朋友圈炫耀一下！';text2 = ''+time+'秒,叼爆了! 你是开挂了吧！';title = '我按出了'+time+'秒，按出一秒你就是时间达人哦！哈哈哈...';}else if(time > 1 && time <= 1.1) {text = ''
+time+' 秒
人中极品，与时间达人擦毫秒而过。';text2 = '1.00秒,完美';title = '我按出了'+time+'秒，按出一秒你就是时间达人哦！哈哈哈...';} else {text = ''
+time+' 秒
过了，过了。不服让朋友来战！';text2 = ''+time+'秒，你火星时间吧？！';title = '我按出了'+time+'秒，按出一秒你就是时间达人哦！哈哈哈...';}oP.innerHTML = text ;document.title = title;},false);var aShare = document.getElementById("share_a");var divShare = document.getElementById("share");aShare.addEventListener("touchstart",function(){divShare.style.display = "block";document.addEventListener("touchmove",function(){divShare.style.display = "none";},false)},false);divShare.addEventListener("touchstart",function(){this.style.display = "none";},false);}
script>
body>html>下面还有一个是用原生js写的添加class和移除class
<script type="text/javascript">
function hasClass(obj, cls) {return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}function addClass(obj, cls) {if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}function removeClass(obj, cls) {if (hasClass(obj, cls)) {var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');obj.className = obj.className.replace(reg, ' ');}
}function toggleClass(obj,cls){if(hasClass(obj,cls)){removeClass(obj, cls);}else{addClass(obj, cls);}
}function toggleClassTest(){var obj = document. getElementById('test');toggleClass(obj,"testClass");
}
script>当然 ，自己以前版本的这个东西也是有一些可以值得学习的东西
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>你能精准地按出一秒吗？title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"><style type="text/css">* {margin:0; padding: 0;}html,body {width: 100%;height: 100%;overflow: hidden;background-color:#91C1AF; }/*body {background:url(http://t1.qpic.cn/mblogpic/227d0142d8ee196e1140/2000) repeat; }*/#box {width:100%;height:100%;background:url(http://t1.qpic.cn/mblogpic/227d0142d8ee196e1140/2000) repeat;overflow: hidden;text-align: center;}#top {width: 200px ;height: 110px; background:url(http://t1.qpic.cn/mblogpic/f0a794dda41b96115500/2000);background-size: 100% 100%; margin: 10% auto 0}#box h1 {font-size: 16px;font-weight: normal;padding: 10px;color: #666;}#content {width: 280px;background: #fff;border-radius: 20px;margin: 0 auto;line-height: 24px;padding: 5px 3px;color: #666;font-size: 18px;}#content h2 {font-size: 24px;display: inline;color: #f5484b;}#btn_bg {width: 110px;height: 110px;border-radius: 55px;background:#eee; margin: 10px auto;position: relative;border:1px solid #f0d0d0;}#btn_bt {width: 90px;height: 90px; border-radius: 45px;background: #E4A96A;line-height: 90px;position: absolute;top: 10px;left: 10px;border: 0;}#btn_bt span {color: #fff;font-size: 24px;}.active {-webkit-box-shadow:1px 1px 6px 2px rgba(0,0,0,0.4) inset ;-ms-box-shadow:1px 1px 6px 2px rgba(0,0,0,0.4) inset ; box-shadow: 1px 1px 6px 2px rgba(0,0,0,0.4) inset ; }#box a {border-radius: 5px;background-color: rgb(228, 169, 106);display: block;width:120px;height:20px;padding: 5px;text-decoration: none;font-size: 16px;color: #fff;margin: 0 auto;margin-top: 10px;}#share {width: 100%;height: 100%;background: rgba(0,0,0,0.9) url(http://t1.qpic.cn/mblogpic/778e197134145bd8c758/2000) no-repeat;background-position: top right; position: absolute;top:0;right: 0;z-index: 99;display: none;}#logo {width: 80px;height: 80px;background:url(http://t1.qpic.cn/mblogpic/1b60299d2dd78769c1f2/2000);background-size: 100% 100%; margin: 10px auto;}.footer{position: fixed;bottom: 0;width: 100%;display: block;}.footer img{display:block;}style>
head><body>
<div id="wx_pic" style="margin:0 auto;display:none;">
div><div style="text-align: center;background:#91C1AF"><div id="" style="width: 100%; text-align: center; display: block; background:#91C1AF; margin: 0 auto;"><div id="box" style="width: 100%; height: 100%; background:#91C1AF;text-align: center;overflow: scroll"><div id="top">div><h1>你能精确地按出一秒吗？h1><p id="content">p><div id="btn_bg" onselectstart="return false;"><div id="btn_bt" onselectstart="return false;"><span style="display: block">按住span>div>div><a style="margin-top:20px" id="share_a" href="http://www.stkeyi.cn/mei/yimiao/?from=groupmessage&isappinstalled=0#">炫耀一下a><a href="http://mp.weixin.qq.com/s?__biz=MzA3ODkxMDg5MA==&mid=207367027&idx=1&sn=eb0563c38556dbda8a196ea05328fed0#rd">关注wuhana><a href="http://mp.weixin.qq.com/mp/getmasssendmsg?__biz=MzAwOTU2MjM5NQ==#wechat_webview_type=1&wechat_redirect">悠居生活a><div id="share">div>div>div>
div><script>// $(function () {// $("#btn").bind("touchstart", function () {// var app=document.createElement("div");// app.innerHTML="11";// $("#father").appendChild(app);// });// });function hasClass(obj, cls) {return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));}function addClass(obj, cls) {if (!this.hasClass(obj, cls)) obj.className += " " + cls;}function removeClass(obj, cls) {if (hasClass(obj, cls)) {var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');obj.className = obj.className.replace(reg, ' ');}}function load (){var thisid = document.getElementById("btn_bt");thisid .addEventListener('touchstart',touch, false);thisid .addEventListener('touchmove',touch, false);thisid .addEventListener('touchend',touch, false);function touch (event){var event = event || window.event;var oInp = document.getElementById("content");switch(event.type){case "touchstart":oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";addClass(thisid,"active");break;case "touchend":oInp.innerHTML = "Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";break;case "touchmove":event.preventDefault();oInp.innerHTML = "Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";removeClass(thisid,"active");break;}}}window.addEventListener('load',load, false);
script>
body>html>具体在什么场景下用于营销：其实自己这个还需要绑定微信公众号，然后自定义分享的照片和题目，这样才更好。
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！