【前端】简单原生实例合集html,css,js
长期补充，建议关注收藏点赞。
目录
- 分栏
- input各种类型
- iframe
- 表单
- 拖拽
分栏
- 区分fieldset和frameset
- frameset是把浏览器窗口分成几个区域，每个区域分别放置一个html文档到对应的frame中，而且这个比例可以按住边栏进行调整
- col指定左右边栏的宽度
</head>
<frameset cols="25%,75%">
<frame src="注册A.html" />
<frame src="注册B.html" />
</frameset>
input各种类型
- 对于 type=“button” 的 < input> 元素，value 属性设置的是按钮上显示的文本。
-所有的单选按钮radio的 name 属性值相同，这意味着这些按钮是一个组，用户只能选择其中的一个。
<input type="button" value="alert" id="alerta" onclick="alert('我被点击啦！')">
<input type="button" value="confirm" id="confirma" onclick="confirm('确定要删除吗？')">
<input type="button" value="prompt" id="prompta" onclick="prompt('请输入用户名：')">
<label for="pga"><input type="radio" name="fruit" value="pga" id="pga">苹果A</label>
<label for="jza"><input type="radio" name="fruit" value="jza" id="jza">橘子A</label>
<label for="xja"><input type="radio" name="fruit" value="xja" id="xja">香蕉A</label>
<p>
<!--name:value -->
<input type="checkbox" name="hobby" value="汽车" id="qcA">汽车A
<input type="checkbox" name="hobby" value="购物" id="gwA">购物A
</p>
<input type="file" name="upfilea" />
iframe
- a中的target对应iframe的name,表明这个链接在哪个iframe里加载
<a href="http://www.sina.com.cn" target="myframe1">新浪</a>
<a href="http://www.hao123.com" target="myframe1">hao123</a>
<a href="http://www.taobao.com" target="myframe2">淘宝</a>
<a href="http://www.baidu.com" target="myframe2">百度</a><br>
<iframe src="注册A.html" frameborder="1" height="500" width="48%" name="myframe1" id="idframe1" class="cframe"></iframe>
<iframe src="注册B.html" frameborder="1" height="500" width="48%" name="myframe2"></iframe>
表单
- 总结
- label 的 for 属性和 input 的 id 属性应该对应。
这样对应的作用是：当用户点击 < label> 时，浏览器会自动把焦点转到对应的 < input> 元素。 - input的name是指定表单提交时，在服务器端接收这个字段的数据时会使用这个名字。
- required=“”：这个属性意味着用户在提交表单之前，必须填写这个字段,如果没填写提交后会弹出提示tooltip
- button中的value 属性在实际提交表单时作为按钮的值传递给服务器。
button如果同时有name和value，则提交表单时，服务器会收到 name值=value值 的数据。
<form action="">
<div id="zc">
<fieldset>
<legend>注册用户</legend>
<p id="p1">
<label for="user">账号</label>
<input type="text" name="user" id="user" placeholder="账号" required="" value="">
</p>
<p>
<label for="password">密码</label>
<input type="password" name="password" id="password" placeholder="密码" value="">
</p>
<p>
<button type="submit" value="注册">注册</button>
<button type="submit" name="action" value="register">注册</button>
<hr>
</p>
<p><a href="注册A.html" id="ZCA" target="_blank">注册A页面</a></p>
<p><a href="注册B.html" id="ZCB" target="_blank">注册B页面</a></p>
</fieldset>
</div>
</form>
拖拽
<!--第1种-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽div</title>
<style type="text/css">
div{
position:absolute;
width:150px;
height:150px;
background-color:red;
}
</style>
<script type="text/javascript">
function drag(obj)
{
if (typeof obj == "string") {
var obj = document.getElementById(obj);
obj.orig_index=obj.style.zIndex;///原始z-index
}
obj.onmousedown=function (e){
//鼠标按下
this.style.cursor="move";//设置鼠标样式
this.style.zIndex=1000;//设置当前对象永远显示在最上层
var d=document;
if(!e) e=window.event;
//按下时创建一个事件
var x=e.clientX-document.body.scrollLeft-obj.offsetLeft;
//x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距
var y=a.clientY-document.body.scrollTop-obj.offsetTop;
//y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距
d.onmousemove=function(e){//鼠标移动
if(!e) e=window.event;//移动时创建一个事件
obj.style.left=e.clientX+document.body.scrollLeft-x;
obj.style.top=e.clientY+document.body.scrollTop-y;
}
d.onmouseup=function (){//鼠标放开
document.onmousemove=null;
document.onmouseup = null;
obj.style.cursor="normal";//设置放开的样式
obj.style.zIndex=obj.orig_index;//回归原始z-index
}
}
}
</script>
</head>
<body>
<div id="div1" style="width:100px;height:100px;z-index:99"> </div>
<div id="div2" style="left:170px; background-color:blue; z-index:98"></div>
<script type="text/javascript">
drag("div1");
drag("div2");
</script>
</body>
</html>
<!--第2种-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>拖拽实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box{
width:100px;
height:100px;
background: red;
position: absolute;
top:0;
}
.left{
left:0;
}
.right{
right:0;
}
</style>
<script>
</script>
</head>
<body>
<div id="div1" class="box left">DIV1</div>
<div id="div2" class="box right">DIV2</div>
<script>
//普通拖拽 -- 父类
class Drag{
constructor(id){
this.oDiv = document.querySelector(id);
this.disX = 0;
this.disY = 0;
this.init();
}
init(){
this.oDiv.onmousedown = function(ev){
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
//ev.clientX 是鼠标在页面上的水平位置
//this.oDiv.offsetLeft 是目标元素距离页面左边的距离
//通过相减就得到了鼠标点击点和元素左边缘之间的水平距离。
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
return false;
}.bind(this);
}
fnMove(ev){
this.oDiv.style.left = ev.clientX - this.disX+'px';
this.oDiv.style.top = ev.clientY - this.disY+'px';
}
fnUp(){
document.onmousemove=null;
document.onmouseup=null;
}
}
//子类—— 限制范围
class LimitDrag extends Drag{
fnMove(ev){
super.fnMove(ev);
//限制范围
if(this.oDiv.offsetLeft<=0){
this.oDiv.style.left =0;
}
}
}
//调用
new Drag('#div1');
new LimitDrag('#div2');
</script>
</body>
</html>
第二种封装更专业，但少考虑了滚动条的影响，比第一种多考虑了限制范围。