Skip to content

Commit 5bbbd73

Browse files
dunizbdunizb
committed
属性与样式操作
1 parent b310dcb commit 5bbbd73

18 files changed

Lines changed: 1562 additions & 118 deletions

‎.idea/workspace.xml‎

Lines changed: 68 additions & 115 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎JavaScript/字符串操作/字符串倒序排列.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>字符串倒序排列</title>
6+
<meta name="Generator" content="Sublime Text3">
7+
<meta name="Author" content="dunizb">
8+
<meta name="website" content="http://www.mybry.com">
9+
<meta name="Description" content="读你，这世间唯有梦想和好姑娘不可辜负~~">
10+
<link type="image/x-icon" rel="shortcut icon" href="image/favicon.ico" />
11+
<script type="text/javascript">
12+
13+
// 方法1：元素for循环
14+
var num = 12345;
15+
16+
console.log("方法1：元素for循环");
17+
console.log(rev(num));
18+
19+
function rev(conetnt) {
20+
var str = conetnt+"";
21+
var newStr = "";
22+
for (var i=str.length-1; i>=0; i--){
23+
newStr += str[i];
24+
}
25+
return newStr;
26+
}
27+
28+
//方法2：利用数组的反转方法
29+
function rev2(){
30+
var str = num+"";
31+
return str.split("").reverse().join("");
32+
}
33+
console.log("方法2：利用数组的反转方法");
34+
console.log(rev2(num));
35+
36+
</script>
37+
<body>
38+
这是html内容
39+
</body>
40+
</html>

‎JavaScript/字符串操作/将数字转换成RMB的形式.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>将数字转换成RMB的形式</title>
6+
</head>
7+
<body>
8+
</body>
9+
<script type="text/javascript">
10+
//思路：先将数字转为字符， str= str + '' ;
11+
//利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！
12+
var num = 12345678;
13+
14+
function convertRmb( num ){
15+
var str = rev(num + "");
16+
var temp = "";
17+
for(var i=1; i<=str.length; i++){
18+
temp += str[ i - 1 ];
19+
if(i % 3 == 0 && i != str.length){
20+
temp += ",";
21+
}
22+
}
23+
return rev(temp);
24+
}
25+
26+
function rev( str ){
27+
return str.split("").reverse().join("");
28+
}
29+
30+
console.log(convertRmb(num));
31+
</script>
32+
</html>

‎JavaScript/字符串操作/循环方式替换空白字符.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>循环方式替换空白字符|Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</title>
6+
<meta name="Keyword" content="代码演示,代码片段,HTML5,CSS3,JavaScript,jQuery,Bootstrap">
7+
<meta name="Author" content="dunizb">
8+
<meta name="website" content="http://www.mybry.com">
9+
<meta name="Description" content="Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!">
10+
<link type="image/x-icon" rel="shortcut icon" href="../image/favicon.ico"/>
11+
</head>
12+
<body>
13+
14+
<script type="text/javascript">
15+
16+
// 循环方式替换空白字符
17+
var str = " abc xyz m n ";
18+
var res = "";
19+
for(var i=0; i<str.length; i++){
20+
var c = str.charAt(i);
21+
res += c.trim();
22+
}
23+
console.log(res);
24+
25+
26+
27+
</script>
28+
</body>
29+
</html>

‎JavaScript/字符串操作/查找出现次数最多的字符及出现的次数.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>查找出现次数最多的字符及出现的次数|Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</title>
6+
<meta name="Keyword" content="代码演示,代码片段,HTML5,CSS3,JavaScript,jQuery,Bootstrap">
7+
<meta name="Author" content="dunizb">
8+
<meta name="website" content="http://www.mybry.com">
9+
<meta name="Description" content="Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!">
10+
<link type="image/x-icon" rel="shortcut icon" href="../image/favicon.ico"/>
11+
</head>
12+
<body>
13+
14+
<script type="text/javascript">
15+
16+
// 查找出现次数最多的字符及出现的次数
17+
var str = "abcoefoxyozzopp";
18+
19+
var o = {};
20+
for(var i=0; i<str.length; i++){
21+
var c = str.charAt(i);
22+
if(o[c]){
23+
o[c]++;
24+
}else{
25+
o[c] = 1;
26+
}
27+
}
28+
29+
//假设一个最大值
30+
var maxChar; //出现最多的字符
31+
var maxCount = 0; //出现的次数
32+
for(var key in o){
33+
if(maxCount < o[key]){
34+
maxCount = o[key];
35+
maxChar = key;
36+
}
37+
}
38+
console.log("出现次数最多的字符 ："+maxChar+"，出现了" + maxCount + "次");
39+
40+
</script>
41+
</body>
42+
</html>

