用css3可以直接用图片作为背景就可以了,不需要用js。解决方法如下:
1、双击打开HBuilderX开发工具,在Web项目中新建静态页面canvas.html。
2、打开已新建的canvas.html文件,修改title标签里的文字内容。
3、在<body></body>标签内,插入一个canvas标签,并设置id属性值。
4、在canvas标签下,添加script标签并初始化canvas对象,调用自带的方法。
5、保存代码并运行项目,打开浏览器查看界面效果,可以发现绘制了一条线。
6、在style标签中,利用ID选择器设置canvas样式,添加背景色设置。
7、再次保存代码文件,并刷新浏览器,可以看到canvas画布背景色发生了改变。
1、首先,需要添加一段CSS隐藏所有的Checkbox复选框。要做到点需要添加一段代码到你的CSS文件中。代码如下:
/*** 隐藏默认的checkbox***/
input[type=checkbox] {
visibility: hidden
}
2、开始创建复选框区的HTML。代码如下:
<section>
<!-- Checbox One -->
<h3>Checkbox One</h3>
<div class="checkboxOne">
<input type="checkbox" value="1" id="checkboxOneInput" name="" />
<label for="checkboxOneInput"></label>
</div>
</section>
3、用一个DIV元素包含checkbox,使用它们来做黑色条带和圆角。代码如下:
/*** Create the slider bar***/
.checkboxOne {
width: 40px
height: 10px
background: #555
margin: 20px 80px
position: relative
border-radius: 3px
}
4、当选中复选框后的判定代码。代码如下
/*** Move the slider in the correct position if the checkbox is clicked**/
.checkboxOne input[type=checkbox]:checked + label {
left: 27px
}
复选框选中前。
复选框选中后。