百度360必应搜狗淘宝本站头条
docker systemdzabbix微信报警脚本loadjsqt5.5pagination.js
当前位置：网站首页 > 技术教程 > 正文

javascript开发文字修改样式 js怎么修改文字颜色

suiw9 2024-11-04 15:26 32 浏览 0 评论

知识点：for循环语句，字符串方法，进制转换，this指向问题，变量，数组方法，基本事件处理等。

源码：

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>Document</title>

<style type="text/css">

*{margin:0px;padding:0px; font-family:"微软雅黑";}

#box{width:400px;

height:450px;

background:#000;

margin:50px auto;

border:5px solid #000;

border-radius:5px;

}

#show{width:100%;

height:190px;

background:#00ccff;

line-height:200px;

font-size:8px;

font-weight:bold;

text-align:center;

border-radius:5px;

}

#font ul{margin-left:10px;

margin-top:30px;}

#font ul li{width:380px;

height:50px;

list-style-type:none;

color:#ddd;}

#font ul li span{display:block;

width:50px;

height:50px;

line-height:50px;

text-align:right;

float:left;

}

#font ul li .roll{width:290px;

height:50px;

float:left;

line-height:50px;

padding-left:30px;

}

#font ul li .roll .move{width:200px;

height:12px;

display:inline-block;

background:#fff;

margin-left:15px;

margin-right:15px;

border-radius:10px;

background-size:cover;

border:1px solid #fff;

position:relative;

}

#font ul li .roll .move .prog{position:absolute;

top:0px;

width:0px;

height:12px;

border-radius:10px 0 0 10px;

background:url("images/slider-bar.png") bottom;}

#font ul li .roll .move .prog .but{width:22px;

height:22px;

position:absolute;

top:-3px;

background:url("images/dot-bg.png") no-repeat;

cursor:pointer;

left:0px;}

</style>

</head>

<body>

<div id="box">

<div id="show">云烟好帅啊</div>

<div id="font">

<ul>

<li>

<span>字号</span>

<div>

8

<div>

<div>

<div></div>

</div>

</div>

40px

</div>

</li>

<li>

<span>颜色R</span>

<div>

0

<div>

<div>

<div></div>

</div>

</div>

255

</div>

</li>

<li>

<span>G</span>

<div>

0

<div>

<div>

<div></div>

</div>

</div>

255

</div>

</li>

<li>

<span>B</span>

<div>

0

<div>

<div>

<div></div>

</div>

</div>

255

</div>

</li>

</ul>

</div>

</div>

</body>

<script type="text/javascript">

/*

1.JS主要针对页面当中的HTML元素以及样式进行修改，从而得到特效

2.我们一般用JS写特效，要知道触发特效的条件是什么

3.促发这个条件的对象是谁

4.写这个事件里面发生的事情

5.获取鼠标的移动水平方向的距离

6.this代表当前执行这个事件的对象

(这个事件是谁做的 那么这个事件当中的this就是谁)

*/

var oBut = document.getElementsByClassName("but");//通过元素的类名 是以一个数组的形式保存

var oFont = document.getElementById("show");//通过ID名获取元素

var oProg = document.getElementsByClassName("prog");

var width = [0,0,0,0];

var rgb = ["00","00","00"];

for (var i=0;i<oBut.length;i++)//重复执行某一个语句（循环体） 限制条件

{

oBut[i].index=i;//自定义一个index属性保存i

oBut[i].onmousedown = function(e){//鼠标点击下去

//event事件对象 clientX clientY

var e = e || window.event;//做IE兼容

this.x = e.clientX;//当前对象的属性去保存这个值(自定义一个x属性)

var thisIndex = this;//定义一个变量保存this指向对象

var lastLeft = width[this.index];

//console.log("鼠标点击下去");

document.onmousemove = function(e){//鼠标移动事件

//console.log("鼠标移动事件");

var e = e || window.event;//做IE兼容

width[thisIndex.index] = e.clientX-thisIndex.x+lastLeft;

if (width[thisIndex.index]>180)width[thisIndex.index]=180;

if (width[thisIndex.index]<0)width[thisIndex.index]=0;

oBut[thisIndex.index].style.left = width[thisIndex.index]+"px";

oProg[thisIndex.index].style.width = width[thisIndex.index]+"px";

if (thisIndex.index == 0)

{

oFont.style.fontSize = width[thisIndex.index]/180*40+8+"px";

//驼峰命名法

}else{

var num = parseInt(width[thisIndex.index]/180*255);

/*if (num<16)

{

numStr ="0"+num.toString(16);

}else{

numStr = num.toString(16);

}*/

rgb[thisIndex.index-1] = num<16?"0"+num.toString(16):num.toString(16);

oFont.style.color = "#"+rgb[0]+rgb[1]+rgb[2];

}

}

document.onmouseup = function(){//鼠标松开事件

//console.log("鼠标松开事件");

this.onmousemove = null;//终止移动事件

this.onmouseup = null;//终止鼠标松开事件

}

}

}

