随笔分类 - js
摘要:从一个简单的需求开始现从前台抽离一个model名为Person,其有基本属性name和age,默认每个人都会说话,因此将说话的功能say放在了原型对象上,以供每个实例享用。现在对于Man来说,它需要继承Person的基本属性,并且在此基础上添加自己特有的属性。 1.原型链的继承 这种继承方式很直接,
阅读全文
摘要:实现思路: 1.通过表单,可以添加数据到表格中显示2.id自动根据已有的最大id值进行累加,删除一条记录的时候,最大id值不会变化(id的值不是根据表格中编号的最大值去计算)3.隔行变色,新增加的行应该也需要隔行变色的4.鼠标移入高亮5.全选/全不选(checkAll和下面的每一个checkbox是
阅读全文
摘要:学习JS,活跃思维,灵活运用的一个较为典型的学习案例。同一个瀑布流的效果但实现方式却很多,利用递归、冒泡等等手法都可以达到你想要的目的。这次要说的就是利用类似递归来实现此效果的原创方案。此方案个人认为难度系数较低 效果展示:
阅读全文
摘要:图片裁剪程序效果如下,可鼠标操作。 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示。8个控制点可以对显示区域大小进行控制。 HTML 和 CSS 部分 左侧的裁剪操作区域可以分为三层。 最底层的图片半透明效果;中间层的图片只显示制定区域,其他部分
阅读全文
摘要:组件开发 : 多组对象,像兄弟之间的关系( 代码复用的一种形式 )
阅读全文
摘要:需要注意的问题包括: 1.this的指向到底是指向谁--弄清楚所指的对象 2.深入理解原型的概念及使用: 去改写对象下面公用的方法或者属性 , 让公用的方法或者属性在内存中存在一份 ( 提高性能)
阅读全文
摘要:常见排序算法(JS版)包括: 内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归 & 堆栈),归并排序,堆排序,以及分析每种排序算法的执行时间。 index.html main.js main.js 排序效果:
阅读全文
摘要:效果: ps:有什么好的想法和思路可以共同交流成长。群号前端开发学习交流群 486867012
阅读全文
摘要:添加className 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 #div1 { 8 width: 100px; 9 height
阅读全文
摘要:1 //JS扩展方法与C#的扩展方法非常相似,也是可以链式调用的,也是通过对某个类的扩展写法来实现。这个东西非常好用,如果将预先写好的方法放到一个js里面引用的话,那么后面写js将非常有趣。 2 3 //下面给出一个例子: 4 5 6 // 7 // 测试JS扩展方法 8 // 23 // 24 25 // 好像只是告诉自己有...
阅读全文
摘要:扩展原生js的Array类 原生js的String类扩展
阅读全文
摘要://斐波那契数列:(i最好不要超过40,要不然浏览器也可能hold不住) function f(i){return i<3?1:f(i-1)+f(i-2);} //求n! 即,1×2×3×4×5×······×n function n(i){return i<2?1:i*n(i-1);} //求1+
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>抽奖游戏</title> <style type="text/css"> #box{ margin: 100px auto 0; width: 366px; hei
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>随机翻转</title> <style type="text/css"> body{ background-color: #ccc; } ul{ margin: 2
阅读全文
摘要:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文字搬运工</title> <style type="text/css"> #box{ width: 750px; border: 5px solid #fff;
阅读全文
摘要:page.html <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js分页</title> <style type="text/css"> body{ text-align: center; margin: 0
阅读全文