原生前端练习

最新推荐文章于 2023-04-15 22:52:22 发布
最新推荐文章于 2023-04-15 22:52:22 发布
阅读量178 收藏
点赞数
分类专栏： html-css-js 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44002250/article/details/119972788
版权

虽然原生的js css html 简单 但是万层高楼平地起，如果连基础都弄不明白又何去学vue react 等整合前端呢？
响应式：
效果图：
在这里插入图片描述
在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="cn" xmlns:c="http://www.w3.org/1999/XSL/Transform">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>调色盘</title>
    <script src="/js/jquery-3.5.1.js"></script>
    <link rel="stylesheet" href="/myfont/iconfont.css">
    <link rel="stylesheet" href="/css/color.css">
    <script src="/js/color.js"></script>
</head>
<body>

<div class="parent">
    <div class="search">
        <div class="searchForm">
            <input type="text" id="searchText" placeholder="颜色名字或16进制"><button id="btn" class="btn iconfont"></button>
        </div>

        <div class="colorPinkDiv">
            <input type="color" class="colorPink" value="#2aabd2"><label>点击此处挑选颜色</label>
        </div>

        <p style="text-align: left;text-indent: 1em;padding: 0 3px">挑选你喜欢的颜色吧!
        如果找不到你的颜色,或你有其他好看样式,或者里面样式有错,请在下方留言吧!</p>
        <div style="width: 100%;height: 90px;position: relative;">
            <textarea class="liuYan"></textarea>
            <button id="sub" class="sub iconfont" style="border: none;position: absolute;top:10px;right: 3px;font-size: 18px"></button>
        </div>
<script>

</script>

    </div>
    <div class="colorContent"></div>
</div>
</body>
</html>

css:

* {
    background-color: transparent;
    margin: 0;
    padding: 0;
}
div {
    border: 1px solid hsla(0,0%,100%,0);
    border-radius: 2px;
}

@media screen and (max-width: 767px){
    .parent {
        width: 100%;
    }
    .colorContent {
        width: 90%;
    }
    .colorDiv {
        width: 100%;
    }
    .search {
        width: 70%;
    }
}
@media screen and (min-width: 768px){
    .parent {
        width: 750px;
    }
    .colorContent {
        /*width: 604px;*/
        width: 90%;
    }
    .search {
        width: 550px;
    }
}
@media screen and (min-width: 992px){
    .parent {
        width: 970px;
    }
    .colorContent {
        width: 730px;
    }
    .search {
        width: 230px;
    }

}
@media screen and (min-width: 1200px){
    .parent {
        width: 1170px;
    }
    .colorContent {
        width: 920px;
    }
    .search {
        width: 240px;
    }
}

.parent {
    margin: 0 auto;
    height: 100%;
    text-align: center;
    /*background-image: url("/texture.png");*/
    background-color: #dddddd;
    transition: background-color 1.5s ease 0.5s;
}
.colorDiv {
    margin: 10px 0;
    padding: 0;
    width: 300px;
    height: 40px;
    text-align: center;
}
.searchColorDiv {
    margin: 3px 0;
    padding: 0;
    width: 100%;
    height: 40px;
    text-align: center;
}

.search {
    display: inline-block;
    position: relative;
    top: 10px;
    vertical-align: top;
    height: 100%;
    background-color: #a7a8bd;

}
.colorContent {
    position: relative;
    top: 0px;
    vertical-align: top;
    text-align: center;
    /*background-color: #8c4356;*/
    background-color: transparent;
    display: inline-block;
}
.colorDivs{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-around;
}
.color {
    display: inline-block;
    width: 33.4%;
    height: 40px;
    margin: 0 3px;
    background-color: #f0a1a8;
}

.colorName {
    height: 40px;
    width: 16.6%;
    display: inline-block;
    background-color: #fff;
    vertical-align: top;
    line-height: 40px;

}
.colorNum {
    height: 40px;
    display: inline-block;
    background-color: #fff;
    vertical-align: top;
    line-height: 40px;
    width: 30%;
}
.copy {
    height: 40px;
    display: inline-block;
    vertical-align: top;
    background-color: #fff;

}
.copyBtn {
    display: none;
    height: 40px;
    border: none;
}
.copyBtn:before {
    content: '\e701';
}
.colorNum:hover .copyBtn{
    display: inline-block;
}

