Bootstrap/Html5/Css3 问答社区

捐献专用

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2258 次浏览 • 2017-02-17 16:20 • 来自相关话题

捐献主要用于群和网站相关费用开支相关开支将以透明的方式发布出来

除去开支外若有结余? 将展开各种活动以各种书籍谢谢大家支持?
?
捐献后请私聊我并截图捐献信息我将列入以下列表
?

排名不分先后
2017 年度
熊猫￥?1.00
雪原￥?1.00
美人鱼￥?1.00
大头￥?1.00
小妖￥?1.00
戏子￥?1.00
LYa0 ￥?1.00
pp ￥?1.00
柏龙￥?1.00
帮主￥6.00
小妖￥5.00
重庆小付￥5.55
大师傅 ?￥66.66
轮子 ?￥8.88
龙柏￥ 6.66
成都-尤里￥13.00
深圳糖糖￥2.00
天津-菜鸟笑画￥5.00
成都-银子￥6.66
成都-kris ￥6.66
广东-翔子￥8.88
?
2018 查看全部

es6 数组去重

javascript/jQuery • lopo1983 发表了文章 • 0 个评论 • 1448 次浏览 • 2017-02-13 01:10 • 来自相关话题

Array.from(new Set([5,5,6,6,8,]))[...new Set([5,5,6,6,8,])]

vue 路由keep-alive

javascript/jQuery • lopo1983 发表了文章 • 0 个评论 • 1862 次浏览 • 2017-01-14 22:17 • 来自相关话题

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>


<router-view v-if="!$route.meta.keepAlive"></router-view>?
路由设置
?
routes: [{
name: 'warp',
path: '/warp',
component: warp,
meta:{keepAlive:true}
}, {
name: 'grid',
path: '/grid',
component: grid,
meta:{keepAlive:true}
}, {
name: 'forms',
path: '/forms',
component: forms,
meta:{keepAlive:false}
}
] 查看全部

<!-- 这里是需要keepalive的 -->

<keep-alive>

    <router-view v-if="$route.meta.keepAlive"></router-view>

</keep-alive>



<!-- 这里不会被keepalive -->

<router-view v-if="!$route.meta.keepAlive"></router-view>

?
路由设置
?

	routes: [{

			name: 'warp',

			path: '/warp',

			component: warp,

			meta:{keepAlive:true}

		}, { 

			name: 'grid',

			path: '/grid',

			component: grid,

			meta:{keepAlive:true}

		}, { 

			name: 'forms',

			path: '/forms',

			component: forms,

			meta:{keepAlive:false}

		}

	]

bsf-vue

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1807 次浏览 • 2017-01-09 01:35 • 来自相关话题

之前在coding上有开源的大狗头bootstrap 扩展
因为需要将在近期发布bsf-vue版本
敬请大家期待?
谢谢

外资游戏企业招聘HTML5工程师(无需外语)坐标：泰国-曼谷

求职招聘 • Webhorse 发起了问题 • 0 人关注 • 0 个回复 • 3176 次浏览 • 2016-12-28 13:41 • 来自相关话题

bootstrap step vue版

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 1774 次浏览 • 2016-12-23 01:54 • 来自相关话题

<template id="template_step">
<ul class="nav nav-pills nav-justified step" :class="[className]">
<li v-for="(n,index) in list" :class="{'active': n <= step }">
<a @click="select(index)">step{{ n }}</a>
</li>
</ul>
</template>

<div id="app" class="container">
<step :list="5" :current="2" theme="progress"></step>
<step :list="5" :current="3" theme="round"></step>
<step :list="5" :current="1" theme="square"></step>
<step :list="5" :current="2" theme="arrow"></step>
</div>

<script>
const map = {
progress:'step-progress',
round:'step-round',
square:'step-square',
arrow:'step-arrow'
}
Vue.component('step',{
template:'#template_step',
props:['list','theme','current'],
data(){
return {
step:1
}
},
computed:{
className(){
return map[this.theme]
}
},
methods:{
select(idx){
this.step = idx + 1
}
},
mounted(){
this.step = typeof this.current != undefined ? this.current : 1
}
})
new Vue({
el:'#app'
})
</script>

