|
编译器：Hbuilder（读代码中详细注释可易懂） 项目导航：
项目名称实现功能鼠标点击事件鼠标点击按钮“不好”，当点击触发时就会弹跳强制勾选一选中则不能取消漂亮的跑马灯文字加速滚动和图片滚动鼠标触摸暂停点击按钮换颜色点击不同的按钮，覆盖原来颜色，呈现新的颜色简单的搜索框获取光标后，框中提示消失；输入内容后不会消失中英文变换点击按钮切换中英文网页字体颜色大小间距变换四个经典的type，用下拉列表选择字体类型，字体大小，背景颜色和字体间距盒子碰撞检测在限定范围内碰到边框进行反弹英雄点击投票点击图片投票，票数增加网页常用布局与超链接套用常用的淘宝，京东网页布局
（1）鼠标点击事件
强制答应
#div01{
width: 250px;
height: 50px;
/*边框solid实线*/
border: 1px solid;
left: 300px;
top:300px;
position: absolute;
/*相对绝对定位*/
}
hello！请我麦当劳好不好？
function overs()
{
//随机数
var x=Math.floor(Math.random()*600);
var y=Math.floor(Math.random()*600);
//获取div对象
var div01=document.getElementById("div01");
//div的位置发生变化
div01.style.left=x+"px";
div01.style.top=y+"px";
}
function fun()
{
for(var i=0;i
//javascript脚本
//function方法关键字
//该方法是使复选框选中后不能取消
function fun01()
{
//获取当前的复选框
var ck01=document.getElementById("ck01");
//复选框对象被选中时
ck01.checked="checked";
}
function fun02()
{
//获取当前的复选框
var ck02=document.getElementById("ck02");
//复选框对象被选中时
ck02.checked="checked";
}
checked="checked"为默认选中。 但js例面的点击事件的函数中的ck01.checked="checked"即是无论是默认点中还是手动点中，一旦点中，则不可取消选择。  （3）漂亮的跑马灯
#na{
width: 100%;
height: 200%;
border: 1px solid;
}
渣渣辉在此！
function fun()
{
//获取滚动标签
var na=document.getElementById("na02");
na.stop();
}
function outs()
{
//获取滚动标签
var na=document.getElementById("na02");
na.start();
}
//加速scrollAmount滚动速度
function adds()
{
var na=document.getElementById("na");
na.scrollAmount = na.scrollAmount+40;
}
滚动标签（跑马灯）：marquee ；direction为滚动方向；scrollamount为滚动速度（一般常用的是这两个） onmouseover：鼠标放上去时触发事件 ； onmouseout：鼠标离开时触发事件 点击加速按钮可以按40的数值速度进行递增。  （4）点击按钮变换颜色
点击变换颜色
#div01
{
width: 100%;
height: 600px;
border: 1px solid;
}
#div0101
{
width: 20%;
height: 600px;
border: 1px solid;
float:left
}
#div0102
{
width: 79%;
height: 600px;
border: 1px solid;
background-color: forestgreen;
float:left;
display: block;/*显示*/
}
#div0103
{
width: 79%;
height: 600px;
border: 1px solid;
background-color: yellowgreen;
float:left;
display: none;/*隐藏*/
}
#div0104
{
width: 79%;
height: 600px;
border: 1px solid;
background-color: peru;
float:left;
display: none;/*隐藏*/
}
#div0105
{
width: 79%;
height: 600px;
border: 1px solid;
background-color: brown;
float:left;/*靠左*/
display: none;/*隐藏*/
}
function ones()
{
//显示
document.getElementById("div0102").style.display="block";
//隐藏
document.getElementById("div0103").style.display="none";
document.getElementById("div0104").style.display="none";
document.getElementById("div0105").style.display="none";
}
function twos()
{
//显示
document.getElementById("div0103").style.display="block";
//隐藏
document.getElementById("div0102").style.display="none";
document.getElementById("div0105").style.display="none";
document.getElementById("div0104").style.display="none";
}
function threes()
{
//显示
document.getElementById("div0104").style.display="block";
//隐藏
document.getElementById("div0102").style.display="none";
document.getElementById("div0105").style.display="none";
document.getElementById("div0103").style.display="none";
}
function fourths()
{
//显示
document.getElementById("div0105").style.display="block";
//隐藏
document.getElementById("div0104").style.display="none";
document.getElementById("div0103").style.display="none";
document.getElementById("div0102").style.display="none";
}
 div盒子里面的display: none;即为一开始就隐藏。 （5）搜索框
搜索框
//窗体加载事件
window.onload=function()
{
//获取对象
var ser = document.getElementById("se");
ser.value="请搜索..."
//修改字体颜色
ser.style.color="rgba(202,208,210,0.5)";
}
function foc()
{
//获取搜索框对象
var ser=document.getElementById("se");
//TimesDay timesDay驼峰命名法
//判断输入框是否等于提示（请搜索...）
if(ser.value=="请搜索...")
{
//清空数据
ser.value="";
//修改字体颜色
ser.style.color="black";
}
}
function blurT()
{
//获取当前搜索框对象
var ser = document.getElementById("se");
//如果没有值就返回请搜索...
if(ser.value.trim()=="")
{
ser.value = "请搜索...";
ser.style.color="rgba(202,208,210,0.5)";
}
}
onfocus获取光标事件；onblur失去光标事件； trim()方法是去除字符串的头尾空格。  （6）中英文变换
语言变换
中文
English
账号
密码
//工具方法
function $(id)
{
return document.getElementById(id);
}
//转英文方法
function En()
{
$("zh").innerText="ID";
$("pwd").innerText="Password";
$("OK").value="OK";
$("cancel").value="cancel";
}
//转中文方法
function Ch()
{
$("zh").innerText="账号";
$("pwd").innerText="密码";
$("OK").value="确认";
$("cancel").value="取消";
}
 innerText 为不识别标签, 在获取标签内容时去除所有标签，就是在控件中添加文字； value获取标签的value属性值，控件中的value属性直接赋值成双引号里面的东西。（一个小小的区别需要注意一下） （7）字体颜色大小间距
body
{
background-image: url(img/img1.jpg);
background-repeat: no-repeat;
background-size: 100% 260px;
background-color: aliceblue;
}
/*div没有垂直居中*/
#div01{
width:70%;
margin: auto;
margin-top: 120px;
background-color: white;
height: 1200px;
}
#div02{
width: 200px;
height: 200px;
border: 1px solid;
position: fixed;/*绝对定位，随滚动条滚动也不变*/
right: 20px;
bottom: 20px;
}
#div03{
width: 50px;
height:50px;
border: 1px solid;
position: fixed;/*绝对定位，随滚动条滚动也不变*/
left: 20px;
top: 20px;
z-index: 2;/*层（级别）*/
}
字体
楷体
宋体
仿宋
黑体
大小：
10px
15px
18px
20px
背景颜色：
字体间隔：
5px
8px
10px
15px
18px
22px
悯农
锄禾日当午
汗滴禾下土
谁知盘中餐
粒粒皆辛苦
function fun01()
{
//获取下拉框的值
var se01=document.getElementById("se01");
//获取center居中标签的对象
var cen=document.getElementById("cen");
//修改字体类型,value为字体类型
cen.style.fontFamily=se01.value;
}
function fun02()
{
//获取下拉框的值
var se02=document.getElementById("se02");
//获取center居中标签的对象
var cen=document.getElementById("cen");
//修改字体大小,value为字体类型
cen.style.fontSize=se02.value;
}
function fun03()
{
//获取下拉框的值
var co=document.getElementById("co");
//获取center居中标签的对象
var div01=document.getElementById("div01");
//修改盒子的背景颜色,value为颜色字体
div01.style.backgroundColor=co.value;
}
function fun04()
{
//居中标签
var cen=document.getElementById("cen");
//获取下拉框的值
var sel=document.getElementById("se04");
//调整行间距
cen.style.letterSpacing=sel.value;
}
select为下拉选择列表，onchange()是点击选择的方法。 （8）碰撞检测
碰撞与绝对布局
#div02
{
width: 200px;
height: 200px;
border: 1px solid;
position: fixed;/*绝对定位*/
right: 20px;/*右边*/
bottom: 20px;/*底边*/
}
#div03
{
width: 200px;
height: 200px;
border: 1px solid;
position: fixed;/*绝对定位*/
left: 20px;/*左边*/
top: 20px;/*顶边*/
z-index: 2;/*层*/
}
//窗体加载事件
window.onload=function()
{
//计时器
setInterval(moves,20);
}
//xy轴方向
var xf = 1;//1向右-1向左
var yf = 1;//1向下-1向上
function moves()
{
//获取图片对象
var div=document.getElementById("div03");
//获取div左边距离
var left = div.offsetLeft;
//获取div顶部距离
var top = div.offsetTop;
if(left>600)
xf = -1;
if(left < 0)
xf = 1;
if(top > 500)
yf = -1;
if(top < 0)
yf = 1;
//设置div左边顶距离
div.style.left = (left + 2*xf)+"px";
div.style.top = (top + 2*yf)+"px";
}
 window.οnlοad=function()，窗口（即页面）加载完成后 装载（执行） function{} 这个函数 ，而在该项目中就是网页一打开就开始计时。 offsetLeft是离网页的左边距离相距多少，offsetTop是离网页的顶部距离相距多少。 setInterval(moves,20)的意思就是每隔20ms移动一次。 （9）投票系统
