js
七彩皮皮丽
这个作者很懒,什么都没留下…
展开
-
运算符、流程控制
html部分<body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li>原创 2017-06-16 11:05:15 · 237 阅读 · 0 评论 -
字符串查找—练习一
html部分<body> <p><span>妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法!<br />2013年底,妙味课堂最新推出“远程培训”服务,受到很多朋友们的喜爱与追捧,我们必将更加努力的帮助远程学习的朋友实现技术提升</span>……<a href="javascript:;">>>收缩</a></p></body>原创 2017-06-22 09:14:18 · 225 阅读 · 0 评论 -
数组—添加删除方法
添加方法<script> var arr = [ 1,2,3 ]; arr.push( 'abc' ); //数组末尾添加 alert( arr ); //1,2,3,abc alert( arr.push( 'abc' ) ); alert( arr ); // 4 alert( arr.unshift( 0 ) );原创 2017-06-22 10:39:20 · 441 阅读 · 0 评论 -
js—新的选择器、获取class列表属性、 JSON新方法
<script>//新的选择器 querySelector、querySelectorAllwindow.onload = function(){ //var oDiv = document.querySelector('[title=hello]'); var oDiv = document.querySelector('.box'); //querySelector不支持IE6、7原创 2017-07-11 15:15:14 · 1003 阅读 · 0 评论 -
数组splice方法—去重
<script>var arr = [ 'TM', '钟毅', '张森', '杜鹏', 'Leo' ];// 删除、替换、添加arr.splice( 0 , 0, 'aaaaaa'); // 第一个参数: 规定从何处添加/删除元素; 第二个参数:规定应该删除多少元素。arr.splice( 0, 2, '莫涛 or 钟毅' ); //替换 ['莫涛 or 钟毅','张森', '杜鹏'原创 2017-06-23 14:40:54 · 1997 阅读 · 0 评论 -
sort-排序
<script> var arr = [1,10,2,73,8]; arr.sort(function(a,b){ return a-b; //如果return b-a; 就是从大到小 }); alert(arr); var arrWidth = [ '345px', '23px',原创 2017-06-23 15:18:13 · 174 阅读 · 0 评论 -
原生js QQ列表展示小练习
html部分css部分js部分var list = document.getElementById("list");var ah2 = list.getElementsByTagName("h2");var aul = list.getElementsByTagName("ul");for(var i=0; i<ah2.length; i++){ ah2[i].index = i; //原创 2017-06-12 14:37:27 · 441 阅读 · 0 评论 -
数据类型转换——QQ号码验证
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><script> window.onload = function(){ var aInp = document.getElementsBy原创 2017-06-14 09:00:58 · 378 阅读 · 0 评论 -
concat、reverse方法、随机排序、随机函数
reverse()方法<script> var arr1 = [ 1,2,3,4,5,6 ]; arr1.reverse(); //6,5,4,3,2,1 reverse()颠倒数组中元素的顺序: alert( arr1 ); var str = 'abcdef'; alert(str.split('').reverse().join(''));原创 2017-06-23 16:24:33 · 335 阅读 · 0 评论 -
函数传参—价格计算
HTML片段<body><ul id="list"> <li> <input type="button" value="-" /> <strong>0</strong> <input type="button" value="+" /> 单价:<em>12.5元</em> 小计:<span>0元</span> </li> <li> <inp原创 2017-06-14 16:43:44 · 359 阅读 · 0 评论 -
js日期时间联系
<div class="warp"> <img src="1.png"> <img src="1.png"> <span>:</span> <img src="0.png"> <img src="9.png"> <span>:</span> <img src="1.png"> <img src="2.png"></div><script>原创 2018-01-02 11:33:22 · 190 阅读 · 0 评论 -
switch判断练习
<div class="warp"> <input type="text"> <select> <option value="0">性别</option> <option value="1">男</option> <option value="2">女</option> </select> <input type="button" v原创 2017-12-28 17:09:09 · 389 阅读 · 0 评论 -
js 无缝滚动
<style> *{padding:0; margin: 0; list-style: none;} .warp{margin: 100px 0; height: 300px; padding: 50px;} .div2 .div3{width: 550px; height: 100px; position: relative;overflow: hidden;transit原创 2018-01-04 16:40:21 · 217 阅读 · 0 评论 -
字符串查找
js<script>alert( 'miaov'.charAt(2) ); //aalert( 'miaov'.charCodeAt(2) ); //97alert( String.fromCharCode(22937, 21619) ); //妙味var str = 'www.miaov.com/2013ww';alert( str.indexOf('m') );原创 2017-06-21 12:00:04 · 191 阅读 · 0 评论 -
for循环—V字形、逢10换行、遍历2维数组、嵌套元素、点击生成一组新闻
for循环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" conten原创 2017-06-08 14:54:32 · 1266 阅读 · 0 评论 -
自定义属性、索引值
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">原创 2017-06-09 16:50:01 · 283 阅读 · 0 评论 -
js中的作用域
<script>var a = 1;function fn1(){ alert(a); // undefined var a = 2;}fn1();alert(a); // 1var a = 1;function fn1(){ alert(a);原创 2017-06-15 17:24:40 · 373 阅读 · 0 评论 -
setInterval、定时器管理、背景选择实例
html部分<input type="button" value="换背景吧" /><input type="button" value="停" />js部分<script> var btn = document.getElementsByTagName("input"); var imgsrc = ["img/1.jpg","img/2.jpg","img/3.j原创 2017-06-19 15:55:39 · 243 阅读 · 0 评论 -
定时器——自动弹出广告
html部分<body> <img id="miaov" src="img/miaov.jpg" /></body>css部分<style> body { background:url(img/sina.jpg) no-repeat center 0; text-align:center; } img { display:none;}</style>js部分<scri原创 2017-06-20 09:17:00 · 393 阅读 · 0 评论 -
js图片轮播2
html部分css部分js部分效果图原创 2017-06-12 11:29:45 · 308 阅读 · 0 评论 -
js模拟短信发送
DOCTYPE html>html> head> meta charset="UTF-8"> link rel="stylesheet" href="css/index.css"> link rel="stylesheet" href="css/reset.css"> title>title>原创 2017-06-08 15:10:11 · 293 阅读 · 0 评论 -
js图片切换
DOCTYPE html>html> head> meta charset="UTF-8"> title>title> link rel="stylesheet" href="css/index.css"> link rel="stylesheet" href="css/reset.css"> head原创 2017-06-08 15:11:51 · 252 阅读 · 0 评论 -
定时器——setTimeout
html部分<body> <div id="qq"></div> <div id="title"></div></body>css部分<style> #qq { width:200px; height:400px; background:#F9C; } #title { width:240px; height:180px; background:#FC6; posi原创 2017-06-20 13:47:13 · 235 阅读 · 0 评论 -
js—BOM焦点事件
js<script>window.onload = function() { var oText = document.getElementById('text1'); //onfocus : 当元素获取到焦点的时候触发 oText.onfocus = function() { if ( this.value == '请输入内容' ) {原创 2017-06-29 17:05:15 · 299 阅读 · 0 评论 -
阻止冒泡——小练习
html部分<div class="yi"> <div class="er"> <p>1</p> <ul> <li>2</li> <li>3</li> <li>4</li> <li>5</li>原创 2017-06-30 09:10:36 · 196 阅读 · 0 评论 -
Event—跟随鼠标移动的div实例阻止冒泡
html部分<body style="height: 2000px;"> <div id="div1"></div></body>js部分<script>window.onload = function() { //event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的调用。原创 2017-06-29 17:20:15 · 748 阅读 · 0 评论 -
改变文字大小
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">原创 2017-06-08 15:13:11 · 392 阅读 · 0 评论 -
js获取非行间样式
<style> .warp div{width: 400px; height: 200px; background: yellow; margin-bottom: 30px; padding: 20px;}</style><div class="warp"> <div class="con"></div> <input type="button" value="获取行间样式原创 2017-12-29 15:22:34 · 177 阅读 · 0 评论