他的小前端 (1)—— 移动端特殊效果-网页小键盘

移动端的CLICK会延迟,这个效果没看出来延迟,为什么?

页面:

<div id="container" style="width: 200px">
        <p id="write" ></p>
        <ul id="keyboard">
            <li>1</li>
            <li>2</li>
            <li class="delete">delete</li>
        </ul>
    </div>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jianpan.js"></script>

JS:

$(function(){
    var $write = $(‘#write‘);
    $(‘#keyboard li‘).click(function(){
        var $this = $(this),
            character = $this.html(); // If it‘s a lowercase letter, nothing happens to this variable
        
        
        // Delete
        if ($this.hasClass(‘delete‘)) {
            var html = $write.html();
            $write.html(html.substr(0, html.length - 1));
            return false;
        }
        
        // Special characters
        if ($this.hasClass(‘return‘)) character = "\n";
        
        
        // Add the character
        $write.html($write.html() + character);
    });
    
});

时间: 2024-10-09 20:42:52

他的小前端 (1)—— 移动端特殊效果-网页小键盘的相关文章

前端里移动端到底比pc端多哪些知识?

前端里移动端到底比pc端多哪些知识,为啥面试时好多公司都问h5水平如何? 我做过几年的web前端开发,就简单谈谈自己的感受吧. 首先来看看PC端和移动端在前端开发上的一些区别: (1)PC考虑的是浏览器兼容性,移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器用的都是webkit内核,所以做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: (2)在部分事件的处理上,移动端自然是偏向于触屏的,所以触屏事件的一些规律要多摸索一下,

HTML5前端(移动端网站)性能优化指南

HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交互的理解和视觉设计的还原上. HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少,所谓前端是指在客户端通过浏览器发送了一个请求,除去后台系 统用户请求.执行数据查询并对结果进行组织所需要处理消耗的时间,在涌现的新技术中,JavaScript和一套新的API纯脚本技

移动前端系列——移动端页面坑与排坑技巧

移动前端系列——移动端页面坑与排坑技巧 In 网页重构 on 2014-12-08 20:21:19 by lyushine 对于前端开发者来说移动端存在更多的挑战,移动端页面开发过程中会碰到各种各样千奇百怪的问题(我们俗称BUG或坑),那么今天我为大家分享移动端页面开发过程中的一些坑和排坑技巧. 移动端页面在不同设备.不同操作系统 .不同运行环境下都可能造成各种各样的没有碰到过的的坑,相比曾经的IE6坑多了.下面先介绍一下4类具体常见的坑: 1.外观 A.页面高度渲染错误 在各移动端浏览器中经

微信开发接口调用(前端+.net服务端)

微信接口开发,包含服务端(采用.net),前端js//服务端 namespace EatWorld { public partial class Default : System.Web.UI.Page { string Token = System.Configuration.ConfigurationManager.AppSettings["Token"]; string appid = System.Configuration.ConfigurationManager.AppSe

小前端大能耐——Canvas与Javascript配合实现几个功能

1.粒子化 function Dot(X, Y, Z, R) { this.dx = X; this.dy = Y; this.dz = Z; this.tx = 0; this.ty = 0; this.tz = 0; this.z = Z; this.x = X; this.y = Y; this.r = R; this.paint = function() { context.save(); context.beginPath(); var scale = 250 / (250 + thi

在前端眼中pc端和移动的开发区别

按照昨天所说,本包子今天将总结在前端开发中,pc端和移动端的区别,整理完这些区别,本包子将开始整理pc端的布局,会写实际的代码了,还是那句话,希望文章中有什么不足的地方,大家能多多指正,大家一起进步,成为一个优秀的前端 ~~~ > o < ~~~ PC端和移动端布局的区别 1.pc端没有触摸的各种事件,移动端有:移动端没有鼠标移入移出事件,但是pc端有 2.Pc端最常用的布局是固定宽度为980px(也有960px,1000px,1200px):而在移动端,因为有很多网页是可以横屏看也可以竖屏看

待解决需求-移动端打开网页强制横屏

待解决需求-移动端打开网页强制横屏[在手机未开启自动横屏的设置时] 或者说: 比如随时可以查看类似Excel.table样子的报表.手机端打开为了宽度看的内容多点(允许底部出现滚动条),所以做好能够横屏过来,然后内容自适应宽度. 或者说: 手机端强制网页横屏,但是里面的内容不要横屏,宽度能自适应. 网上查了下:有用css的  -webkit-transform: rotate(-90deg); 实现.但是它把整个div横屏后,里面的内容也横屏了. 待解决.....................

我的小前端 (3)—— 移动端特殊效果-让页面宽度自适应

没有什么特别新技术,就是记录我做移动端遇到的问题 2016-02-16 移动端的页面宽度不固定,让页面宽度自适应的方法: 1.直接属性赋值,页面宽度不固定[我常用第一个] <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 2.页面DIV宽度固定320内,由JS控制缩放.[如果页面太宽,比例变了.个人

前端:移动端和PC端的区别

在阿里的几次面试中,总是被问到移动端和PC端有什么区别,当时回答的时候主要是回答了在兼容性.网速.适配.页面布局等方面的不同,但是还是很不系统,所以这里做一个总结. 第一: PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化. 第二: 在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件. 另外