html学习 第一个input js css 入门

1.html 的 input 

2.css的图标背景和发float   

3.js取值 

4.js计时器,文字滚动实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

<!--<link rel="stylesheet" href="css1.css">-->
<style>
.left_1 {
float: left;
}

.right_1 {
float: right;
}
</style>
</head>
<body>
<div id="headline" style="text-align:center;font-size: large">欢迎经理莅临指导!</div>
<div style="height:35px;width:400px;position: relative;">
<div><input id="search_value" type="text" class='left_1' style="height:35px;width:320px;padding-right: 30px;"></div>
<div><input type="button" class="right_1" style="width: 44px;height: 41px " onclick="GetData();" value="提交"/></div>
<div style="clear: both"></div>

<span style="position: absolute;right: 50px;top:11px; background-image: url(camera.png) ;height: 20px;width: 18px ;display: inline-block"> </span>
</div>
<script>
function GetData() { <!-- 获取数据弹出框 -->
var i = document.getElementById('search_value');
alert(i.value);
}

function f1() { <!--滚动-->
var tag = document.getElementById('headline'); <!-- 获取数据弹出框 -->
var content = tag.innerText;
var f = content.charAt(0); <!--取首个字符-->
var l = content.substring(1, content.length);
var content_new = l + f; <!--把首个字符放在最后-->
tag.innerText = content_new;
}

setInterval('f1()', 1000)
<!--定时器 1000ms执行一次 -->

</script>
<!--<script src="js1.js"></script>-->
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/a10086/p/9380423.html