CSS学习

最新推荐文章于 2022-10-13 11:08:50 发布

灬一抹丶清风

最新推荐文章于 2022-10-13 11:08:50 发布

阅读量142

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_33327639/article/details/116721696

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS相关学习

flex布局
综合布局
动画简介
JS事件监听
画布简介

flex布局

flex简单运用

效果图
代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex学习</title>
<style>
body,html{
    height: 100%;
}
#main{
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.author {
    font-size: 14px;
    font-style: italic;
    color: gray;
    margin-left: 40px;
    margin-bottom: 20px;
}
</style>
</head>
<body>

<div id="main">
    <h3>登鹳雀楼</h3>
    <div class="author">李白</div>
    <div><span>白</span>日依山尽，<span>黄</span>河入海流</div>
    <div><span>欲</span>穷千里目，<span>更</span>上一层楼</div>
</div>

</body>
</html>

flex-wrap自动换行

效果图
代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex学习</title>
<style>
body,html{
    height: 100%;
}
.container{
    display: flex;
    flex-wrap: wrap;
}
.container div{
    background-color: #ddd;
    padding: 10px;
    margin-right: 10px;
    margin-bottom: 10px;
    display: inline-block;
}
</style>
</head>
<body>
    <div class="container">
        <div>四姑娘山</div>
        <div>牛峰山</div>
        <div>喜马拉雅山</div>
        <div>黄山</div>
        <div>秋名山</div>
        <div>富士山</div>
        <div>大兴安岭太行山</div>
        <div>昆仑山</div>
        <div>安第斯山</div>
        <div>卧龙山</div>
        <div>四姑娘山</div>
        <div>牛峰山</div>
        <div>喜马拉雅山</div>
        <div>黄山</div>
        <div>秋名山</div>
        <div>富士山</div>
        <div>大兴安岭太行山</div>
        <div>昆仑山</div>
        <div>安第斯山</div>
        <div>卧龙山</div>
        <div>四姑娘山</div>
        <div>牛峰山</div>
        <div>喜马拉雅山</div>
        <div>黄山</div>
        <div>秋名山</div>
        <div>富士山</div>
        <div>大兴安岭太行山</div>
        <div>昆仑山</div>
        <div>安第斯山</div>
        <div>卧龙山</div>
    </div>
</body>
</html>

flex-grow的运用

效果图
代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex学习</title>
<style>
.container{
    display: flex;
    flex-direction: row;
    width: 50%;
    height: 100px;
    line-height: 100px;
    margin: 10px auto;
}
.container div{   
    text-align: center;
}
.container > div:nth-child(2n + 1) {
    background-color: cadetblue;
}
.container > div:nth-child(2n) {
    background-color: indianred;
}
</style>
</head>
<body>
    <div class="container">
        <div style="width:100px;">固定100px</div>
        <div style="flex-grow: 1;">填满剩余位置</div>      
    </div>
    <div class="container">
        <div style="flex-grow: 1;">1</div>
        <div style="flex-grow: 1;">1</div>      
    </div>
    <div class="container">
        <div style="flex-grow: 1;">1</div>
        <div style="flex-grow: 2;">2</div>
        <div style="flex-grow: 1;">1</div>      
    </div>
</body>
</html>

flex对齐方式