.searchForm {
    display: block;
    border: 1px solid hsla(0,0%,100%,0);
    border-radius: 2px;
    border: none;
    background-color: #fff;
    margin: 4px;
    height: 27px;
}
#searchText {
    height: 100%;
    width: 80%;
    border: none;
    outline: none;
}
.btn {
    height: 100%;
    border: none;
    width: 20%;
    background-color: #a7a8bd;

}
.btn:before {
    content: "\e60a";
}
.sub:before{
    content: "\e624";
}

.liuYan {
    border: 1px solid hsla(0,0%,100%,0);
    border-radius: 2px;
    width: 96%;
    margin-top: 5px;
    outline: none;
    height: 80px;
    background-color: white;
}
.colorPinkDiv {
    /*以下用于label居中*/
    margin-left: 3px;
    align-items: center;
    justify-content: start;
    display: flex;/*兼容IE*/
    display: -webkit-flex;
}
.colorPink {
    width: 50px;
    border: 1px solid hsla(0,0%,100%,0);
    border-radius: 2px;
    height: 27px;
}

js：

$(function () {
    var parent = document.querySelector('.parent');
    var colorContent = document.querySelector('.colorContent');
    var colorDivs = document.createElement('div');
    colorDivs.className = 'colorDivs';
    colorContent.appendChild(colorDivs);
    var colors;
    //加载数据
    $.ajax({
        //接口地址
        type: "get",//请求方式
        url: "/json/colors.json",//地址，就是json文件的请求路径
        dataType: "json",
        success: function (data) {
            colors = data;
            for (var i=0;i<data.length;i++){

                var colorDiv = document.createElement('div')
                colorDiv.className = 'colorDiv';
                colorDivs.appendChild(colorDiv);

                var colorName = document.createElement('div');
                colorName.className = 'colorName';
                colorName.innerText = data[i]['name'];
                colorDiv.appendChild(colorName);

                var color = document.createElement('div');
                color.className = 'color';
                color.style.backgroundColor = data[i]['value'];
                colorDiv.appendChild(color);

                color.addEventListener('mouseover',function () {
                    parent.style.backgroundColor = this.style.backgroundColor;
                })
                color.addEventListener('mouseout',function () {
                    parent.style.backgroundColor = '#dddddd';
                })

                var colorNum = document.createElement('div');
                colorNum.className = 'colorNum';
                colorNum.innerText =  data[i]['value'];
                colorDiv.appendChild(colorNum);

                var copyBtn = document.createElement('button');
                copyBtn.className = 'copyBtn iconfont';
                colorNum.appendChild(copyBtn);
                copyBtn.addEventListener('click',function () {
                    MyCopy(this.parentNode.parentNode.children[2].innerText);
                });
            }
        },
        error: function (returndata) {
            alert('网络异常稍后再试');
        }
    });
    //搜索
    var btn = document.getElementById('btn');
    btn.addEventListener('click',function (){
        var text = document.getElementById('searchText');
        var data = searchColor(text.value,colors);
        var search = document.querySelector('.search');
        var old = document.querySelector('.searchColorDiv')
        if(old!=null){
            search.removeChild(old);
        }

        var colorDiv = document.createElement('div')
        colorDiv.className = 'searchColorDiv';
        search.appendChild(colorDiv);
        for (var i=0;i<data.length;i++){
            var colorName = document.createElement('div');
            colorName.className = 'colorName';
            colorName.innerText = data[i]['name'];
            colorName.style.width='52px';
            colorDiv.appendChild(colorName);

            var color = document.createElement('div');
            color.className = 'color';
            color.style.backgroundColor = data[i]['value'];
            color.style.width='30%';
            colorDiv.appendChild(color);

            color.addEventListener('mouseover',function () {
                parent.style.backgroundColor = this.style.backgroundColor;
            })
            color.addEventListener('mouseout',function () {
                parent.style.backgroundColor = '#dddddd';
            })

            var colorNum = document.createElement('div');
            colorNum.className = 'colorNum';
            colorNum.innerText =  data[i]['value'];
            colorNum.style.width =  '90px';
            colorDiv.appendChild(colorNum);

            var copyBtn = document.createElement('button');
            copyBtn.className = 'copyBtn iconfont';
            colorNum.appendChild(copyBtn);
            copyBtn.addEventListener('click',function () {
                MyCopy(this.parentNode.parentNode.children[2].innerText);
            });
        }
        return false;
    })

    //留言
        var sub = document.getElementById('sub');
        sub.addEventListener('click',function (){
            var textarea = document.querySelector('.liuYan');
            if(textarea.value.length==0){
                alert('请输入内容!');
            }else {
                $.ajax({
                    url: '/liuYan',
                    data:{
                        'liuYan':textarea.value,
                    },
                    success:function (data){
                        alert(data);
                    }
                });
            }
            return false;
        });

});


