vue前端demo
前端demo
原生js选项卡切换效果
### css
* {
margin: 0;
padding: 0;
}
.box {
margin: 20px auto;
}
.list {
height: 20px;
width: 200px;
}
.list li {
width: 64px;
float: left;
list-style: none;
border: 1px solid red;
}
.box div {
width: 200px;
height: 200px;
background: lightblue;
text-align: center;
line-height: 200px;
display: none;
}
### html
<div class="box">
<ul class="list">
<li style="background: blueviolet;">项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<div style="display: block;">
项目1
</div>
<div>
项目2
</div>
<div>
项目3
</div>
</div>
### js
var Ali = document.getElementsByTagName("li");
var Adiv = document.querySelectorAll(".box div");
for (let i = 0; i < Ali.length; i++) {
// 把循环的数字赋给Ali中index
Ali[i].index = i;
// console.log(Ali[i].index);
Ali[i].onclick = function () {
for (let i = 0; i < Ali.length; i++) {
Ali[i].style.background = \'\';
Adiv[i].style.display = \'none\';
Ali[this.index].style.background = \'blueviolet\';
Adiv[this.index].style.display = \'block\';
}
}
}
jquery选项卡切换效果
##css
* {
margin: 0;
padding: 0;
}
.box {
margin: 20px auto;
}
.list {
height: 20px;
width: 200px;
}
.list li {
width: 64px;
float: left;
list-style: none;
border: 1px solid red;
}
.active{
background: blueviolet;
}
.box div {
width: 200px;
height: 200px;
background: lightblue;
text-align: center;
line-height: 200px;
display: none;
}
.box .actived{
display: block;
}
## html
<div class="box">
<ul class="list">
<li class="active">项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
<div class="actived">
项目1
</div>
<div>
项目2
</div>
<div>
项目3
</div>
</div>
## js
$(".list li").click(function(){
$(this).addClass("active").siblings().removeClass("active");
var index = $(this).index();
$(".box div").eq(index).addClass("actived").siblings().removeClass("actived");
})
时间显示和一段文字逐个显示的效果
##css
* {
margin: 0;
padding: 0;
}
#time {
width: 200px;
height: 40px;
border: 1px solid yellowgreen;
margin: 20px auto;
text-align: center;
line-height: 40px;
}
#newcontent {
box-sizing: border-box;
width: 100%;
padding: 60px;
margin: 100px auto;
}
#oldcontent {
display: none;
}
##html
<div id="time">
</div>
<p id="oldcontent">
2021.5.20断断续续加起来我们已经相伴了一年零七个月了,则么感觉有好几年的感觉了.有时候感觉你很心细,但有时候的你又很粗心,我真的是猜不透你心里到底在想什么.你的想法有时候很奇妙,你一般又不会去跟我沟通,我有时候都不确定你有多爱我.真琢磨不透,所以干脆我放弃了思考,不用我的小脑瓜去想那些东西.不说了,不过还是在520这一天说一声我爱你.虽然不表现出来,但是还是想在这些特殊的日子里有一个你制造的惊喜在等着我呀!自己还是会羡慕在这一天手捧鲜花挽着男朋友的小姐姐.好了,下面要开始一波土味情话了,请接招我可以一个人唱歌，一个人喝咖啡，一个人涂鸦，一个人旅行，一个人逛大街，一个人在雨中漫步，一个人听音乐，一个人自言自语，一个人发呆，一个人跳舞，一个人看电视，一个人翻杂志……只有爱你，是我一个人做不到的,希望我们成为最幸福的那一对,转换思想，我不怪你你不懂我，我只怪自己不懂你!我打开笔记，我又落笔放弃了回忆!520，我心依旧!我有一个梦想，简单快乐，从容不违背!我有一个梦想，你，幸福!
</p>
<div id="newcontent">
</div>
## js
window.onload = function () {
setInterval(() => {
fndate()
}, 1000);
}
function fndate() {
var Time = document.getElementById("time")
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var data = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var time = pull(year) + \'-\' + pull(month) + \'-\' + pull(data) + \' \' + pull(hour) + \':\' + pull(minute) + \':\' + pull(second);
Time.innerHTML = time;
}
// 当每一位的数不够时补零
function pull(number) {
var num;
number > 10 ? num = number : num = "0" + number;
return num
}
var Oldcontent = document.getElementById("oldcontent");
var Newcontent = document.getElementById("newcontent");
var i = 0;
timer = setInterval(() => {
Newcontent.innerHTML = Oldcontent.innerHTML.substring(0, i);
i++;
if (Newcontent.innerHTML == Oldcontent.innerHTML) {
clearInterval(timer);
}
}, 100);
去掉css样式默认的浏览器的样式
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,
button, input, select, textarea /* for ie */ {
font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读, 让 small 正常化 */
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
a:hover { text-decoration: underline; }
sup { vertical-align: text-top; } /* 重置, 减少对行高的影响 */
sub { vertical-align: text-bottom; }
/** 重置表单元素 **/
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
/* 重置 HTML5 元素 */
article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,
summary, time, mark, audio, video {
display: block;
margin: 0;
padding: 0;
}
mark { background: #ff0; }
/* 设置placeholder的默认样式 */
:-moz-placeholder {
color: #ddd;
opacity: 1;
}
::-moz-placeholder {
color: #ddd;
opacity: 1;
}
input:-ms-input-placeholder {
color: #ddd;
opacity: 1;
}
input::-webkit-input-placeholder {
color: #ddd;
opacity: 1;
}
a{
text-decoration:none;
color:#333;
}
a:hover, a:visited, a:link, a:active {
// 做到只设置一次，就可以使所有a标签的四种状态都和本身颜色保持一致，样式代码自己写
}
<a href="#outer">
outerA
<object><a href="#inner">innerA</a></object>
</a>
input{
border: none;
appearance:none;
-moz-appearance:none;
outline:none;//input标签聚焦不出现默认边框:
-webkit-appearance: none;//用于IOS下移除原生样式
}
input:focus{ outline:none; }//input标签聚焦不出现默认边框:
border: none; appearance:none; -moz-appearance:none; outline:none;//input标签聚焦不出现默认边框: -webkit-appearance: none;//用于IOS下移除原生样式 } //or: input:focus{ outline:none; }//input标签聚焦不出现默认边框:
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#3c8bee ;; opacity:1; font-size: 0.25rem;text-align: center; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#3c8bee ;; opacity:1; font-size: 0.25rem;text-align: center; }
input:-ms-input-placeholder{ color:#3c8bee ;; opacity:1; font-size: 0.25rem;text-align: center; }
input::-webkit-input-placeholder{ color:#3c8bee ;; opacity:1; font-size: 0.25rem;text-align: center; }
ul, ol, {
margin: 0;
padding: 0;
list-style: none;
}
img {
vertical-align：top;
border：none;
}
em,span {
font-style:normal;
font-weight:normal;
}
button{
border:0;
background-color:none;
outline:none;
-webkit-appearance: none;//用于IOS下移除原生样式
}
select {
border: none;
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;
padding-right: 14px;
}
::-ms-clear,::-ms-reveal{
display: none;
}
font-size: 12px;
-webkit-transform: scale(0.84);
-ms-transform: scale(0.84);
-moz-transform: scale(0.84);
-o-transform: scale(0.84);
transform: scale(0.84);
-webkit-text-size-adjust: none;
img{
vertical-align: middle;
}
//透明度的兼容性的写法
opacity:0;
-ms-filter: \'alpha(opacity=0)\';
vue2项目的创建
https://blog.csdn.net/u012396955/article/details/80740031
首先查看是否安装了npm 和node
npm -V
node -V
出现版本号就是安装了
安装全局的vue
在你要创建vue的文件夹打开终端输入 npm install --global vue-cli
安装完成之后输入 vue init webpack demo (demo是你创建的vue项目名)
vue2移动端适配
安装1. npm install lib-flexible --save
2.npm install postcss-px2rem-exclude --save(解决了当vue项目引入第三方插件的时候所有的样式都小了一半) 或者是 npm uninstall postcss-px2rem --save-dev(当引入第三方插件的时候所有的样式都小了一半)
3.在项目main.js文件中引入\'lib-flexible\'
import \'lib-flexible\'
4.在build文件夹下面的utils.js文件中加入代码
const px2remLoader = {
loader: \'px2rem-loader\',
options: {
remUnit: 75,//这是设计稿的尺寸750/10
exclude: /node_modules|folder_name/i //当引入第三方插件的时候样式不被缩小
}
}
const loaders = options.usePostCSS ? [cssLoader, px2remLoader, postcssLoader] : [cssLoader, px2remLoader]
5.在node_modules文件夹下lib_flexible文件夹下flexible.js中
var width = docEl.getBoundingClientRect().width;
if (width / dpr > 540) {
width = 50* dpr;
}
中的 width = 50* dpr改为width = width * dpr
以上是 vue前端demo 的全部内容， 来源链接： utcz.com/z/377597.html