效果图
代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex学习</title>
<style>
body {
    width: 600px;
    margin: 0 auto;
}
.container{
    display: flex; 
}
.row{
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.column{
    flex-direction: column;
    align-items: flex-end;
}
.container > div:nth-child(2n + 1) {
    background-color: cadetblue;
}
.container > div:nth-child(2n) {
    background-color: indianred;
}
</style>
</head>
<body>
    <div>横向布局垂直居中，两端对齐</div>
    <div class="container row">
        <div style="width:100px;height:20px;">100x20</div>
        <div style="width:50px;height:50px;">50x50</div>
        <div style="width:80px;height:40px;">80x40</div>     
    </div>
    <div>纵向布局水平右对齐</div>
    <div class="container column">
        <div style="width:100px;height:20px;">100x50</div>
        <div style="width:50px;height:50px;">50x100</div>
        <div style="width:80px;height:40px;">80x80</div>     
    </div>
</body>
</html>

综合布局

后台框架布局

效果图
代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex学习</title>
<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}    
.container{
    width: 100%;
    height: 100%;
    min-height: 600px;
    min-width: 1000px;
    display: flex;
    flex-direction: column;
}
.header{
    width: 100%;
    height: 100px;
    line-height: 100px;
    background-color: brown;
}
.center-content{
    width: 100%;
    height: 0;
    display: flex;
    flex-direction: row;
    flex-grow: 1;
}
.menu{
    width: 200px;
    min-width: 200px;
    background-color: blueviolet;
}
.content{
    flex-grow: 1;
    height: 100%;
    overflow-y: scroll;
}
.content div{
    text-align: center;
    height: 300px;
    line-height: 300px;
}
.content div:nth-child(2n-1) {
    background-color: #efefef;
}
.footer{
    width: 100%;
    height: 50px;
    background-color: gray;
}
</style>
</head>
<body>
    <div class="container">
        <div class="header">头部</div>
        <div class="center-content">
            <div class="menu">菜单栏</div>
            <div class="content">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
        <div class="footer">底部</div>
    </div>   
</body>
</html>

基础表单布局

