牛课网里面还是有难题的

<div class="content">
<span class="word color23">h</span>
<span class="word color22">e</span>
<span class="word color4">l</span>
<span class="word color24">l</span>
<span class="word color17">o</span>
<span class="word color2">&nbsp;</span>
<span class="word color9">w</span>
<span class="word color3">o</span>
<span class="word color1">r</span>
<span class="word color23">l</span>
<span class="word color15">d</span>
<br>
<span class="word color15">你</span>
<span class="word color13">好</span>
<span class="word color16">世</span>
<span class="word color19">界</span>
<span class="blink" id="jsBlink">|</span>
</div>

html, body {margin: 0;}
.color1 {color: #E60012;}
.color2 {color: #EB6100;}
.color3 {color: #F39800;}
.color4 {color: #FCC800;}
.color5 {color: #FFF100;}
.color6 {color: #CFDB00;}
.color7 {color: #8FC31F;}
.color8 {color: #22AC38;}
.color9 {color: #009944;}
.color10 {color: #009B6B;}
.color11 {color: #009E96;}
.color12 {color: #00A0C1;}
.color13 {color: #00A0E9;}
.color14 {color: #0086D1;}
.color15 {color: #0068B7;}
.color16 {color: #00479D;}
.color17 {color: #1D2088;}
.color18 {color: #601986;}
.color19 {color: #920783;}
.color20 {color: #BE0081;}
.color21 {color: #E4007F;}
.color22 {color: #E5006A;}
.color23 {color: #E5004F;}
.color24 {color: #E60033;}
.word {font-size: 20px;}
.content {text-align: center;font-size:0;}
.blink {
font-size: 20px;
animation: fade 500ms infinite;
-webkit-animation: fade 500ms infinite;
}
@keyframes fade {
from {opacity: 1.0;}
50% {opacity: 0;}
to {opacity: 1.0;}
}

function output(str) {
//删除原有结点
var contents = document.getElementsByClassName('content');
var jsBlink = document.getElementById('jsBlink');
var childs = contents[0].childNodes;
while(childs.length > 0){
if(childs[0] == jsBlink){
break;
}
contents[0].removeChild(childs[0]);
}
var i = 0;
//每隔200毫秒输出字符
var fun = setInterval(function(){
if(i == str.length) clearInterval(fun);
else{
var c = str[i];
if(c == '\n'){
console.log(c);
var br = document.createElement('br');
contents[0].insertBefore(br, jsBlink);
}else{
var newSpan = document.createElement('span');
newSpan.className = "word color" + (Math.floor(Math.random() * 24) + 1);
if(c == '<'){
c = '&lt';
}else if(c == '>'){
c = '&gt';
}else if(c == ' '){
c = '&nbsp';
}
newSpan.innerHTML = c;
contents[0].insertBefore(newSpan, jsBlink);
}
i++;
}
}, 200);
}
output('hello world\n你好世界');

下面是购物车，我把它修改了一下。

<table id="jsTrolley">
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>操作</th>
<th><a onclick="adddan();" href="javascript:void(0);">单行添加</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>产品1</td>
<td>10.00</td>
<td>
<a id='xiugai' href="javascript:void(0);">修改</a>--<a id='shanchu' href="javascript:void(0);">删除</a>
</td>
</tr>
<tr>
<td>产品2</td>
<td>30.20</td>
<td>
<a id='xiugai' href="javascript:void(0);">修改</a>--<a id='shanchu' href="javascript:void(0);">删除</a>
</td>
</tr>
<tr>
<td>产品3</td>
<td>20.50</td>
<td>
<a id='xiugai' href="javascript:void(0);">修改</a>--<a id='shanchu' href="javascript:void(0);">删除</a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>总计</th>
<td colspan="2">60.70(3件商品)</td>
</tr>
</tfoot>
</table>

body,html{
padding: 0;
margin: 0;
font-size: 14px;
color: #000000;
}
table{
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}
thead{
background: #3d444c;
color: #ffffff;
}
td,th{
border: 1px solid #e1e1e1;
padding: 0;
height: 30px;
line-height: 30px;
text-align: center;
}

// function adddan(obg){
// var str = '';
// var tbody = document.querySelector('tbody');
// str = `<tr><td>` + obg[0].addname + `</td><td>` +
// parseInt(obg[0].addprice).toFixed(2) +
// `</td><td><a id='xiugai' href="javascript:void(0);">修改</a>--<a id='shanchu' href="javascript:void(0);">删除</a></td></tr>`;
// console.log('obg.name='+obg[0].addname);
// tbody.innerHTML += str;
// count();
// }
//单行添加
function adddan(){
var addname=unescape (prompt('输入产品名称'));
var addprice=unescape (prompt('输入产品价格'));
var str = '';
var tbody = document.querySelector('tbody');
str = `<tr><td>` + addname + `</td><td>` +
parseInt(addprice).toFixed(2) +
`</td><td><a id='xiugai' href="javascript:void(0);">修改</a>--<a id='shanchu' href="javascript:void(0);">删除</a></td></tr>`;
tbody.innerHTML += str;
count();
}
function add(items) {
var str = '';
var tbody = document.querySelector('tbody');
for (var i = 0; i < items.length; i++) {
str += `<tr><td>` + items[i].name + `</td><td>` +
parseInt(items[i].price).toFixed(2) +
`</td><td><a id='xiugai' href="javascript:void(0);">修改</a>--<a id='shanchu' href="javascript:void(0);">删除</a></td></tr>`;
}
tbody.innerHTML += str;
count();
}
function bind() {
var tbody = document.querySelector('tbody');
var del = tbody.querySelectorAll('a');
tbody.addEventListener('click', function(event) {
var el = event.target;
// el.parentNode
// 删除
if (el.id === 'shanchu') {
// console.log('shi='+el.parentNode.parentNode);
tbody.removeChild(el.parentNode.parentNode);
count();
}
//修改
if (el.id === 'xiugai') {
var gainame=prompt('输入产品名称');
var gaiprice=prompt('输入产品价格');;
var shang1=el.parentNode;
var shang2=shang1.parentNode;
shang2.children[0].innerHTML =gainame;
shang2.children[1].innerHTML =parseInt(gaiprice).toFixed(2);
var xianame=shang2.children[0].innerHTML;
var xiaprice=shang2.children[1].innerHTML;
console.log(xianame);
console.log(xiaprice);
// tbody
// tbody.removeChild(el.parentNode.parentNode);
// count();
}
});
}
function count() {
var tbody = document.querySelector('tbody');
var tr = tbody.querySelectorAll('tr');
var tfoot = document.querySelector('tfoot');
var td = tfoot.querySelector('td');
// console.log(tr[1]);
var sum = 0;
for (var i = 0; i < tr.length; i++) {
sum += parseFloat(tr[i].children[1].innerHTML);
}
td.innerHTML = sum.toFixed(2) + '(' + tr.length + '件商品)';
}
// var obg=[{
// addname: '产品1',
// addprice: '20'
// }]
// adddan(obg);
var items = [{
name: '产品1',
price: '20'
},
{
name: '产品2',
price: '20'
}, {
name: '产品3',
price: '10'
}, {
name: '产品4',
price: '20'
}, {
name: '产品5',
price: '10'
}
]
add(items);
bind();

去重好像没有通过，但是我还是喜欢这样，因为简单，哈哈。

var arr=[];
arr[0]='false';
arr[1]='true';
arr[2]='undefined';
arr[3]='null';
arr[4]='NaN';
arr[5]='0';
arr[6]='1';
arr[7]='{}';
arr[8]='{}';
arr[9]='a';
arr[10]='a';
arr[11]='NaN';
console.log(arr);
var xing=[]
for(var a = 0; a < arr.length; a++){
if(xing.indexOf(arr[a]) == -1){
xing.push(arr[a]);
}
}
console.log('arr去重后='+xing);

表格排序题

<table>
<thead>
<tr>
<th>id</th>
<th>price</th>
<th>sales</th>
</tr>
</thead>
<tbody id="jsList">
<tr>
<td>1</td>
<td>10.0</td>
<td>800</td>
</tr>
<tr>
<td>2</td>
<td>30.0</td>
<td>600</td>
</tr>
<tr>
<td>3</td>
<td>20.5</td>
<td>700</td>
</tr>
<tr>
<td>4</td>
<td>40.5</td>
<td>500</td>
</tr>
<tr>
<td>5</td>
<td>60.5</td>
<td>300</td>
</tr>
<tr>
<td>6</td>
<td>50.0</td>
<td>400</td>
</tr>
<tr>
<td>7</td>
<td>70.0</td>
<td>200</td>
</tr>
<tr>
<td>8</td>
<td>80.5</td>
<td>100</td>
</tr>
</tbody>
</table>

<script>
function sort(type, order) {
if(type == "id"){
type = 0;
}else if(type == "price"){
type = 1;
}else if(type == "sales"){
type = 2;
};
var tbody = document.querySelector('tbody');
// console.log(tbody);
var body_tr = tbody.querySelectorAll('tr');
var arr_tr = [...body_tr];
arr_tr.sort(function(a, b) {
console.log(a);
var td1 = a.children[type].innerHTML;
var td2 = b.children[type].innerHTML;
if(order === 'asc') {
return td1 - td2;
} else if(order === 'desc') {
return td2 - td1;
}
});
arr_tr.forEach(item => tbody.appendChild(item));
}
sort('price', 'asc');
</script>

表格排序的...body_tr我还不是很懂用什么用

明天在重新刷完正侧就去搞他的机试考试了，希望能过，呵呵。