function MyCopy(content) {
    const input = document.createElement('input')
    document.body.appendChild(input)
    input.setAttribute('value', content)   //内容
    input.select()
    if (document.execCommand('copy')) {
        document.execCommand('copy')
    }
    document.body.removeChild(input)
    alert('复制成功');
}

function searchColor(color,colors) {
    var list = [];
    console.log(color);
    for (var i=0;i<colors.length;i++){
        if (colors[i]['name']==color){
            list.push(colors[i])
        }
        if (colors[i]['value']==color){
            list.push(colors[i])
        }
    }
    return list;
}
@LitterFisher
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第一篇：原生JS到Vue前端工程化开发
weixin_63566741的博客
08-02 823
当前最为主流的开发模式是前后端分离开发：前端工程和后端工程。前端工程要通过发送异步请求消息，后端工程进行处理后再返回响应消息，实现前后端的数据交互。 这样前端工程与后端工程就由独立的团队进行开发，所以在开发过程中要实现对接功能必须遵守开发规范，开发规范根据产品经理提供的页面原型与功能需求，定义在专门的文档当中，称为接口文档。接口文档中定义了各个接口功能，描述功能的基本信息，请求参数，响应数据。
web前端原生开发基础（一）
姜大大的博客
04-14 832
1. 鼠标悬停练习 对页面元素的调用 <head> <meta charset="UTF-8"> <title>鼠标提示框</title> <style> #div1 { width:200px; height:100px; background:#ccc; border:1px solid #999;/*边框*/ display:none;/*不显示 */ } </s
前端原生开发解决方案
全栈空间
01-17 2260
Web 原生开发解决方案从 2012 年开始，H5 成为 html 最后一个稳定版本，不再兼容之前的 API，从此诞生的每一个新 API，一旦结束试验期将永远存在，2015 年 ES6 的...
[HTML、CSS]知识点
进步*于辰的博客
04-15 1万+
如果文中阐述不全或不对的，多多交流。
咬文嚼字vue系列(一)
sjpeter的专栏
07-17 379
1.基础知识 AMP，CMP，UMP的由来 AMD是RequireJS在推广过程中对模块定义的规范化产出，AMD是异步加载模块，推崇依赖前置。 CMD是SeaJS在推广过程中对模块定义的规范化产出，对于模块的依赖，CMD是延迟执行，推崇依赖就近。 UMD是AMD和CommonJS的一个糅合。AMD是浏览器优先，异步加载；CommonJS是服务器优先，同步加载。 dom模板与字符串模板 HT...
仿联想首页练习(原生项目)
03-13
基于HTML、CSS、JS的原生项目，联想商城首页内容，可供参考学习。 内置包含少量js效果（轮播图），以及原生css，该项目仅供参考学习，如有疑问，请及时联系博主更改。
原生js练习：”贪吃蛇“小项目
01-24
内含贪吃蛇素材，标准的 html， css， js， 适合使用原生JavaScript进行小项目练习，有一点JavaScript基础的同学练习使用
frontend-training：前端练习项目
02-15
前端训练前置练习项目仿拉勾网首页仿照拉勾网pc端的首页和登录页，参照千锋教育的一个实战课程技术栈：HTML + CSS总结：在父级元素内，子元素（块级）水平居中的方法是使用绝对定位，left属性设置为50％，margin-...
用于练习的原生js五子棋
10-04
妖妖新手，用于练习。
little-function_little_前端练手小功能_
09-29
基于原生的JavaScript编写的网页小功能，适合前端新手练习
原生前端实现响应式个人简历网站设计(附源码)
qq_51490212的博客
06-06 1001
用原生前端做出来的网站,响应式+光暗模式+服务端部署+自己做的遮罩层
我希望我知道的七个JavaScript技巧 译(转)
weixin_30835923的博客
04-24 309
23 April 2014 如果你是一个JavaScript新手或仅仅最近才在你的开发工作中接触它，你可能感到沮丧。所有的语言都有自己的怪癖（quirks）——但从基于强类型的服务器端语言转移过来的开发人员可能会感到困惑。我就曾经这样，几年前，当我被推到了全职JavaScript开发者的时候，有很多事情我希望我一开始就知道。在这篇文章中，我将分享一些怪癖，希望我能分享给你一些曾经令我头痛不已的经...
程序员去国企面试，看到工作环境后：给多少工资也不去，评论炸锅
weixin_44946117的博客
05-23 5405
现如今很多在互联网的程序员，其实都是比较向往去国企的，尤其是那种年龄超过35的程序员，他们追求的可能不是高收入，而且稳定的工作以及能有时间陪家人。毕竟这些程序员打拼多年，多少都有一点身价了。 最近在职场论坛上看到这样一个案例：程序员去国企面试，跟领导谈完技术，看到工作环境之后：给多少工资也不去，网友评论炸锅了！这到底是怎么回事呢？ 原来这位员工今天去国企面试了，当时面试的领导问他要多少工资时，面...
前端写一个月的原生 Android 是怎样一种体验？
phodal
01-08 8464
一个前端程序员的一个月原生 Android 开发体验。自从我写了 Android 应用后，上知乎的时间变得更长了。自从我写了 Android 应用后，上知乎的时间变得更长了。哦，不对，你理解错了，我的意思是：编译代码、打包 APK、运行在设备上需要时间。可不像前端，一保存代码，就自动刷新页面。是的，从上上周一开始，因为项目缺人的原因，作为一个有 Java 开发经验的大前端，我又又双叕进入了原生 A
原生 JS总结
qq_43696106的博客
04-19 1万+
=============== 通知： 博主已迁至《掘金》码字，博客园可能以后不再更新，掘金地址：https://juejin.im/post/5a1a6a6551882534af25a86b 请多多关照！！ -------------------在此谢过！----------- 前言：随着前端市场日新月异的发展，现如今的市场要的不只是会切切图的小仔、小妹了，而是需要真正懂原生js闭包，继承，原...
原生JS总结
热门推荐
TwentyOne__的博客
07-02 1万+
第一章 1.JS是一种编程语言，主要生成一些特效，完成用户和页面的交互 2.引入： 内部脚本 外部脚本 <script type ="text/javascript" src=""> </script> 浏览器内核：渲染引擎 JS引擎 ...
每天10个前端知识点：原生篇(1)
无媛无故
01-08 514
关于原生js的10个知识点，每周更新2次。
原生JS学习记录
weixin_41697424的博客
11-08 982
1. JS 中的内置对象            例：            document 对象                   输出                   document.write("Hello World");                   元素                   根据name获取元素的 数组                    ...
使用javascript原生实现一个模板引擎
前端-后端学习之路
09-27 596
模板引擎分为前端和后端的，前端常用的模板引擎如artTemplate,juicer渲染是在客户端完成的；后端的模板引擎如基于PHP的smarty,渲染是服务器完成的。前两天看到一篇博客挺好的是用了不到20行代码实现一个前端的模板引擎，感觉挺有趣的，今天就来实现下1.简单的例子逻辑var tplEngine = function(tpl, data) { var re = /<%([^
前端 原生ui库 源码
最新发布
05-16
前端原生UI库源码指的是前端开发中使用的原生UI框架的代码。前端开发是指在Web端或移动端开发过程中，使用HTML、CSS、JavaScript等技术构建用户界面、实现交互和动画效果的全部工作。而UI库则是指一套可以快速构建出...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值