效果图
代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex学习</title>
<style>
html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #efefef;
}    
.container{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.form-root{
    background-color: white;
    border-radius: 5px;
    padding: 16px;
    width: 320px;
}
.form-root .title {
    font-size: 20px;
    font-weight: bold;
    color: indianred;
    margin-top: 20px;
}
.form-root input{
    width: 100%;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    padding: 0 10px;
    box-sizing: border-box;
}
.form-root .action-layout{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 14px;
    margin-top: 10px;
}
.form-root .button {
    border-radius: 3px;
    height: 40px;
    line-height: 40px;
    background-color: indianred;
    margin-top: 50px;
    margin-bottom: 30px;
    color: white;
    text-align: center;
    cursor: pointer;
}
</style>
</head>
<body>
    <div class="container">
        <div class="form-root">
            <div class="title">登录系统</div>
            <input type="text" placeholder="请输入用户名" style="margin-top: 50px">
            <input type="password" placeholder="请输入密码" style="margin-top: 20px">
            <div class="action-layout">
                <div style="color:gray;cursor: pointer;">游客登录</div>
                <div style="color:indianred;cursor: pointer;">还没账号？立即注册</div>
            </div>
        
            <div class="button">立即登录</div>
        </div>
    </div>   
</body>
</html>

滚动实现

效果图
代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex学习</title>
<style>
body,html{
    height: 100%;
    width: 100%;
    background-color: #efefef;
}
.container{
    width: 500px;
    margin: 0 auto;
}
.scroll-x{
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
    font-size: 0;
}
.scroll-x > div {
    width: 200px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    color: white;
    font-size: 16px;
    display: inline-block;   
}
.scroll-x div:nth-child(2n-1){
    background-color: cadetblue;
}
.scroll-x div:nth-child(2n){
    background-color: indianred;
}
.scroll-x-flex{
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
}
.scroll-x-flex > div {
    width: 200px;
    min-width: 200px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    color: white;
    font-size: 16px; 
}
.scroll-x-flex div:nth-child(2n-1){
    background-color: cadetblue;
}
.scroll-x-flex div:nth-child(2n){
    background-color: indianred;
}
.scroll-y{
    display: flex;
    flex-direction: column;
    height: 400px;
    overflow-y: scroll;
}
.scroll-y div{
    width: 100%;
    height: 150px;
    line-height: 150px;
    text-align: center;
    color: white;
}
.scroll-y div:nth-child(2n-1){
    background-color: cadetblue;
}
.scroll-y div:nth-child(2n){
    background-color: indianred;
}
.scroll-all{
    display: inline-block;
    white-space: nowrap;
    overflow: scroll;
    width: 100%;
    height: 500px;
    font-size: 0;
}
.scroll-all div{
    width: 200px;
    min-width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    font-size: 16px;
    color: white;
    display: inline-block;
}
.scroll-all div:nth-of-type(2n-1){
    background-color: cadetblue;
}
.scroll-all div:nth-of-type(2n){
    background-color: indianred;
}
</style>
</head>
<body>
    <div class="container">
        <h3>横向(非flex实现)</h3>
        <div class="scroll-x">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        <h3>横向(flex实现)</h3>
        <div class="scroll-x-flex">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div>
        <h3>纵向</h3>
        <div class="scroll-y">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
        <h3>全方向</h3>
        <div class="scroll-all">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <br>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <br>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
</body>
</html>

网格布局

效果图
代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>flex学习</title>
<style>
body,html{
    height: 100%;
    width: 100%;
    background-color: #efefef;
}
.container{
    width: 664px;
    background-color: white;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
    box-sizing: border-box;
}
.container div {
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    color: white;
    margin-right: 16px;
}
.container div:nth-child(n+4){
    margin-top: 16px;
}
.container div:nth-child(3n){
    margin-right: 0;
}
.container div:nth-of-type(2n-1){
    background-color: cadetblue;
}
.container div:nth-of-type(2n){
    background-color: indianred;
}
</style>
</head>
<body>
    <div class="container">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
    </div>
</body>
</html>

手机框架布局

效果图
代码块

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>flex学习</title>
<style>
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #efefef;
    font-size: 14px;
}
.title-bar{
    width: 100%;
    height: 50px;
    display: flex;
    flex-direction: row;
    background-color: royalblue;
    color: white;
    align-items: center;
    position: fixed;
    top: 0;
}
.title-bar .title-search{
    flex-grow: 1;
    height: 36px;
    line-height: 36px;
    background-color: white;
    border-radius: 18px;
    margin: 0 10px;
    color: gray;
    padding-left: 10px;
}
.title-bar .title-button{
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
}
.content{
    padding-top: 50px;
    padding-bottom: 64px;
}
.content #tip-container{
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: antiquewhite;
    padding: 10px;
}
.list-item{
    height: 100px;
    margin-top: 10px;
    background-color: white;
    display: flex;
    align-items: center;
}
.list-item .img{
    min-width: 80px;
    width: 80px;
    height: 80px;
    margin-left: 10px;
    background-color: gray;
}
.list-item .info{
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    width: 0;
}
.list-item .info .title{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-item .info .bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.list-item .info .bottom .price{
    font-size: 20px;
    color: #ff7272;
}
.list-item .info .bottom .quantity{
    font-size: 10px;
    color: gray;
}
.float-button{
    position: fixed;
    background-color: #ff7272;
    color: white;
    width: 48px;
    height: 48px;
    line-height: 48px;
    border-radius: 24px;
    right: 16px;
    bottom: 80px;
    text-align: center;
}
.tab-bar{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 64px;
    background-color: white;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    align-items: center;
}
.tab-bar .tab{
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tab-bar .tab .icon{
    height: 24px;
    width: 24px;
    background-color: gray;
    border-radius: 12px;
}
</style>
</head>
<body>
    <div class="container">
        <div class="title-bar">
            <div class="title-search">请输入搜索内容</div>
            <div class="title-button">
                登录
            </div>
        </div>
        <div class="content">
            <div id="tip-container">热门商品展示</div>
            <div class="list-item">
                <div class="img"></div>
                <div class="info">
                    <div class="title">商品短标题</div>
                    <div class="bottom">
                        <div class="price">¥1000.00</div>
                        <div class="quantity">已售 12</div>
                    </div>
                </div>
            </div>
            <div class="list-item">
                <div class="img"></div>
                <div class="info">
                    <div class="title">商品长标题商品长标题商品长标题商品长标题商品长标题商品长标题商品长标题</div>
                    <div class="bottom">
                        <div class="price">¥1000.00</div>
                        <div class="quantity">已售 12</div>
                    </div>
                </div>
            </div>
            <div class="list-item">
                <div class="img"></div>
                <div class="info">
                    <div class="title">商品短标题</div>
                    <div class="bottom">
                        <div class="price">¥1000.00</div>
                        <div class="quantity">已售 12</div>
                    </div>
                </div>
            </div>
            <div class="list-item">
                <div class="img"></div>
                <div class="info">
                    <div class="title">商品长标题商品长标题商品长标题商品长标题商品长标题商品长标题商品长标题</div>
                    <div class="bottom">
                        <div class="price">¥1000.00</div>
                        <div class="quantity">已售 12</div>
                    </div>
                </div>
            </div>
            <div class="list-item">
                <div class="img"></div>
                <div class="info">
                    <div class="title">商品短标题</div>
                    <div class="bottom">
                        <div class="price">¥1000.00</div>
                        <div class="quantity">已售 12</div>
                    </div>
                </div>
            </div>
            <div class="list-item">
                <div class="img"></div>
                <div class="info">
                    <div class="title">商品长标题商品长标题商品长标题商品长标题商品长标题商品长标题商品长标题</div>
                    <div class="bottom">
                        <div class="price">¥1000.00</div>
                        <div class="quantity">已售 12</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="float-button">+</div>
        <div class="tab-bar">
            <div class="tab">
                <div class="icon"></div>
                <div>首页</div>
            </div>
            <div class="tab">
                <div class="icon"></div>
                <div>行情</div>
            </div>
            <div class="tab">
                <div class="icon"></div>
                <div>自选</div>
            </div>
            <div class="tab">
                <div class="icon"></div>
                <div>交易</div>
            </div>
            <div class="tab">
                <div class="icon"></div>
                <div>我的</div>
            </div>
        </div>
    </div>
</body>
</html>

动画简介

效果图
代码块


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画效果</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #efefef;
            font-size: 14px;
        }

        .container {
            width: 600px;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .gallery {
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
        }

        .gallery img {
            width: 200px;
            height: 200px;
            padding: 16px;
            box-sizing: border-box;
            background-color: white;
            border-radius: 5px;
        }

        .gallery img:hover {
            box-shadow: 0 0 10px #aaa;
            transform: scale(1.1) rotate(5deg);
        }

        .gallery img:last-child {
            transition: all 0.3s ease;
        }

        .progress {
            height: 60px;
            width: 100%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        @keyframes progress-line {
            0% {
                transform: translateX(-50%);
            }
            50%{
                transform: translateX(50%);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        @-webkit-keyframes progress-line {
            0% {
                transform: translateX(-50%);
            }
            100% {
                transform: translateX(50%);
            }
        }

        .progress .line {
            width: 100px;
            height: 10px;
            background-color: #ff7272;
            transition: all 1s ease-in-out;
            animation: progress-line 1.5s infinite ease-in-out;
        }

        .menu {
            position: relative;
            z-index: 2;
            height: 50px;
            margin-top: 20px;
            display: flex;
            justify-content: space-around;
        }

        .menu .group {
            width: 150px;
            height: 50px;
            overflow: hidden;
            line-height: 50px;
            text-align: center;
            background-color: white;
            color: dodgerblue;
            transition: all 0.3s ease;
        }

        .menu .child {
            height: 50px;
            background-color: white;
            border-top: 1px solid #efefef;
            color: dodgerblue;
            transition: all 0.5s ease;
        }

        .menu .group:hover {
            height: 200px;
            background-color: dodgerblue;
            color: white;
            box-shadow: 0 0 6px #ddd;
        }

        .menu .child:hover {
            background-color: #cbdcff;
            font-size: 1.08em;
        }

        .grid {
            position: relative;
            margin-top: 20px;
        }

        .grid .cell {
            display: inline-block;
            position: absolute;
            left: 0;
            top: 0;
            width: 190px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background-color: white;
            margin-right: 15px;
            margin-bottom: 15px;
            transition: all 0.5s ease;
            cursor: pointer;
        }

        .grid .cell:nth-child(3n) {
            margin-right: 0;
        }
    </style>
</head>
<body>
<script>
    function addCell() {
        var cell = document.createElement('div');
        cell.className = 'cell';
        cell.innerText = '点我删除';
        cell.onclick = function (ev) {
            deleteCell(cell);
        };
        cell.style.transform = 'scale(0)';

        var grid = document.getElementById('grid');
        // 获取当前所有子元素
        var children = grid.getElementsByClassName('cell');
        var first = null;
        if (children.length > 0) {
            first = children.item(0);
        }
        grid.insertBefore(cell, first);

        // 延迟改变大小
        setTimeout(function () {
            cell.style.transform = 'scale(1)';
        }, 10);
        updateCellPosition();
    }

    function deleteCell(cell) {
        cell.style.transform = 'scale(0)';
        cell.style.opacity = '0';
        setTimeout(function () {
            cell.parentElement.removeChild(cell);
            updateCellPosition();
        }, 100);

    }

    function updateCellPosition() {
        var grid = document.getElementById('grid');
        // 获取当前所有子元素
        var children = grid.getElementsByClassName('cell');
        for (var i = 0; i < children.length; i++) {
            var col = i % 3; // 计算列
            var row = parseInt(i / 3); // 计算行
            children.item(i).style.setProperty('left', col * 205 + 'px');
            children.item(i).style.setProperty('top', row * 115 + 'px');
        }
    }
</script>
<div class="container">
    <div>虽然我们公司产品不太注重动画效果的实现，但是一点点动画效果，会给页面体验带来很大的改变</div>

    <div style="margin-top: 50px">鼠标滑动一下，看看他们的区别</div>
    <div class="gallery">
        <img src="http://182.150.46.240:40062/filestore/public/sale/cmdty/list/AGC2015/PC/AGC2015/AGC2015_1593411467496.jpg">
        <img src="http://182.150.46.240:40062/filestore/public/sale/cmdty/list/AGC2015/PC/AGC2015/AGC2015_1593411467496.jpg">
    </div>
    <div style="margin-top: 20px">而右边只比左边多了一句代码，何乐而不为？</div>
    <div style="margin-top: 20px">而在css中，很多属性都可以作为动画实现，包括尺寸、颜色、透明度，角度、阴影等等。合理运用动画可以给用户更好的体验</div>

    <div style="margin-top: 50px">加载进度</div>
    <div class="progress">
        <div class="line"></div>
    </div>
    <div style="margin-top: 50px">滑过展开的菜单</div>
    <div class="menu">
        <div class="group">
            <div>公司介绍</div>
            <div class="child">关于我们</div>
            <div class="child">企业文化</div>
            <div class="child">招贤纳士</div>
            <div class="child">联系方式</div>
        </div>
        <div class="group">
            <div>产品中心</div>
            <div class="child">宗易汇</div>
            <div class="child">E现货</div>
            <div class="child">MEBS6大融合</div>
            <div class="child">竞价系统</div>
        </div>
        <div class="group">
            <div>服务体系</div>
            <div class="child">软件服务</div>
            <div class="child">硬件集成</div>
            <div class="child">系统维护</div>
            <div class="child">业务顾问</div>
        </div>
    </div>

    <div style="margin-top: 50px">列表项添加删除动画
        <button onclick="addCell()">点我添加</button>
    </div>

    <div class="grid" id="grid">
        <div class="cell" onclick="deleteCell(this)">点我删除</div>
    </div>
</div>

<script>
</script>
</body>
</html>

JS事件监听

效果图
代码块


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
    <link href="common.css" rel="stylesheet" type="text/css">
    <script src="tip.js"></script>
    <style>
        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #efefef;
            font-size: 14px;
        }

        h3 {
            margin-top: 50px;
        }

        .container {
            background-color: white;
            width: 664px;
            height: 200%;
            margin: 0 auto;
            padding: 16px;
            box-sizing: border-box;
        }

        .div-scroll {
            width: 80%;
            height: 200px;
            margin: 0 auto;
            background-color: #f8f8f8;
            overflow-y: scroll;
        }

        .div-scroll div {
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div>Vue中事件监听和原生JS有很大区别，但是也需要对原生监听有一定了解，之后深入学习vue的实现能理解更透彻</div>
    <h3>监听按钮点击</h3>
    <button onclick="onButtonClick()">点我点我</button>

    <h3>监听输入框改变</h3>
    <input type="text" oninput="onInputChange(this.value)">
    <div>你输入的内容是：<span id="input-content"></span></div>

    <h3>监听键盘点击</h3>
    <div>你按了<span id="key-content"></span>键</div>

    <h3>监听窗口大小变化</h3>
    <div>通常会用于根据窗口动态计算高度</div>
    <div id="size"></div>
    <h3>监听页面滚动</h3>
    <div id="scroll"></div>
    <button onclick="document.documentElement.scrollTop = 0">点我置顶</button>

    <h3>监听Div滚动</h3>
    <div id="div-scroll"></div>
    <button onclick="document.getElementById('div-scroll-layout').scrollTop = 0">点我置顶</button>
    <div id="div-scroll-layout" class="div-scroll" onscroll="setDivScroll(this)">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</div>

<script>

    function onButtonClick() {
        alert('点击了按钮')
    }

    function onInputChange(input) {
        document.getElementById('input-content').innerText = input;
    }

    window.onkeydown = function (ev) {
        document.getElementById('key-content').innerText = ev.key;
    };

    function setSize() {
        document.getElementById('size').innerText = '宽度:' + document.documentElement.clientWidth +
            '  高度:' + document.documentElement.clientHeight;
    }

    setSize();
    window.onresize = setSize;

    function setScroll() {
        document.getElementById('scroll').innerText = '当前页面滚动位置:' + document.documentElement.scrollTop
    }

    setScroll();
    window.onscroll = setScroll;

    function setDivScroll(element) {
        document.getElementById('div-scroll').innerText = '当前DIV滚动位置:' + element.scrollTop
    }

    setDivScroll(document.getElementById('div-scroll-layout'));
</script>
</body>
</html>

画布简介

效果图
代码块


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画布简介</title>
    <link href="common.css" rel="stylesheet" type="text/css">
    <style>

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            background-color: #efefef;
            font-size: 14px;
        }

        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .canvas-container {
            width: 800px;
            height: 600px;
            background-color: #333;
        }
    </style>
</head>
<body>
<div>画布也许在项目中不常用到，但是在做行情之类复杂图标绘制时，就会使用，这里简单展示一下</div>
<canvas id="quotation" class="canvas-container" width="800px" height="600px">
</canvas>


<script>
    var canvas = document.getElementById("quotation");
    canvas.width = window.devicePixelRatio * canvas.offsetWidth;
    canvas.height = window.devicePixelRatio * canvas.offsetHeight;
    canvas.getContext("2d").setTransform(window.devicePixelRatio, 0, 0, window.devicePixelRatio, 0, 0);

    var context = canvas.getContext("2d");
    var width = canvas.offsetWidth;
    var height = canvas.offsetHeight;
    context.lineWidth = '1';
    context.strokeStyle = "#fff";
    context.fillStyle = '#fff';
    // 绘制坐标线
    context.beginPath();
    context.moveTo(50.5, 10.5);
    context.lineTo(50.5, height - 20.5);
    context.lineTo(width - 20.5, height - 20.5);
    context.stroke();

    var yText = ['3875.31', '3824.24', '3812.15', '3761.76', '3592.12'];
    var itemHeight = (height - 41) / (yText.length - 1);
    context.beginPath();
    // 设置间距（参数为无限数组，虚线的样式会随数组循环）
    context.setLineDash([8, 8]);
    for (var i = 0; i < yText.length; i++) {
        var textWidth = context.measureText(yText[i]).width;
        var y = itemHeight * i + 20.5;
        // 绘制纵坐标
        context.fillText(yText[i], 45 - textWidth, y);
        if (i < yText.length - 1) {
            context.moveTo(50.5, y);
            context.lineTo(width - 20.5, y);
        }
    }
    context.stroke();

    var xText = ['09:30', '10:30', '11:30', '12:30', '13:30', '14:30', '15:30']
    var itemWidth = (width - 71) / (xText.length - 1);

    for (var i = 0; i < xText.length; i++) {
        var textWidth = context.measureText(xText[i]).width;
        var x = itemWidth * i + 50.5 - textWidth / 2;
        var y = height - 10.5;
        // 绘制纵坐标
        context.fillText(xText[i], x, y);
    }

    context.beginPath();
    context.setLineDash([]);
    var count = 300;
    var yBase = (height - 41) / 2;
    var xSpace = (width - 71) / 300;
    context.moveTo(50.5, yBase);
    for (var i = 0; i < count; i++) {
        yBase += (Math.random() - 0.5) * 50;
        if (yBase > height - 20.5) {
            yBase = height - 20.5;
        }
        context.lineTo(50.5 + xSpace * (i + 1), yBase);
    }

    context.stroke();
</script>
</body>
</html>

灬一抹丶清风

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS学习

CSS相关学习flex布局flex简单运用flex-wrap自动换行flex-grow的运用flex对齐方式综合布局后台框架布局基础表单布局滚动实现网格布局手机框架布局动画简介JS事件监听画布简介flex布局flex简单运用效果图代码块<!DOCTYPE html><html><head><meta charset="utf-8"> <title>flex学习</title><style>
复制链接

扫一扫