您的位置：首页 > Web前端

前端练习

2016-01-22 20:18 417 查看

在页面中，有一个单行输入框，一个按钮，输入框中用来输入用户的兴趣爱好，允许用户用半角逗号来作为不同爱好的分隔。

当点击按钮时，把用户输入的兴趣爱好，按照上面所说的分隔符分开后保存到一个数组，过滤掉空的、重复的爱好，在按钮下方创建一个段落显示处理后的爱好。

<input class='input'>
<button id="save">保存显示</button>
<p id="show"></p>
<script >
var save = document.getElementById("save");
save.onclick = function  () {
var input = document.querySelector('.input');
var value = input.value+"";
if(value.split(',')){
var arr = value.split(',')
var newArr = new Array();
for(var i=0;i<arr.length;i++){
if(newArr.indexOf(arr[i]) === -1){
if(arr[i] !== ""){
newArr.push(arr[i]);
}
}
}
}
var show = document.getElementById("show");
show.innerText = newArr.toString();

}
</script>

创建结点

document.createElement()方法可以创建元素，但是只接受一个参数，即要创建元素的标签名
var div = document.createElement("div");
div.id="nyNewDiv";
div.className = "box";
document.body.appendChild(div);
在ie及更早版本中可以这样,其他浏览器都不支持这样
var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div>");
创建文本节点
var textNode = document.createTextNode("hello workd");//只是文本，不会被解析为html文本的
也可以直接用innerHTML和innerText

这里我把下个练习的思路一说

<!-- 在和上一任务同一目录下面创建一个`task0002_2.html`文件，在`js`目录中创建`task0002_2.js`，并在其中编码，实现一个倒计时功能。

- 界面首先有一个文本输入框，允许按照特定的格式`YYYY-MM-DD`输入年月日；
- 输入框旁有一个按钮，点击按钮后，计算当前距离输入的日期的00:00:00有多少时间差
- 在页面中显示，距离YYYY年MM月DD日还有XX天XX小时XX分XX秒
- 每一秒钟更新倒计时上显示的数
- 如果时差为0，则倒计时停止 -->
<input class="input">
<button class="cal">计算距离输入的日期</button>
<p class="show"></p>
<script >
var input = document.querySelector(".input");
var cal = document.querySelector(".cal");
var show = document.querySelector(".show");
//获取到输入的值，用正则表达式进行验证，然后进行分隔，把每个值都算出来
//然后计算获取当前的时间年然后相减，然后把计算结果不为0放入数组，然后显示的时候用join（“-”）返回的就是字符串，方法把数组连起来显示

我的domready这样的话比那个window.onload快

function myReady(fn){

//对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
if ( document.addEventListener ) {
document.addEventListener("DOMContentLoaded", fn, false);
} else {
IEContentLoaded(fn);
}

//IE模拟DOMContentLoaded
function IEContentLoaded (fn) {
var d = window.document;
var done = false;

//只执行一次用户的回调函数init()
var init = function () {
if (!done) {
done = true;
fn();
}
};

(function () {
try {
// DOM树未创建完之前调用doScroll会抛出错误
d.documentElement.doScroll('left');
} catch (e) {
//延迟再试一次~
setTimeout(arguments.callee, 50);
return;
}
// 没有错误就表示DOM树创建完毕，然后立马执行用户回调
init();
})();

//监听document的加载状态
d.onreadystatechange = function() {
// 如果用户是在domReady之后绑定的函数，就立马执行
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
}
}
}

轮播图的制作

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- css代码书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等) -->
<style>
*{
margin:0;
padding:0;
text-decoration: none;
}
.body{
position:relative;
width:600px;
height:400px;
overflow: hidden;
}
.content{
position:absolute;
z-index: 1;
width:3000px;
height:400px;
}
.content img{
float: left;
width:600px;
height:400px;
}
.button{
position:absolute;
width:100px;
height:10px;
z-index: 2;
bottom: 20px;
left:250px;
}
.button span{
cursor: pointer;
float:left;
width:10px;
height:10px;
margin-left: 5px;
border:1px solid #fff;
border-radius: 50%;
background:#333333;
}
.button .on{
background:#ff4500;
}
.arrow{
position: absolute;
z-index: 2;
top: 180px;
display: none;
width: 40px;
height: 40px;
color: #fff;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
background-color: RGBA(0,0,0,.3);
cursor: pointer;
}
.arrow:hover{
background-color:RGBA(0,0,0,.7);
}
#con:hover .arrow{
display:block;
}
#prev{
left:20px;
}
#next{
right:20px;
}
</style>

</head>
<body>
<div class="body" id="con">
<div class="content" id="content" style="left:0">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
</div>
<div class="button" id="button">
<span index="0" class="on"></span>
<span index="1"></span>
<span index="2" ></span>
<span index="3" ></span>
<span index="4" ></span>
</div>
<a  id="prev" class="arrow"><</a>
<a  id="next" class="arrow">></a>
</div>
<button id="change">换下一张图片</button>
<script >
window.onload = function() {
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var content = document.getElementById("content");
var span = document.getElementById("button").getElementsByTagName('span');
var index = 0;//确定目前到底是在轮播哪个图片，把他作为一个全局变量

function animate(offset){
var move = parseInt(content.style.left)+ offset;
if(move > 0){
content.style.left = -2400 +'px';
}else if(move < -2400){
content.style.left = 0 +'px';
}else{
content.style.left = move +'px';
}
addOn();
}

function addOn(){
for(var i=0;i<span.length;i++){
if(span[i].className === "on"){
span[i].className="";
break;
}
}
span[index].className= "on";
}

prev.onclick=function(){
index -= 1;
if(index ===-1){
index = 4;
}
animate(600);
}
next.onclick=function(){
index = index+1;
if(index === 5){
index = 0 ;
}
console.log(index);
animate(-600);

}
var change = document.getElementById("change");
change.onclick=function(){
next.onclick();
}
}
//那种竖直方向上的移动就不用display：none了直接全部显示，把旁边的按钮设置为fix定位的，然后根据显示哪个图片亮哪个，这时要用到的技术是页面内定位的方式，每个按钮对应图片的链接，点击按钮就会到哪个页面
类似于这种代码
a标签里面的链接还可以写成这种
<li><a href="#item1" class="current">1F 男装</a></li>
<div id="item1" class="item">
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端

相关文章推荐

新的分享

章节导航