个人知识点总结

最新推荐文章于 2024-07-21 17:58:14 发布

施华洛世仙剑

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量208

点赞数

文章标签： html css 前端 vue.js javascript

本文链接：https://blog.csdn.net/m0_59566097/article/details/128067105

版权

1.文字渐变：
background: linear-gradient(to bottom, #f0fcff, #a1e1f3);
-webkit-background-clip: text;
color: transparent;

2.上下滚动
<body>
<ul style="border: 1px solid blue;height: 60px;width:300px;overflow: hidden;">
<li>aaaaaaaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbbbbbbb</li>
<li>ccccccccccccccccccccc</li>
<li>ddddddddddddddddddddd</li>
<li>eeeeeeeeeeeeeeeeeeeee</li>
<li>fffffffffffffffffffff</li>
<li>ggggggggggggggggggggg</li>
<li>hhhhhhhhhhhhhhhhhhhhh</li>
</ul>
</body>
js代码如下

//每隔两秒进行一次滚动
var timing =setInterval("info()",2000);

$("ul").hover(
function(){clearInterval(timing);},
function(){timing = setInterval("info()",2000);}
)

})
function info(){

//复制第一个li

var li =$("ul>li:eq(0)").clone();

//使用animate对li的外边距进行调整从而达到向上滚动的效果
$("ul>li:eq(0)").animate({marginTop:"-20px"},2000,function(){

//对已经消失的li进行删除
$("ul>li:eq(0)").remove();

//把复制后的li插入到最后
$("ul").append(li);
})
}
</script>

3.css文本超出...
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:()；
//
width: 200px !important; //限制文本宽度
word-wrap: break-word; //自动换行
word-break: break-all; //自动换行（兼容字母）
overflow: hidden; //超出隐藏
text-overflow: ellipsis; //溢出显示省略号
display: -webkit-box;
-webkit-line-clamp: 3; //显示3行
-webkit-box-orient: vertical;

4.首行缩进
p{
text-indent: 2rem;
}

5.vue v-for循环里面点击当前元素点击显示和隐藏
msgShow(index){
this.activeIndex = this.activeIndex === index ? !index : index;
}
https://segmentfault.com/q/1010000016290363

6.查当前时间
mounted
var date = new Date();
   var seperator1 = "-";
   var seperator2 = ":";
   var month = date.getMonth() + 1<10? "0"+(date.getMonth() + 1):date.getMonth() + 1;
   var strDate = date.getDate()<10? "0" + date.getDate():date.getDate();
   var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
           + " " + date.getHours() + seperator2 + date.getMinutes()
           + seperator2 + date.getSeconds();
this.time = currentdate

7.tab切换栏
https://segmentfault.com/a/1190000021702601

8.默认选中
$("#q1").trigger("click")

9.存取数据
citys: [],
var time = ['一', '二', '三', '四', '五', '六', '日']
var stime = this.temp.fieldOpenDate
time.forEach((v) => {
stime.forEach((a) => {
if ((a === v)) {
this.citys.push(a)
return
}
})
})
this.temp.fieldOpenDate = this.citys.join(',')

10antv渐变组件 colorStops
itemStyle: {
emphasis: {
barBorderRadius: 7,
},
normal: {
barBorderRadius: 7,
color: {
type: "linear",
x: 0,
y: 0,
x2: 1,
y2: 0,
colorStops: [
{
offset: 0,
color: "#70a0fd",
},
{
offset: 1,
color: "#80bcfc",
},
],
globalCoord: false, // 缺省为 false
},
},
},

y轴刻度线
line: {
style: {
stroke: false,
}
},

排名
axisLabel: {
color: "#fff",
formatter: function (value, index) {
return [
"{lg|" + (index + 1) + "}" + "{title|" + value + "} ",
].join("\n");
},
rich: {
lg: {
// backgroundColor: '#339911',
color: "#fff",
// borderRadius: 15,
fontSize: 8,
padding: 1,
align: "right",
width: 10,
height: 15,
},
},
},