递归函数-斐波那契数列

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> <script> //斐波那契数列 1 1 2 3 5 8 13 function fn(n){ if(n == 1 || n== 2){ return 1; } return fn(n - 1) + fn(n - 2); } console.log(fn(6)); </script> </html>

原型继承

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> </body> <script> function Person(name, age){ this.name = name; this.age = age; } Person.prototype.say = function(){ console.log('你好,我是' + this.name); } function Student(name,age){ Person.call(this, name, age...

商品放大镜

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!--<link rel="stylesheet" href="css/index.css">--> <style> img { display: block; } * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin: 100px; border: 1px solid #ccc; position: relative; } .big { width: 400px; height: 400px; ...

函数封装–简单左右移动动画

//封装 按钮事件处理函数中的代码(让一个元素,从左往右,或者从右往左缓慢移动) /* * 作用: 让一个元素,从左往右,或者从右往左缓慢移动 * element: 要求传入一个元素 元素 * target : 元素移动的目标位置 数字 * step: 步进(每次元素移动的距离) * callback : 回调函数 到达目标位置之后,会被调用 * */ function animate(element, target, step, callback){ // 清除定时器 if(element.timeid){ clearInterval(element.timeid); } // 1. 设...

事件委托-加载显示更多

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } div { border: 1px solid blue; } ul { padding: 20px; } li { list-style: none; margin-top: 10px; background-col...

js中动态创建列表

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn"> 点击按钮,假装去服务器拿数据</button> <div id="container"> </div> <script> var arr = ['html', 'css', 'es5.0js', 'dom']; var btn = document.getElementById('btn'); var container = document.getElementById('container'); btn.onclick = function(){ //创建ul li var str = '<ul>'; for(i = 0; i <...

随机选择

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <select id="sel"> <option>请随机选择</option> <option>食堂</option> <option id="op">吃翔</option> <option >泡面</option> <option >外卖</option> <option>哼,不吃了</op...

tab栏切换

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .box { width: 400px; height: 300px; border: 1px solid #ccc; margin: 100px auto; overflow: hidden; } .hd { height: 45px; } .hd span { display: inline-block; width...