【JavaScript】大小写转换|css:输入框发光效果

最新推荐文章于 2024-10-17 09:40:47 发布

赤焰梦

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量251

点赞数

分类专栏： HTML/CSS/Javascript 文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_49442965/article/details/127302217

版权

HTML/CSS/Javascript 专栏收录该内容

58 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style type="text/css">
	.hh input{
		 outline-style: none ;
    border: 1px solid #ccc; 
    border-radius: 3px;
    padding: 13px 14px;
    width: 620px;
    font-size: 14px;
    font-weight: 700;
    font-family: "Microsoft soft";
	}
	/*设置输入框点击发光效果*/
	.hh input:focus{ 
	transition:border linear .2s,box-shadow linear .5s;
    -moz-transition:border linear .2s,-moz-box-shadow linear .5s;
    -webkit-transition:border linear .2s,-webkit-box-shadow linear .5s;
    outline:none;border-color:rgba(253,215,5,.75); //输入框边框颜色
    box-shadow:0 0 10px rgba(253,215,5,.105); //向外漫射程度1
    -moz-box-shadow:0 0 10px rgba(253,215,5,.5);//向外漫射程度2
    -webkit-box-shadow:0 0 10px rgba(253,215,5,3);//向外漫射程度3 
		/*border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)*/
	}
	.dor input{
		width: 147px; /* 宽度 */
	height: 40px; /* 高度 */
	border-width: 0px; /* 边框宽度 */
	border-radius: 3px; /* 边框半径 */
	background: #1E90FF; /* 背景颜色 */
	cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
	outline: none; /* 不显示轮廓线 */
	font-family: Microsoft YaHei; /* 设置字体 */
	color: white; /* 字体颜色 */
	font-size: 17px;
	}

.dor input:hover { /* 鼠标移入按钮范围时改变颜色 */
	background: #5599FF;
}
</style>
<body>
	<h2>大小写转换</h2>
原数据：<div class="hh"><input type="text" id="old" placeholder="请输入英文字母"></div>
<br>
<div class="dor">
<input type="button" value="转大写" οnclick="supper()">
<input type="button" value="转小写" οnclick="lower()">
</div>
<br>
新数据：<div class="hh"><input type="text" id="new" placeholder="转换后的结果"></div>
</body>
<script type="text/javascript">
	
	function supper(){
		var str=document.getElementById('old').value;
         str=str.toUpperCase();
         document.getElementById('new').value=str; 
	}
	function lower(){
		var str=document.getElementById('old').value;
         str=str.toLowerCase(); 
         document.getElementById('new').value=str;
	}

</script>
</html>