js每天进步一点点4】的更多相关文章

JS之样式的改变…
JS之图片的切换效果…
本人菜鸟一枚,进入公司不久,任务不多,期待从零开始学习js,请各位大牛指导!! <!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…
输入数字的验证…
C#和JS互操作的基本语法是比较简单的,但小知识点特别多,同时,受应用加载顺序.组件生命周期以及参数类型的影响,会有比较多坑,需要耐心的学习.在C#中调用JS的场景会比较多,特别是在WASM模式下,由于WebAssembly的限制,很多时候,还是需要借助JS去控制DOM或BOM,比如WebStorage.WebGL.MediaCapture,还比如使用JS的图表库echart.js.反过来,在JS中调用C#的场景,就比较少见.所以,此章节关于"C#中调用JS" 的篇幅会多一些. 这个章…
几年前,我们这样写前端代码: <div id="el" style="......" onclick="......">测试</div> 慢慢的,我们发现这样做的很多弊端,单就样式一块,改一个样式会涉及到多处调整,所以慢慢的dom标签中的css全部去了一个独立的css文件 再后来,交互变得异常复杂,onclick也不好使了,所以js也分离开了,经典的html+css+javascript结构分离逐步清晰,三种代码各司其职…
第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nodejs.org/en/ 或者 http://nodejs.cn/ 第二步 node环境检测 1.2.1 在终端输入 node -v如果输出版本号,说明我们安装node 环境成功随便我们可以查看 npm 的 版本号,安装node之后是自带npm的可以使用 npm -v 第三步 vue-cli脚手架安装…
好,接下来一起分析分析配置文件^o^. build.js作用:命令npm run build的入口配置文件,主要用于生产环境. build.js中具体含义标注(vue-cli脚手架官方文件解释,大家可自行定制这里面的内容): check-version.js,文件有点点长这里直接贴代码: 'use strict' //js严格运行模式 const chalk = require('chalk') //导入chalk模块,const声明一个常量 const semver = require('se…
MVC模式(三层架构模式)(Model-View-Controller)是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制器(Controller)上面那段话摘自wikipedia,是对MVC开发模式的定义,现在来谈谈怎么以MVC的架构模式开发WEB网站吧吧. 一. 模型(Model)包括程序和业务规则.model 用来固化数据.封装与业务逻辑相关的数据and对数据的处理方法.模型它不关心业务是怎么实现的,它只关心数据是如何存储的.比如说,脚本…
菜鸟教程的javascript闭包章节中,演示了js计数器的实现.    教程地址 http://www.runoob.com/js/js-function-closures.html 代码1 var add = (function(){ var counter = 0; return function(){ return counter += 1;} })(); add(); add(); add(); 大概感觉会输出 1 2 3,但是第一次看的时候看得马马虎虎. 代码中用了匿名函数 闭包 自…
又是这两天在项目中遇到的,或许很简单,但真实第一次遇到,记录一下. 在页面上用JS获取了一下当前的日期,并用getYear()方法返回了当前的年度,2013也没问题,代码在IE中都测试通过了之后就提交了.然后同事很快就告诉我年度显示的不对,显示的是113.我很诧异,试了一下还是没问题,然后就去同事那里扫了一眼,发现他用的是chrome,我马上意识到是浏览器兼容的问题了. google了一下,问题简单明了. getYear函数语法 date.getYear(); getYear函数返回值 返回da…
1   js中的变量和输入输出 {使用js的三种方式} 1 在html标签中直接内嵌js(并不提倡使用): <button onclick="alert('小婊砸你真点啊!')">有本事点我啊</button> >>>不符合W3C内容与行为分离的要求 2 在html页面中使用<script></script>包裹js代码: <script type="text/javascript">js…
官网上面 https://github.com/overtrue/share.js非常详细的介绍了share.js他的使用 使用方式有:第一:使用 npm npm install social-share.js 第二:可以在github下载demo查看 第三:直接使用源:https://cdnjs.com/libraries/social-share.js 在页面链接所需要的js,css. 一般ui会重新切图,使用背景图片. Facebook Twitter Wechat 有背景图片的话就不需要…
如图所示很多比较大的站点都有这样的一个小玩意 就是本文有多少字 阅读需要多少时间. 一段小小的js就可以实现,当然了php也可以功能太小了不值得做钩子或者插件自己需要的话再模板加一下吧. <script type="text/javascript"> $(document).ready(function() { var read_time = $("#content").text().length; var read_zishu = $("#c…
1 当函数作为对象的方法被调用的时候 this就指向该对象 var o = { prop: 37, f: function() { return this.prop; } }; console.log(o.f()); // logs 37 上面的例子中,当 o.f() 被调用时,函数内的this将绑定到o对象. 在何处或者如何定义调用函数完全不会影响到this的行为.在上一个例子中,我们在定义o的时候为其成员f定义了一个匿名函数.但是,我们也可以首先定义函数然后再将其附属到o.f.这样做this…
效果图: 代码如下: </head> <style> body{ background-color:#000; } .textArea{ font-size:100px; color:#fff; text-shadow:0 0 5px #e0ea33, 0 0 15px #e0ea33, 0 0 25px #e0ea33; margin-top:200px; text-align:center; } </style> <body> <p class=&…
alert(/[abc]/.test("c")); //true alert("a bat ,a Cat,a fAt bat ,a faT cat".match(/[bcf]at/gi)); //bat,Cat,fAt,bat,faT,cat reg.test(str) str.match(reg)…
1.字符串的比较 字符串也是可以比较的,字符串比较的asc码顺序:asc有128位,由7位二进制数表示,每个数对应的是一个字符.ASC码有ASC码1,由7位二进制1数表示:ASC2码又8位二进制数表示. var a="10">"8": 此时比较的是字符串10和字符串8,先拿1和8比,1的ASC码对应的数字49小于8的ASC码对应的数字56,再拿0和8比,0所对应的48同样比56小,故a的值为false. 2.var a=NaN==NaN: 此时,a为false: var b=undefined=…
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量…
第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Windows程序员的事实). 操作系统 API.操作系统发展到今日,几乎桌面应用的所有功能,都是基于系统API构建的.调用API和语言及技术无关,哪怕是使用汇编.例如(代码来源于网络,本地重新编译): ;我的第一个win32汇编程序 ;一个经典的hello world !程序 ;>>>>&…
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的js初学者感受到学习的乐趣.我会尽可能讲得详细,不需要你对css和js有多么高深的理解,你也可以跟着一步步做出来.如果你是为了讨女票开心,那么也完全可以把图片换成对方的照片,在某个特别的时刻给对方一个惊喜哦 ~ css3的强大使得网页的展示变得空前得丰富起来,再配合简单的js代码,就可以实现这个效果.…
今天终于有空把demo放到了RunJS上面去.请使用google chrome观看在线演示: http://sandbox.runjs.cn/show/pekbd9zb 这个库本来是我们开发的phonegap框架中的一部分,后来有人想单独引用这个库,因此今天我就把它从phonegap框架中提出来了,成为一个独立的操作HTML5 SQLite的javascript库. 英文文档以及live demo的源代码都放到了github上面: https://github.com/leotsai/html5…
2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点就是感觉没必要,还有一点就是难控制.为什么这么说呢?作为刚入门的人来说,第一写的代码就少,平时也不会感觉到代码有什么问题,等开发多了,虽然感觉到问题了,但是你还是很难去按照面向对象的思维去写,因为按照面向对象去思维写需要你把握全局观,更是面向未来编程,把握不好,越写越乱.所以很多新手一直都还是按照面…
前段时间做项目,需要动态生成一个二维码,于是就在网上找了一下发现一个jquery插件jquery.qrcode.js,所以今天就简单说一下这个插件的使用: jquery.qrcode.js是依赖jquery的,所以要先引入jquery再引入jquery.qrcode.js <script type='text/javascript' src='js/jquery.min.js'></script> <script type="text/javascript"…
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完后我就觉得很不对劲,虽然JS代码也很简单,但是这么小的一件事还得拿JS搞这么多乱七八糟的? 然后去网上看到张鑫旭大神的一篇关于利用CSS实现loading状态时三个点的动态效果的文章,在评论区看到一位朋友的评论:利用text-shadow也可以实现打点效果,突然对这个很感兴趣,自己做来试试. 1.首…
一.对于一个刚入门node.js的朋友来说,一定要了解一些基础概念: 今年我正式进入社会后,发现自己所知道的IT方面的知识,真的只是牛毛,原来人外有人,山外有山,还需要继续努力.下面是一些我的自学习心得,发出来和大家一起分享: web的开发原理:         1.C/S模式(客户端/服务器)比如:QQ.微信等要先下载客户端的软件都可以称为c/s模式,它是有专门的客户端程序.         2.B/S模式(浏览器/服务器)比如:网页游戏.它的优点是:不需要下载客户端应用.缺点是:浏览器本身,…
1.1 复习 offset   自己的 偏移 offsetWidth    得到自己的宽度 offsetHeight 构成 :   width  +   padding  +  border div    width 200   border 3px    padding-right: 15px div  offsetWidth =    200 +  6  +  15  =  221 2.  offsetLeft      offsetTop div.offsetLeft 得到距离 这个 di…
怎样用React JS构建一个用户界面?本文将快速地给你一个React JS的概览.代码,请君移步react-starter 概念 React只有很少的API,这使得它很容易去学习与理解.当然,使用它也是相当有意思的.但是,简约却并不简单.在我们开始之前,有一些概念是需要去理解的. React元素(React elements) React元素是用于呈现HTML结构的JavaScript对象.它们不会存在于浏览器中,只是用于描述浏览器中的元素,比如h1, div 或者 section等等. 模块…
浅解析js中的对象 原文网址:http://www.cnblogs.com/foodoir/p/5971686.html,转载请注明出处. 前面的话: 说到对象,我首先想到的是每到过年过节见长辈的时候长辈们老是开玩笑的问我"你找了对象没?".不说大家都知道,这里的"对象"指的是"女朋友",但是今天我想要说的js中的"对象"和我们生活中谈到的"对象"不是同一回事,但是其中也有着很多相似之处. 在讲js中的对象…
引子 编程世界里只存在两种基本元素,一个是数据,一个是代码.编程世界就是在数据和代码千丝万缕的纠缠中呈现出无限的生机和活力. 数据天生就是文静的,总想保持自己固有的本色:而代码却天生活泼,总想改变这个世界.    你看,数据代码间的关系与物质能量间的关系有着惊人的相似.数据也是有惯性的,如果没有代码来施加外力,她总保持自己原来的状态.而代码就象能量,他存在 的唯一目的,就是要努力改变数据原来的状态.在代码改变数据的同时,也会因为数据的抗拒而反过来影响或改变代码原有的趋势.甚至在某些情况下,数据可…