</script>

相关推荐

俄罗斯的 HTTPS 也要被废了?（俄罗斯网站关闭）

发布该推文的ScottHelme是一名黑客，SecurityHeaders和ReportUri的创始人、Pluralsight作者、BBC常驻黑客。他表示，CAs现在似乎正在停止为俄罗斯域名颁发...

如何强制所有流量使用 HTTPS一网上用户

如何强制所有流量使用HTTPS一网上用户使用.htaccess强制流量到https的最常见方法可能是使用.htaccess重定向请求。.htaccess是一个简单的文本文件，简称为“.h...

https和http的区别（https和http有何区别）

“HTTPS和HTTP都是数据传输的应用层协议，区别在于HTTPS比HTTP安全”。区别在哪里，我们接着往下看：...

快码住!带你十分钟搞懂HTTP与HTTPS协议及请求的区别

什么是协议？网络协议是计算机之间为了实现网络通信从而达成的一种“约定”或“规则”，正是因为这个“规则”的存在，不同厂商的生产设备、及不同操作系统组成的计算机之间，才可以实现通信。简单来说，计算机与网络...

简述HTTPS工作原理（简述https原理,以及与http的区别）

https是在http协议的基础上加了一层SSL(由网景公司开发)，加密由ssl实现，它的目的是为用户提供对网站服务器的身份认证(需要CA)，以至于保护交换数据的隐私和完整性,原理如图示。1、客户端发...

21、HTTPS 有几次握手和挥手?HTTPS 的原理什么是(高薪 常问)

HTTPS是3次握手和4次挥手，和HTTP是一样的。HTTPS的原理...

一次安全可靠的通信——HTTPS原理

为什么HTTPS协议就比HTTP安全呢？一次安全可靠的通信应该包含什么东西呢，这篇文章我会尝试讲清楚这些细节。Alice与Bob的通信...

为什么有的网站没有使用https（为什么有的网站点不开）

有的网站没有使用HTTPS的原因可能涉及多个方面，以下是.com、.top域名的一些见解：服务器性能限制：HTTPS使用公钥加密和私钥解密技术，这要求服务器具备足够的计算能力来处理加解密操作。如果服务...

HTTPS是什么?加密原理和证书。SSL/TLS握手过程

秘钥的产生过程非对称加密...

图解HTTPS「转」（图解http 完整版 彩色版 pdf）

我们都知道HTTPS能够加密信息，以免敏感信息被第三方获取。所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议。...

HTTP 和 HTTPS 有何不同?一文带你全面了解

随着互联网时代的高速发展，Web服务器和客户端之间的安全通信需求也越来越高。HTTP和HTTPS是两种广泛使用的Web通信协议。本文将介绍HTTP和HTTPS的区别，并探讨为什么HTTPS已成为We...

HTTP与HTTPS的区别，详细介绍（http与https有什么区别）

HTTP与HTTPS介绍超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的...

一文让你轻松掌握 HTTPS（https详解）

一文让你轻松掌握HTTPS原文作者：UC国际研发泽原写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。...

如何在Spring Boot应用程序上启用HTTPS?

HTTPS是HTTP的安全版本，旨在提供传输层安全性（TLS）[安全套接字层（SSL）的后继产品]，这是地址栏中的挂锁图标，用于在Web服务器和浏览器之间建立加密连接。HTTPS加密每个数据包以安全方...

一文彻底搞明白Http以及Https（http0）

早期以信息发布为主的Web1.0时代，HTTP已可以满足绝大部分需要。证书费用、服务器的计算资源都比较昂贵，作为HTTP安全扩展的HTTPS，通常只应用在登录、交易等少数环境中。但随着越来越多的重要...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表
Copyright Your WebSite.Some Rights Reserved.