js逐步实现原生控制系统(html逻辑 css逻辑 js逻辑)

简介: js逐步实现原生控制系统(html逻辑 css逻辑 js逻辑)

html第一部分:

<h1>Update CSS Variables with <span>JS</span></h1>
    <form class="controls">
        <label for="spacing">Spacing:</label>
        <input type="range" id="spacing" name="spacing" min="0" max="200" value="10" data-sizing="px">
        <label for="blur">Blur:</label>
        <input type="range" id="blur" name="blur" min="0" max="25" value="10" data-sizing="px">
        <label for="base">Base Color</label>
        <input type="color" name="base" id="base" value="#ffc600">
    </form>
    <div class="result">
        <div class="showText">{spacing:<label id="lw_spacing">#ffc600</label>}</div>
        <div class="showText">{blur:<label id="lw_blur">10px</label>}</div>
        <div class="showText">{base:<label id="lw_base">10px</label>}</div>
    </div>
    <img src="./img1.jpg" alt="">

效果:
在这里插入图片描述

注意点:会表单就行了.

css部分;

*{padding: 0px;margin: 0px;}
        :root
        {
            --base:#ffc600;
            --spacing:10px;
            --blur:10px;
        }
        span
        {
            color: var(--base);
        }
        img
        {
            width: 1125px;
            height: 549px;
            padding: var(--spacing);
            background: var(--base);
            filter: blur(var(--blur));
        }
        body
        {
            text-align: center;
            background: #193549;
            color: white;
            font-family:'helvetica neue',sans-serif;
            font-weight: 100;
            font-size: 30px;
        }
        .controls
        {
            margin-bottom: 50px;
        }
        input
        {
            width: 100px;
        }
        .result
        {
            display: flex;
            flex-direction: row;
            justify-content: center;
            color: var(--base);
        }
        .showText
        {
            margin: 0px 25px 50px 25px;
        }

效果:
在这里插入图片描述

js部分(实现逻辑):
第一:先获取到表单的所有的input标签,用来实现动态的,这里注意一下,在这里插入图片描述

这三个最后一个是用改变事件而不是移动事件.注意一下.
第二:触发事件了先看看是px的还是颜色的,这里注意一下,颜色不用后缀.
第三;然后动态的实现效果的变化.
第四;数据也相对应的变化。

相关文章
|
7天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
25 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
30天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
120 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
28天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
27天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
64 34
|
1月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
79 33
|
27天前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
35 3
|
29天前
|
前端开发
“弘五四,耀青春”程序创意获奖作品【html+css】
本作品以“青春筑梦,共创未来”为主题,采用动态龙元素展现青春活力与创新精神。页面设计简洁明快,色彩协调,突显年轻人积极向上的风貌。作品内容包括获奖截图、名字《时代扬新帆》及源代码分享。特别说明:禁止用于商业活动,可用于比赛和作业等开源场景。最后,作者表达了对五四精神的致敬与传承,强调了青春活力和创造力的重要性,并感谢评委和支持者。 **获奖感言摘录:** “获得这个奖项,对我们团队来说,既是认可也是激励。我们将继续努力,不断优化产品,为用户带来更好的体验,为社会贡献更多价值。”
32 2
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
5月前
|
JavaScript 前端开发
JavaScript HTML DOM
JavaScript HTML DOM
53 2
|
5月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
38 5

热门文章

最新文章