.imgx/*类样式.开始*/
{
width: 150px;
height: 200px;
}
.mimgx
{
width: 50px;
height: 50px;
}
0票
0票
0票
0票
function adds(mid,pid)
{
//获取刻度尺对象
var kd = document.getElementById(mid);
//获取票数对象
var pid = document.getElementById(pid);
//将票数字符串转成数字
//font需要用innerText获取值
var pids = parseInt(pid.innerText);
//刻度尺加票
kd.value = kd.value + 10;
//票数+1
pid.innerText = pids + 10;
if(pid.innerText>100){
pid.innerText = pids;
alert("票数已满！");}
}
 这里值得注意的一个地方是刻度尺的额度在meter max="100"时就已经设定好，而数字增长没有额度，因此需要添加一个if判断条件，若大于100，则弹出提示并停止。 其中adds(mid,pid)mid为刻度尺的id，pid为文字的id。因为用的是font获取的数值，所以要用pids= parseInt(pid.innerText),则pids才为数值类型。 （10）网页常用布局与超链接
网页布局与链接
#div01
{
width: 100%;
height: 650px;
border: 1px solid;
}
#div0100
{
width: 100%;
height: 50px;
border: 1px solid;
}
#div0101/*顶部第二个框*/
{
width: 100%;
height: 150px;
border: 1px solid;
/*背景图片*/
background-image: url(img/timg.jpg);
/*背景大小*/
background-size: 100% 200%;
/*背景状态 no-repeat不平铺*/
background-repeat: no-repeat;
}
#div0102
{
width: 20%;
height: 447px;
border: 1px solid;
float: left;/*浮动靠左*/
}
#div010201,#div010202,#div010203,#div010204
{
width: 100%;
height: 24.5%;
border: 1px solid;
float: left;/*浮动靠左*/
}
#div0103
{
width: 60%;
height: 447px;
border: 1px solid;
float: left;/*浮动靠左*/
}
#div0104
{
width: 19%;
height: 447px;
border: 1px solid;
float: left;/*浮动靠左*/
}
#div010401,#div010402,#div010403,#div010404
{
width: 100%;
height: 24.5%;
border: 1px solid;
float: left;/*浮动靠左*/
}
a:link/*鼠标未放上去*/
{
text-decoration: none;
}
a:hover/*鼠标放上去时候*/
{
text-decoration:underline;
color: red;
font-family: "楷体";/*类型*/
font-size: 18px;/*大小*/
}
#div02
{
width:100%;
height: 400px;
border: 1px solid;
background-color:chocolate;
}
#div03
{
width:100%;
height: 400px;
border: 1px solid;
background-color:darkslategray;
}
#div04
{
width:100%;
height: 400px;
border: 1px solid;
background-color: slateblue;
}
衣服
T恤
鞋子
海贼王
火影忍者
叮当
衣服
T恤
鞋子
 ul为无序列表；ol为有序列表； 一般遇到多个盒子有相同的位置或右联系，则可用一个大盒子囊括在外面较好操作。
|