‎JavaScript/数组操作/Array.html‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>Array|Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</title>
6+
<meta name="Keyword" content="代码演示,代码片段,HTML5,CSS3,JavaScript,jQuery,Bootstrap">
7+
<meta name="Author" content="dunizb">
8+
<meta name="website" content="http://www.mybry.com">
9+
<meta name="Description" content="Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!">
10+
<link type="image/x-icon" rel="shortcut icon" href="../image/favicon.ico"/>
11+
</head>
12+
<body>
13+
14+
<script type="text/javascript">
15+
// 工资的数组[1500,1200,2000,2100,1800],把工资超过2000的删除
16+
// var arr = [1500,1200,2000,2100,1800];
17+
// arr = arr.filter(function(item,index){
18+
// if(item < 2000){
19+
// return true;
20+
// }
21+
// return false;
22+
// });
23+
// console.log(arr);
24+
25+
// ["c","a","z","a","x","a"]找到数组中每一个a出现的位置
26+
// var arr2 = ["c","a","z","a","x","a"];
27+
// arr2.forEach(function(item,index){
28+
// if(item === "a"){
29+
// console.log(index);
30+
// }
31+
// });
32+
33+
// var index = -1;
34+
// do{
35+
// index = arr2.indexOf("a",index + 1);
36+
// if(index !== -1){
37+
// console.log(index);
38+
// }
39+
// }while(index !== -1);
40+
41+
// 编写一个方法去掉数组中的重复元素
42+
var arr3 = ["c","a","z","a","x","a"];
43+
function unique(array){
44+
var res = array.filter(function(item,index){
45+
return array.indexOf(item) === index;
46+
});
47+
return res;
48+
}
49+
console.log(unique(arr3));
50+
51+
</script>
52+
</body>
53+
</html>

‎JavaScript/数组操作/冒泡排序（终极优化）.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>冒泡排序（终极优化）</title>
6+
<meta name="Generator" content="Sublime Text3">
7+
<meta name="Author" content="dunizb">
8+
<meta name="website" content="http://www.mybry.com">
9+
<meta name="Description" content="读你，这世间唯有梦想和好姑娘不可辜负~~">
10+
<link type="image/x-icon" rel="shortcut icon" href="../image/favicon.ico" />
11+
<script type="text/javascript">
12+
var arr = [6,5,4,3,2,1];
13+
document.write("原始数组："+arr);
14+
var m = 0; //轮数
15+
var n = 0; //次数
16+
for(var i=0; i<arr.length-1; i++){
17+
var flag = true;
18+
for(var j=0; j<arr.length-1-i; j++){
19+
if(arr[j] > arr[j+1]){
20+
var temp = arr[j];
21+
arr[j] = arr[j+1];
22+
arr[j+1] = temp;
23+
flag = false;
24+
}
25+
n++;
26+
}
27+
m++;
28+
if(flag){
29+
break;
30+
}
31+
}
32+
document.write("<br/>排序后的数组："+arr);
33+
document.write("<br/>轮数："+m);
34+
document.write("<br/>次数："+n);
35+
</script>
36+
<body>
37+
38+
</body>
39+
</html>

‎JavaScript/数组操作/数组分隔.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title></title>
6+
<style>
7+
#box {
8+
position: absolute;
9+
width: 100px;
10+
height: 100px;;
11+
background-color: red;
12+
left: 0;
13+
top:0;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<input type="button" value="点击" id="btn" />
19+
<div id="box"></div>
20+
21+
<script type="text/javascript">
22+
var arr = ["关羽","张飞","赵云","马超","黄忠"];
23+
var str = arr[0];
24+
var separator = "|"; //分隔符
25+
for(var i=1;i<arr.length;i++){
26+
str += "|" + arr[i];
27+
}
28+
console.log(str);
29+
</script>
30+
</body>
31+
</html>

