前端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,strong {
　　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

原文：https://www.cnblogs.com/yywwqq/p/14804050.html