1、打开Hbuilder编辑器，创建一个input框和button按钮，将它们横排摆放在一起：
2、首先给input框添加“#7FCC0B”颜色的边框，设置宽度和高度即可，给button按钮设置白色的字体和“#7FCC0B”的背景颜色即可完成：
3、按crtl+s，在软件的右侧即可看到最终的效果。以上就是用html制作搜索框的演示：
<!doctype html><html>
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<style type="text/css">
html{
height: 100%
}
html,body,ul,li,canvas{
margin: 0
padding: 0
}
</style>
</head>
<body bgcolor="#000000">
<canvas id="knife"></canvas>
</body>
<script>
var canvas = document.getElementById("knife")
canvas.style.position = "absolute"
canvas.style.top = 0
var w = window.innerWidth
var h = window.innerHeight
canvas.width = w
canvas.height = h
var cxt = canvas.getContext("2d")
cxt.strokeStyle = "#FFF"
var list = []
var G = 0.4 //向心加速度
var SPEED_Y = -1 //向上速度
var centerLine = w/2 //龙卷风中线
function addLine(){
var LEN = 2
for(var i = 0 i <LEN i ++){
list.push({
x:w/2,
y:h/1.3,
g:G,
c:centerLine+2*Math.random(),
sx:(Math.random()-0.5)*4,
sy:SPEED_Y+0.5*(Math.random()-0.5),
len:Math.round(Math.random()*10+5),
list:[{x:w/2,y:h/1.3}]
})
}
}
function step(){
cxt.clearRect(0,0,w,h)
addLine()
var obj
for(var i = 0 i <list.lengthi ++){
obj = list[i]
if(obj.y <h/2.5){//如果超过这个高度，就删除一个点
obj.len --
if(obj.len == 0){
list.splice(i,1)
i --
continue
}
}
obj.x += obj.sx
obj.y += obj.sy
obj.sx += obj.g
obj.g = obj.x >obj.c ? -G : G
obj.list.unshift({x:obj.x,y:obj.y})//记录下质点运动轨迹
obj.list = obj.list.slice(0,obj.len)//仅仅画出其中一段线就好
//画出所有点的连线
cxt.beginPath()
cxt.moveTo(obj.list[0].x,obj.list[0].y)
for(var j = 1 j <obj.list.lengthj ++){
cxt.lineTo(obj.list[j].x,obj.list[j].y)
}
cxt.stroke()
}
requestAnimationFrame(step)
}
requestAnimationFrame(step)
</script>
</html>
<marquee>...</marquee>普通卷动<marquee behavior=slide>...</marquee>滑动
<marquee behavior=scroll>...</marquee>预设卷动
<marquee behavior=alternate>...</marquee>来回卷动
<marquee direction=down>...</marquee>向下卷动
<marquee direction=up>...</marquee>向上卷动
<marquee direction=right></marquee>向右卷动
<marquee direction=’left’></marquee>向左卷动
<marquee loop=2>...</marquee>卷动次数
<marquee width=180>...</marquee>设定宽度
<marquee height=30>...</marquee>设定高度
<marquee bgcolor=FF0000>...</marquee>设定背景颜色
<marquee scrollamount=30>...</marquee>设定滚动速度
<marquee scrolldelay=300>...</marquee>设定卷动时间
<marquee onmouseover="this.stop()">...</marquee>鼠标经过上面时停止滚动
<marquee onmouseover="this.start()">...</marquee>鼠标离开时开始滚动
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）