【javascript实例学习之二——类新浪微博的输入框】的更多相关文章

javascript实例学习之二——类新浪微博的输入框

该案例实现如下效果,具体可见新浪微博网站的微博发布框 实现 以下效果效果1:当光标移入文本框时,文本框上方的文字发生变化,显示剩余可以输入的字数,当光标移出文本框,并且文本框中没有任何输入时,恢复最初默认的文字 效果2:文本输入的时候,文本框提示剩余文本数,剩余文本字数随着输入字数而减少,两个字母算一个字,一个汉字算一个字 效果3:当输入框为空,或者输入框内的文本超过140个字的时候,发布按钮不可用,否则可用:在发布按钮不可用的情况下点击发布按钮,文本框会出现红色背景,并闪动两次 对应的html…

如何对Javascript代码进行二次压缩（混淆）

如何对Javascript代码进行二次压缩(混淆) 对Javascript代码进行压缩(混淆),可以有效减少传输和加载时间.但是,不是所有的变量(方法)都能被混淆的,一般来说,只有非属性的变量(方法)可以被混淆,而属性的变量(方法)就不行了.我们自己是知道这些属性(方法)是不会被外部访问和修改的,所以可以很放心地对其进行二次混淆.那么,如何自己定义混淆规则并进行二次混淆呢? 首先,页面上至少要用一个输入框和一个按钮.我这里设置有2个输入框,分别加上"uncompress"和"…

JavaScript基础笔记二

一.函数返回值1.什么是函数返回值    函数的执行结果2. 可以没有return // 没有return或者return后面为空则会返回undefined3.一个函数应该只返回一种类型的值 二.可变参(不定参)arguments function sum (a,b) { var result=0; var i=0; for(i=0;i<arguments.length;i++) { result+=arguments(i); } alert(resulet); } sum(12,5,7,5,5…

JavaScript基本概念(二)

JavaScript 基本概念(二) 操作符和语句 目录 操作符 一元操作符 位操作符 布尔操作符 乘性操作符 其他操作符 语句部分 说起操作符,回忆下上一篇文章末尾说的话. 操作符 一元操作符 ++ .--(前置和后置) 注意: 和其他操作符混合使用时候的优先级问题: 前置后置操作符的区别: 这4个操作符对任何值都适用包括对象和字符串.布尔值:(能转换为数字值的转换,对象则先调用valueOf()方法,看能不能转换为数字,不能的话再调用toString(),然后再转) +.- (正负操作符)…

前端笔记之JavaScript面向对象（二）内置构造函数&相关方法|属性|运算符&继承&面向对象

一.复习 1.1复习上下文 函数的调用方式 上下文 fun() window obj.fun() obj box.onclick = fun box setInterval(fun,1000) setTimeout(fun,1000) window array[8]() array new fun() 秘密创建的新对象 要看清楚最终的函数调用者是谁. IIFE也被当做函数直接运行,IIFE的this都是window对象 函数的arguments是类数组对象,比如传入的第0项参数是函数,让它运行:…

JavaScript学习记录二

title: JavaScript学习记录二 toc: true date: 2018-09-13 10:14:53 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅MDN Web 文档 变量.作用域和内存问题 基本类型和引用类型的值 ECMAScript变量可能包含两种不同数据类型的值: 基本类型值:保存在栈内存中的简单数据段,这种值完全保存在内存中的一个位置 引用类型值:保存在堆内存中的对象,保存的实际上是一个指针,指针指向内存中真正对象保存的位置 五种基本数据类型:U…

深入JavaScript对象(Object)与类(class)，详细了解类、原型

JavaScript基于原型的对象机制 JavaScript原型上的哪些事 一.JavaScript基于原型的对象机制 JavaScript对象是基于原型的面向对象机制.在一定程度上js基于原型的对象机制依然维持了类的基本特征:抽象.封装.继承.多态.面向类的设计模式:实例化.继承.多态,这些无法直接对应到JavaScript的对象机制.与强类型语言的类相对应的是JavaScript的原型,所以,只能是基于原型来模拟实现类的设计模式. 为了便于理解,这里采用了Function构造函数及对象原型链…

JavaScript 入门教程二 在HTML中使用 JavaScript