‎JavaScript/数组操作/数组去重.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>数组去重|Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</title>
6+
<meta name="Keyword" content="代码演示,代码片段,HTML5,CSS3,JavaScript,jQuery,Bootstrap">
7+
<meta name="Author" content="dunizb">
8+
<meta name="website" content="http://www.mybry.com">
9+
<meta name="Description" content="Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!">
10+
<link type="image/x-icon" rel="shortcut icon" href="../image/favicon.ico"/>
11+
</head>
12+
<body>
13+
14+
<h1>数组去重</h1>
15+
<script type="text/javascript">
16+
var arr = ["c","a","z","a","x","a"];
17+
/***********************
18+
* 1.对象轮询法
19+
* 定义一个对象o 保存结果，遍历需要去重的数组，如果该元素已经存在在 o 中了则+1，否则=1，
20+
* 最后得到的o对象：{c: 1, a: 3, z: 1, x: 1}，就是已经去重的数组的数据了，
21+
* 进一步，这个方法顺便还得到了重复次数最多的数据
22+
* ********************/
23+
function unique(array){
24+
var o = {};
25+
for(var i=0; i<array.length; i++){
26+
var item = array[i];
27+
//判断字典中是否已经存在该值
28+
//如果不存在 = 1
29+
//如果存在 + 1
30+
if(o[item]){
31+
o[item]++;
32+
}else{
33+
o[item] = 1;
34+
}
35+
}
36+
// 删掉原来的数组
37+
array = null;
38+
// 去重后的新数组
39+
var newArray = [];
40+
for(var key in o) {
41+
newArray.push(key);
42+
}
43+
return newArray;
44+
}
45+
//console.log(unique(arr));
46+
47+
/***********************
48+
* 2.数组轮询法
49+
* 定义一个变量数组 res 保存结果，遍历需要去重的数组，如果该元素已经存在在 res 中了，则说明是重复的元素，
50+
* 如果没有，则放入 res 中。本质上跟方法一一样
51+
* 如果不考虑浏览器兼容，我们可以用 ES5 提供的 Array.prototype.indexOf 方法来简化代码
52+
* ********************/
53+
function unique2(array){
54+
var res = [];
55+
56+
for(var i =0; i<array.length;i++){
57+
var item = array[i];
58+
for(var j= 0; j < res.length; j++){
59+
if(res[j] === item){
60+
break;
61+
}
62+
}
63+
if(j === res.length){
64+
res.push(item);
65+
}
66+
}
67+
return res;
68+
}
69+
//console.log(unique2(arr));
70+
71+
function unique3( array ){
72+
var tempArray = [];
73+
for(var i=0; i<array.length; i++){
74+
if(tempArray.indexOf(array[i]) == -1){
75+
tempArray.push( array[i] );
76+
}
77+
}
78+
return tempArray;
79+
}
80+
</script>
81+
</body>
82+
</html>

‎JavaScript/数组操作/数组排序.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>数组排序|Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!</title>
6+
<meta name="Keyword" content="代码演示,代码片段,HTML5,CSS3,JavaScript,jQuery,Bootstrap">
7+
<meta name="Author" content="dunizb">
8+
<meta name="website" content="http://www.mybry.com">
9+
<meta name="Description" content="Demos 代码演示、代码片段 - 读你 | 这世间唯有梦想和好姑娘不可辜负!">
10+
<link type="image/x-icon" rel="shortcut icon" href="../image/favicon.ico"/>
11+
</head>
12+
<body>
13+
14+
<script type="text/javascript">
15+
// 数字数组排序
16+
var arr = [2,5,10,20,7,15];
17+
18+
arr.sort(function(a,b){
19+
return a - b;
20+
});
21+
console.log(arr);
22+
23+
// 字符串数组排序，按字符个数排序
24+
var arr2 = ["aaa","a","xxxxxx","abcd","ab"];
25+
arr2.sort(function(a,b){
26+
return a.length - b.length;
27+
});
28+
console.log(arr2);
29+
30+
</script>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)