.step {
counter-reset: flag;
}
.step li {
position: relative;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a {
cursor: pointer;
padding: 10px 15px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:before {
content: counter(flag);
counter-increment: flag;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step li a:after {
content: "";
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.step-arrow {
margin: 20px 0;
}
.step-arrow.unhover li a:hover,
.step-arrow.unhover li a:focus {
background-color: #f6f6f6;
color: #444444;
}
.step-arrow.unhover li a:hover:before,
.step-arrow.unhover li a:focus:before {
background-color: #d2d2d2;
color: #ffffff;
}
.step-arrow.unhover li:not(:last-child) a:hover:after,
.step-arrow.unhover li:not(:last-child) a:focus:after {
background-color: #f6f6f6;
}
.step-arrow li {
padding-right: 20px;
}
.step-arrow li:last-child {
padding-right: 0;
}
.step-arrow li:nth-child(n+2) a {
margin-left: -20px;
border-radius: 0;
}
.step-arrow li:not(:last-child) a:after {
position: absolute;
top: -1px;
right: -20px;
width: 40px;
height: 40px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background-color: #f6f6f6;
border-radius: 0 5px 0 50px;
border-top: 1px solid #ffffff;
border-right: 1px solid #ffffff;
box-sizing: content-box;
}
.step-arrow li:not(:last-child) a:hover:after {
background-color: #00b8f5;
}
.step-arrow li a {
border-radius: 0;
color: #444444;
background-color: #f6f6f6;
}
.step-arrow li a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li a:hover:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li a:before {
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
line-height: 20px;
border-radius: 20px;
left: 3rem;
font-weight: bold;
font-size: 1rem;
overflow: hidden;
top: 10px;
background: #d2d2d2;
color: #ffffff;
}
.step-arrow li.active a:before {
background: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after {
background-color: #00b8f5;
}
.step-arrow li.active a,
.step-arrow li.active a:hover {
background-color: #00b8f5;
color: #ffffff;
}
.step-arrow li.active a:before,
.step-arrow li.active a:hover:before {
background-color: #ffffff;
color: #00b8f5;
}
.step-arrow li.active a:after,
.step-arrow li.active a:hover:after {
background-color: #00b8f5 !important;
}
.step-square {
margin-top: 40px;
}
.step-square > li:hover a:before,
.step-square > li:active a:before,
.step-square > li.active a:before {
background-color: #00b8f5;
color: #ffffff;
border-color: #00b8f5;
}
.step-square > li:hover a:after,
.step-square > li:active a:after,
.step-square > li.active a:after {
background-color: #00b8f5;
}
.step-square > li:first-child a:after {
left: 50%;
border-right: 1px solid #ffffff;
}
.step-square > li:last-child a:after {
right: 50%;
border-left: 1px solid #ffffff;
}
.step-square > li > a {
color: #ebebeb;
}
.step-square > li > a:hover {
background-color: #ffffff;
color: #00b8f5;
}
.step-square > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
background-color: #ffffff;
line-height: 20px;
border: 1px solid #ebebeb;
}
.step-square > li > a:after {
content: '';
position: absolute;
left: 0;
right: 0;
top: -35%;
background-color: #ebebeb;
z-index: 1;
height: 2px;
border: solid #ffffff;
border-width: 0 1px;
}
.step-square > li.active > a,
.step-square > li.active > a:focus,
.step-square > li.active > a:hover {
color: #00b8f5;
background: transparent;
}
.step-round {
margin-top: 40px;
}
.step-round > li:first-child > a:after {
left: 30%;
border-radius: 5px 0 0 5px;
}
.step-round > li:last-child > a:after {
right: 30%;
border-radius: 0 5px 5px 0;
}
.step-round > li.active > a,
.step-round > li.active > a:hover,
.step-round > li.active > a:focus {
background: transparent;
color: #00b8f5;
}
.step-round > li.active > a:before,
.step-round > li.active > a:hover:before,
.step-round > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li.active > a:after,
.step-round > li.active > a:hover:after,
.step-round > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-round > li > a {
color: #ebebeb;
}
.step-round > li > a:before {
position: absolute;
z-index: 2;
top: -2rem;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: #ffffff;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-round > li > a:after {
position: absolute;
left: 0;
right: 0;
top: -38%;
background-color: #ebebeb;
z-index: 1;
height: 8px;
}
.step-round > li > a:after:after {
background-color: #00b8f5;
}
.step-round > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-round > li > a:hover:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-round > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress {
margin-top: 60px;
}
.step-progress > li > a {
color: #ebebeb;
padding-top: 1.8rem;
}
.step-progress > li > a:before {
position: absolute;
z-index: 2;
top: -35px;
left: 0;
right: 0;
margin: 0 auto;
width: 2rem;
height: 2rem;
border-radius: 50%;
line-height: 2rem;
box-shadow: 0 0 0 5px #ebebeb;
}
.step-progress > li > a:after {
content: "";
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
-webkit-background-size: 40px 40px;
background-size: 40px 40px;
background-color: #ebebeb;
float: left;
width: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 10px;
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
}
.step-progress > li > a span.caret {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
transform: rotate(180deg);
top: -4px;
}
.step-progress > li > a:hover {
background: transparent;
color: #00b8f5;
}
.step-progress > li > a:hover:before {
color: #ffffff;
background-color: #00b8f5;
}
.step-progress > li > a:hover:after {
background-color: #00b8f5;
}
.step-progress > li.active > a,
.step-progress > li.active > a:hover,
.step-progress > li.active > a:focus {
color: #00b8f5;
background: transparent;
}
.step-progress > li.active > a:before,
.step-progress > li.active > a:hover:before,
.step-progress > li.active > a:focus:before {
background-color: #00b8f5;
color: #ffffff;
}
.step-progress > li.active > a:after,
.step-progress > li.active > a:hover:after,
.step-progress > li.active > a:focus:after {
background-color: #00b8f5;
}
.step-progress > li.active > a:after {
-webkit-animation: progress-bar-stripes 2s linear infinite;
-o-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
.step-progress > li:first-child a:after {
border-radius: 5px 0 0 5px;
}
.step-progress > li:last-child a:after {
border-radius: 0 5px 5px 0;
}
/*step-progress*/

在哪遥远的地方有个预览地址查看全部

<template id="template_step">

  <ul class="nav nav-pills nav-justified step" :class="[className]">

				<li v-for="(n,index) in list" :class="{'active': n <= step }">

					<a @click="select(index)">step{{ n }}</a>

				</li>

			</ul>

</template>



<div id="app" class="container">

  <step :list="5" :current="2" theme="progress"></step>

  <step :list="5" :current="3" theme="round"></step>

  <step :list="5" :current="1" theme="square"></step>

  <step :list="5" :current="2" theme="arrow"></step>

</div>

<script>

const map = {

	progress:'step-progress',

  round:'step-round',

  square:'step-square',

  arrow:'step-arrow'

}

Vue.component('step',{

	template:'#template_step',

  props:['list','theme','current'],

  data(){

  	return {

    	step:1

    }

  },

  computed:{  	

  	className(){

			return map[this.theme]    	

    }    

  },

  methods:{

    select(idx){

    	this.step = idx + 1

    }

  },

  mounted(){

  	this.step = typeof this.current != undefined ? this.current : 1

  }

})

new Vue({

	el:'#app'

})

</script>



.step {

  counter-reset: flag;

}

.step li {

  position: relative;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a {

  cursor: pointer;

  padding: 10px 15px;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a:before {

  content: counter(flag);

  counter-increment: flag;

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step li a:after {

  content: "";

  transition: all 0.3s ease-in-out;

  -webkit-transition: all 0.3s ease-in-out;

  -ms-transition: all 0.3s ease-in-out;

}

.step-arrow {

  margin: 20px 0;

}

.step-arrow.unhover li a:hover,

.step-arrow.unhover li a:focus {

  background-color: #f6f6f6;

  color: #444444;

}

.step-arrow.unhover li a:hover:before,

.step-arrow.unhover li a:focus:before {

  background-color: #d2d2d2;

  color: #ffffff;

}

.step-arrow.unhover li:not(:last-child) a:hover:after,

.step-arrow.unhover li:not(:last-child) a:focus:after {

  background-color: #f6f6f6;

}

.step-arrow li {

  padding-right: 20px;

}

.step-arrow li:last-child {

  padding-right: 0;

}

.step-arrow li:nth-child(n+2) a {

  margin-left: -20px;

  border-radius: 0;

}

.step-arrow li:not(:last-child) a:after {

  position: absolute;

  top: -1px;

  right: -20px;

  width: 40px;

  height: 40px;

  transform: scale(0.707) rotate(45deg);

  z-index: 1;

  background-color: #f6f6f6;

  border-radius: 0 5px 0 50px;

  border-top: 1px solid #ffffff;

  border-right: 1px solid #ffffff;

  box-sizing: content-box;

}

.step-arrow li:not(:last-child) a:hover:after {

  background-color: #00b8f5;

}

.step-arrow li a {

  border-radius: 0;

  color: #444444;

  background-color: #f6f6f6;

}

.step-arrow li a:hover {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-arrow li a:hover:before {

  background: #ffffff;

  color: #00b8f5;

}

.step-arrow li a:before {

  position: absolute;

  z-index: 2;

  width: 20px;

  height: 20px;

  line-height: 20px;

  border-radius: 20px;

  left: 3rem;

  font-weight: bold;

  font-size: 1rem;

  overflow: hidden;

  top: 10px;

  background: #d2d2d2;

  color: #ffffff;

}

.step-arrow li.active a:before {

  background: #ffffff;

  color: #00b8f5;

}

.step-arrow li.active a:after {

  background-color: #00b8f5;

}

.step-arrow li.active a,

.step-arrow li.active a:hover {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-arrow li.active a:before,

.step-arrow li.active a:hover:before {

  background-color: #ffffff;

  color: #00b8f5;

}

.step-arrow li.active a:after,

.step-arrow li.active a:hover:after {

  background-color: #00b8f5 !important;

}

.step-square {

  margin-top: 40px;

}

.step-square > li:hover a:before,

.step-square > li:active a:before,

.step-square > li.active a:before {

  background-color: #00b8f5;

  color: #ffffff;

  border-color: #00b8f5;

}

.step-square > li:hover a:after,

.step-square > li:active a:after,

.step-square > li.active a:after {

  background-color: #00b8f5;

}

.step-square > li:first-child a:after {

  left: 50%;

  border-right: 1px solid #ffffff;

}

.step-square > li:last-child a:after {

  right: 50%;

  border-left: 1px solid #ffffff;

}

.step-square > li > a {

  color: #ebebeb;

}

.step-square > li > a:hover {

  background-color: #ffffff;

  color: #00b8f5;

}

.step-square > li > a:before {

  position: absolute;

  z-index: 2;

  top: -2rem;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  background-color: #ffffff;

  line-height: 20px;

  border: 1px solid #ebebeb;

}

.step-square > li > a:after {

  content: '';

  position: absolute;

  left: 0;

  right: 0;

  top: -35%;

  background-color: #ebebeb;

  z-index: 1;

  height: 2px;

  border: solid #ffffff;

  border-width: 0 1px;

}

.step-square > li.active > a,

.step-square > li.active > a:focus,

.step-square > li.active > a:hover {

  color: #00b8f5;

  background: transparent;

}

.step-round {

  margin-top: 40px;

}

.step-round > li:first-child > a:after {

  left: 30%;

  border-radius: 5px 0 0 5px;

}

.step-round > li:last-child > a:after {

  right: 30%;

  border-radius: 0 5px 5px 0;

}

.step-round > li.active > a,

.step-round > li.active > a:hover,

.step-round > li.active > a:focus {

  background: transparent;

  color: #00b8f5;

}

.step-round > li.active > a:before,

.step-round > li.active > a:hover:before,

.step-round > li.active > a:focus:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-round > li.active > a:after,

.step-round > li.active > a:hover:after,

.step-round > li.active > a:focus:after {

  background-color: #00b8f5;

}

.step-round > li > a {

  color: #ebebeb;

}

.step-round > li > a:before {

  position: absolute;

  z-index: 2;

  top: -2rem;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  background-color: #ffffff;

  line-height: 2rem;

  box-shadow: 0 0 0 5px #ebebeb;

}

.step-round > li > a:after {

  position: absolute;

  left: 0;

  right: 0;

  top: -38%;

  background-color: #ebebeb;

  z-index: 1;

  height: 8px;

}

.step-round > li > a:after:after {

  background-color: #00b8f5;

}

.step-round > li > a:hover {

  background: transparent;

  color: #00b8f5;

}

.step-round > li > a:hover:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-round > li > a:hover:after {

  background-color: #00b8f5;

}

.step-progress {

  margin-top: 60px;

}

.step-progress > li > a {

  color: #ebebeb;

  padding-top: 1.8rem;

}

.step-progress > li > a:before {

  position: absolute;

  z-index: 2;

  top: -35px;

  left: 0;

  right: 0;

  margin: 0 auto;

  width: 2rem;

  height: 2rem;

  border-radius: 50%;

  line-height: 2rem;

  box-shadow: 0 0 0 5px #ebebeb;

}

.step-progress > li > a:after {

  content: "";

  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));

  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);

  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));

  -webkit-background-size: 40px 40px;

  background-size: 40px 40px;

  background-color: #ebebeb;

  float: left;

  width: 100%;

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  height: 10px;

  transition: all 0.5s ease-in-out;

  -webkit-transition: all 0.5s ease-in-out;

  -ms-transition: all 0.5s ease-in-out;

}

.step-progress > li > a span.caret {

  position: absolute;

  left: 0;

  right: 0;

  margin: 0 auto;

  transform: rotate(180deg);

  top: -4px;

}

.step-progress > li > a:hover {

  background: transparent;

  color: #00b8f5;

}

.step-progress > li > a:hover:before {

  color: #ffffff;

  background-color: #00b8f5;

}

.step-progress > li > a:hover:after {

  background-color: #00b8f5;

}

.step-progress > li.active > a,

.step-progress > li.active > a:hover,

.step-progress > li.active > a:focus {

  color: #00b8f5;

  background: transparent;

}

.step-progress > li.active > a:before,

.step-progress > li.active > a:hover:before,

.step-progress > li.active > a:focus:before {

  background-color: #00b8f5;

  color: #ffffff;

}

.step-progress > li.active > a:after,

.step-progress > li.active > a:hover:after,

.step-progress > li.active > a:focus:after {

  background-color: #00b8f5;

}

.step-progress > li.active > a:after {

  -webkit-animation: progress-bar-stripes 2s linear infinite;

  -o-animation: progress-bar-stripes 2s linear infinite;

  animation: progress-bar-stripes 2s linear infinite;

}

.step-progress > li:first-child a:after {

  border-radius: 5px 0 0 5px;

}

.step-progress > li:last-child a:after {

  border-radius: 0 5px 5px 0;

}

/*step-progress*/

在哪遥远的地方有个预览地址

javascaript 操作 table dom

javascript/jQuery • catchcat 发表了文章 • 0 个评论 • 1705 次浏览 • 2016-12-18 22:47 • 来自相关话题

### js 操作table 对象：
?
cells 返回包含表格中所有单元格的一个数组。
rows 返回包含表格中所有行的一个数组。
tBodies 返回包含表格中所有 tbody 的一个数组。
--------------------------------------------------------------------------------------
caption 返回表格标题。 Yes
cellPadding 设置或返回单元格内容和单元格边框之间的空白量。 Yes
cellSpacing 设置或返回在表格中的单元格之间的空白量。 Yes
frame 设置或返回表格的外部边框。 Yes
height 已废弃?设置或者返回表格高度 instead D
rules 设置或返回表格的内部边框（行线）。 Yes
summary 设置或返回对表格的描述（概述）。 Yes
tFoot 返回表格的 TFoot 对象。如果不存在该元素，则为 null。 Yes
tHead 返回表格的 THead 对象。如果不存在该元素，则为 null。
------------------------------------------------------------------------------------------
createCaption() 为表格创建一个 caption 元素。 Yes
createTFoot() 在表格中创建一个空的 tFoot 元素。 Yes
createTHead() 在表格中创建一个空的 tHead 元素。 Yes
deleteCaption() 从表格删除 caption 元素以及其内容。 Yes
deleteRow() 从表格删除一行。 Yes
deleteTFoot() 从表格删除 tFoot 元素及其内容。 Yes
deleteTHead() 从表格删除 tHead 元素及其内容。 Yes
insertRow() 在表格中插入一个新行。
?<table border='1' width="350">
<thead>
<tr>
<th>#</th>
<th>name</th>
<th>age</th>
<th>operation</th>
</tr>
</thead>
<tbody></tbody>
</table>

<script>
var oName = document.getElementById('name');
var oAge = document.getElementById('age');
var obtn = document.getElementById('btn');
var oTable = document.getElementsByTagName('table')[0];
var oid = oTable.tBodies[0].rows.length+1;
var oTfoot = oTable.tFoot;

obtn.onclick = function(){

var oTr = document.createElement('tr');

oTr.innerHTML = '<td>'+(oid++)+'</td><td>'+oName.value+'</td><td>'+oAge.value+'</td><td><a href="javascript:;">del</a></td>'

oTable.tBodies[0].appendChild(oTr);

var odel = oTr.getElementsByTagName('a')[0];
odel.onclick = function(){
oTable.tBodies[0].removeChild(this.parentNode.parentNode);
};

};

</script> 查看全部

### js 操作table 对象：
?
cells 返回包含表格中所有单元格的一个数组。
rows 返回包含表格中所有行的一个数组。
tBodies 返回包含表格中所有 tbody 的一个数组。
--------------------------------------------------------------------------------------
caption 返回表格标题。 Yes
cellPadding 设置或返回单元格内容和单元格边框之间的空白量。 Yes
cellSpacing 设置或返回在表格中的单元格之间的空白量。 Yes
frame 设置或返回表格的外部边框。 Yes
height 已废弃?设置或者返回表格高度 instead D
rules 设置或返回表格的内部边框（行线）。 Yes
summary 设置或返回对表格的描述（概述）。 Yes
tFoot 返回表格的 TFoot 对象。如果不存在该元素，则为 null。 Yes
tHead 返回表格的 THead 对象。如果不存在该元素，则为 null。
------------------------------------------------------------------------------------------
createCaption() 为表格创建一个 caption 元素。 Yes
createTFoot() 在表格中创建一个空的 tFoot 元素。 Yes
createTHead() 在表格中创建一个空的 tHead 元素。 Yes
deleteCaption() 从表格删除 caption 元素以及其内容。 Yes
deleteRow() 从表格删除一行。 Yes
deleteTFoot() 从表格删除 tFoot 元素及其内容。 Yes
deleteTHead() 从表格删除 tHead 元素及其内容。 Yes
insertRow() 在表格中插入一个新行。
?

<table border='1' width="350">

			<thead>

				<tr>

					<th>#</th>

					<th>name</th>

					<th>age</th>

					<th>operation</th>

				</tr>

			</thead>

			<tbody></tbody>

		</table>

		

		

		<script>

			var oName = document.getElementById('name');

			var oAge = document.getElementById('age');

			var obtn = document.getElementById('btn');

			var oTable = document.getElementsByTagName('table')[0];

			var oid = oTable.tBodies[0].rows.length+1;

			var oTfoot = oTable.tFoot;

			

			

			obtn.onclick = function(){

			

				var oTr = document.createElement('tr');

				

				oTr.innerHTML = '<td>'+(oid++)+'</td><td>'+oName.value+'</td><td>'+oAge.value+'</td><td><a href="javascript:;">del</a></td>'

				

				oTable.tBodies[0].appendChild(oTr);

				

				var odel = oTr.getElementsByTagName('a')[0];

				odel.onclick = function(){

					oTable.tBodies[0].removeChild(this.parentNode.parentNode);

				};

				

			};

			

			

		</script>

Js动态创建/添加/删除li

javascript/jQuery • catchcat 发表了文章 • 0 个评论 • 1733 次浏览 • 2016-12-16 23:13 • 来自相关话题

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input id="tex" type="text">
<input id="btn" type="button" value="提交">
<ul id="oul"></ul>

<script>
var otex = document.getElementById('tex');
var obtn = document.getElementById('btn');
var oul = document.getElementById('oul');

obtn.onclick = function(){

//创建删除标签
var createTagA = document.createElement('a');
createTagA.setAttribute('href','javascript:;')
createTagA.innerHTML = "删除";

//创建li标签
var createTagLi = document.createElement('li');
var ali = oul.getElementsByTagName('li');
createTagLi.innerHTML = otex.value;
//li添加删除标签
createTagLi.appendChild(createTagA);

//判断输入框内容
if(!/^[\w\u4E00-\u9FA5]+$/.test(otex.value)){
alert('请不要输入数字/字母（不区分大小写）/汉字之外的符号');
otex.value = "";
}else{
//如果条件满足//兼容ie和ff
if(ali.length>0){
oul.insertBefore(createTagLi,ali[0]);
otex.value = "";
}else{
oul.appendChild(createTagLi);
otex.value = "";
};

};

//删除事件
createTagA.onclick = function(){
oul.removeChild(this.parentNode)
};

};

</script>
</body>
</html> 查看全部

<!doctype html>

<html>

	<head>

		<meta charset="utf-8">

	</head>

	<body>

		<input id="tex" type="text">

		<input id="btn" type="button" value="提交">

		<ul id="oul"></ul>

		

		<script>

			var otex = document.getElementById('tex');

			var obtn = document.getElementById('btn');

			var oul = document.getElementById('oul');

			

			obtn.onclick = function(){

			

				//创建删除标签

				var createTagA = document.createElement('a');

					createTagA.setAttribute('href','javascript:;')

					createTagA.innerHTML = "删除";

				

				//创建li标签

				var createTagLi = document.createElement('li');

				var ali = oul.getElementsByTagName('li');

					createTagLi.innerHTML = otex.value;

				//li添加删除标签

				createTagLi.appendChild(createTagA);

				

				//判断输入框内容

				if(!/^[\w\u4E00-\u9FA5]+$/.test(otex.value)){

					alert('请不要输入数字/字母（不区分大小写）/汉字之外的符号');

					otex.value = "";

				}else{

					//如果条件满足//兼容ie和ff

					if(ali.length>0){

						oul.insertBefore(createTagLi,ali[0]);

						otex.value = "";

					}else{

						oul.appendChild(createTagLi);

						otex.value = "";

					};

					

				};

				

				//删除事件

				createTagA.onclick = function(){

					oul.removeChild(this.parentNode)

				};

	

			};

			

			

			

		</script>

	</body>

</html>

JavaScript中console使用

javascript/jQuery • yinzi 发表了文章 • 0 个评论 • 1409 次浏览 • 2016-12-16 16:59 • 来自相关话题

1. console.log 基础打印，只能打印字符串、数字等简单变量或常亮;
console.info() console.error() console.warn()
2. console.group 信息分组，如图：

3. console.dir 可以打印对象所有的属性，根据对象结构以json形式打印；
4. console.dirxml 可以打印dom节点，如 console.dirxml(document.getElementById("dom_id"));
5. console.assert 判断变量是否为真
6. console.trace 追踪函数使用的记录，打印出第几行哪里使用过此函数
7. console.time() console.timeEnd() 记录运行代码运行时间
8. console.profile() console.profileEnd() 分析函数运行时间
? 查看全部

bootstrap step 插件更新

bootstrap3.x • lopo1983 发表了文章 • 0 个评论 • 2611 次浏览 • 2016-12-16 01:57 • 来自相关话题

$(function() {
bsStep();
//bsStep(i) i 为number 可定位到第几步如bsStep(2)/bsStep(3)
})? ? ? ?描述：
? ? ? ?1. ?css.less 主色调蓝色修改@ces /背景色修改@cc2
? ? ? ?2. ?更新为less 书写的css 方便定制
? ? ? ?3. ?请便以为css后上线
? ? ? ?在线预览
?
死靓仔点击下面下载查看全部

			$(function() {

				bsStep();

				//bsStep(i) i 为number 可定位到第几步 如bsStep(2)/bsStep(3)

			})

? ? ? ?描述：
? ? ? ?1. ?css.less 主色调蓝色修改@ces /背景色修改@cc2
? ? ? ?2. ?更新为less 书写的css 方便定制
? ? ? ?3. ?请便以为css后上线
? ? ? ?在线预览
?
死靓仔点击下面下载

通知设置新通知

发现