一.使用 <script> 元素的方式有两种:直接在页面中嵌入 JavaScript 代码和引用外部 JavaScript 文件. 二.使用内嵌方式,一般写法为: <script type="text/javascript"> /*  code   */ </script> 三.引用外部 JavaScript 文件的一般写法为: <script type="text/javascript" src=""&…

JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest"> <head> <title>Mobile Cookbook</title> <meta charset="utf-8"> <meta name="viewport" content="wi…

一些有用的javascript实例分析(二)

原文:一些有用的javascript实例分析(二) 5 求出数组中所有数字的和 window.onload = function () { var oBtn = document.getElementsByTagName("button")[0]; var oInput = document.getElementsByTagName("input")[0] var oStrong = document.getElementsByTagName("stron…

JavaScript实现一个复数类

<script type="text/javascript"> /** * 这里定义Complex类,用来描述复数 */ /** * 这个构造函数为它所创建的每个实例定义了实例字段r和i * 这两个字段分别保存复数的实部和虚部 * 他们是对象的状态 */ function Complex(real , imaginary){ if( isNaN( real ) || isNaN( imaginary )) //确保两个实参都是数字 throw new TypeError()…

理解JavaScript继承（二）

理解JavaScript继承(二) 5.寄生式继承 function object(o) { function F() {} F.prototype = o; return new F(); } function createAnother(original){ var clone = object(original);//通过调用函数创建一个新对象 clone.sayHi=function(){//以某种方式增强这个对象 alert("hi"); }; return clone;//…

JavaScript总结（二）

JavaScript的数据类型 ✍ 原始数据类型值: JavaScript有5中原始数据类型,通过调用typeof运算符返回值查看变量类型: ➣ Undefined ➔ 'undefined': Undefined(未定义)类型只有一个值,即undefined.当声明的变量未初始化时,该变量的默认值是undefined. ➣ Boolean ➔ 'boolean': Boolean(布尔)类型是JavaScript中最常用的类型之一.它有两个值true和false: ➣ Number ➔ 'nu…

Effective JavaScript Item 51 在类数组对象上重用数组方法

Array.prototype对象上的标准方法被设计为也能够在其他对象上重用 - 即使不是继承自Array的对象. 因此,在JavaScript中存折一些类数组对象(Array-like Objects). 一个典型的样例是函数的arguments对象,在Item 22中对它进行过介绍.该对象并不继承自Array.prototype,所以我们不能直接调用arguments.forEach来对当中的元素进行遍历.可是,我们能够通过首先得到forEach方法的对象.然后调用call方法(能够參考It…

[转] 用javascript修改css伪类的几种方法

用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/posts/modify-pseudo-elements-css/…

javaScript实现选中文字提示新浪微博分享的效果

<!DOCTYPE html> <html xmlns:wb="http://open.weibo.com/wb"> <head> <meta charset="utf-8"> <title>javaScript实现选中文字提示新浪微博分享的效果</title> <style type="text/css"> #div1{ position: absolute;…

基础JavaScript练习（二）总结

任务目的 学习与实践JavaScript的基本语法.语言特性 练习使用JavaScript实现简单的排序算法 任务描述 基于上一任务 限制输入的数字在10-100 队列元素数量最多限制为60个,当超过60个时,添加元素时alert出提示 队列展现方式变化如图,直接用高度表示数字大小 实现一个简单的排序功能,如冒泡排序(不限制具体算法),用可视化的方法表达出来,参考见下方参考资料 任务注意事项 实现简单功能的同时,请仔细学习JavaScript基本语法.事件.DOM相关的知识 请注意代码风格的整齐…

零基础JavaScript编码（二）

任务目的 在上一任务基础上继续JavaScript的体验 学习JavaScript中的if判断语法,for循环语法 学习JavaScript中的数组对象 学习如何读取.处理数据,并动态创建.修改DOM中的内容 任务描述 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示在网页上 <!DOCTYPE html> <html> <head> <meta charset=&…

javascript实例学习之三——类新浪微博的登录框

该登录框和百度的搜索框类似,可以实现如下效果: 1.文字输入时自动弹出提示层 2,提示层根据输入文字进行自动过滤 3,提示层可以使用上下按键进行选择 4,提示层可以点击或者回车来确认输入 微博登录框html代码 <!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>微博登录框效果</title> <…

研磨JavaScript系列（二）：没有类

object就是对象的类型.在JavaScript中不管多么复杂的数据和代码.都可以组织成object形式的对象. 但JavaScript没有"类"概念. 看下面这段JavaScript代码: <script type="text/javascript"> var life = {}; //光溜溜的生命对象 for(life.age = 1; life.age <= 3; life.age++){ switch(life.age){ case 1:…

JavaScript学习笔记(二)——闭包、IIFE、apply、函数与对象

一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div,for循环绑定事件. 示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>闭包</title> <style type="…

JavaScript学习总结(二)——闭包、IIFE、apply、函数与对象

一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div,for循环绑定事件. 示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>闭包</title> <style type="…

JavaScript 框架设计(二)

JavaScript 高级框架设计 (二) 上一篇,JavaScript高级框架设计(一)我们 实现了对tag标签的选择 下来我们实现对id的选择,即id选择器. 我们将上一篇的get命名为getTag(),然后再编写一个getId(),和getClass() 然后在总的get方法中调用,这样做的好处就是模块化,便于维护. 我所有的代码都会托管到github上. 01.js var getId = function (id, result) { result = result || []; //…

Css、javascript、dom(二)

一.css常用标签及页面布局 1.常用标签 position(定位) z-index(定位多层顺序) background(背景) margin(外边距) padding(内边距) font-size(字体大小) over-flow(修剪hidden,srcoll,auto) :hover(设置对象在鼠标悬停时的样式) opacity(页面透明度) float(让标签浮动起来) clear:both(让浮动标签沉下来) text-align(针对字符自动左右居中) line-height(上下居…

Javascript使用function创建类的两种方法

1.使用function类 //myFunction.js var CMyFunc=function() { //类的公共方法,供外部调用 this.Func1=function() { var i=0; return i; } this.Func2=function() { _privateFunc(); } //类中的私有方法,供公共方法调用 function _privateFunc() { return 0; ] } CMyFunc myFunc=new CMyFunc(); 使用:其它…

JavaScript基础（二）

一.外部引用语法<script src="script.js"></script> 二.在页面中的位置 1.我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 2.放在<head>部分 最常用的方式是在页面中head部分放置<script>元素,浏览器解析head部分就会执行这个代码,然后才解析页面的其余部分. 3.放在<body>部分 JavaScript代码在网页…

JavaScript基础学习(二)—JavaScript基本概念

一.语法 1.区分大小写     JavaScript是一种弱类型的脚本语言.它区分大小写,变量名test与Test表示两个完全不同的变量.   2.标识符      所谓标识符就是变量.函数.属性的名字,它有以下规则.      (1)第一个字符必须是一个字母.下划线.或$.      (2)其他字符可以是字母.数字.下划线.$.      按照惯例,我们都采用驼峰大小写格式,也就第一个字母小写,其他字母大写.   3.注释     JavaScript包括单行注释和多行注释. <script…

记录下项目中常用到的JavaScript/JQuery代码二（大量实例）

记录下项目中常用到的JavaScript/JQuery代码一(大量实例) 1.input输入框监听变化 <input type="text" style="width: 154px" class="text ml5" id="stockSearch"/> $('#stockSearch').bind('input oninput', function () { //onpropertychange var stoc…

javascript学习笔记二

1.js的string对象 **创建 String对象 *** var str = "abc"; **方法 和 属性(文档) *** 属性 length : 字符串的长度 ***方法 (1)与html相关的方法 -- bold() : 加粗 -- fontcolor() :设置字符串的颜色 -- fontsize() :设置字体的大小 -- link() : 将字符串显示成超链接. --- str.link("Hello.html"); -- sup() sub()…

JavaScript面向对象之创建类和方法

一,js使用函数来定义类而不是像别的编程语言一样通过关键字class来定义,通过类本身(this)和原型(prototype)来完成面对对象编程! 示例1, //创建ElectronicSignature类 function ElectronicSignature () { //添加operatingSignature (操作签名)方法 this.operatingSignature = function () { console.log('ElectronicSignature类的operat…