您的位置：首页 > 编程语言 > Java开发

Java Script/Html 多种基础页面属性

2016-10-10 20:45 459 查看

完成效果：利用java script在页面做出各种不同的小效果。

1.输入用户名和密码，显示所输入的用户名和密码

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkUser() {
var name=document.getElementById("name");
var pwd=document.getElementById("pwd");
alert("用户名："+name.value+"密码:"+pwd.value);
}
</script>
</head>
<body>
用户名 <input type="text" id="name">
密码：<input type="password" id="pwd">
<input type="button" value="获取用户信息" onclick="checkUser()">
</body>
</html>

效果如下：

2.输出Json数据

代码：

var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
function getJson() {
var json = JSON.parse(text);
alert(json.employees[0].firstName+"  "+json.employees[0].lastName);
}

效果：

3.获得当前日期

代码：

function getDate() {
var date=new Date();
alert(date);
}

效果：

4.设置删除选项

代码：

function del() {
var s=confirm("确定要删除么?");
if(s){
alert("删除成功");
}else {
alert("已取消");
}
}

效果：

5.打开新窗口和关闭当前窗口

代码：

function openWindow() {
window.open("http://www.baidu.com","我的百度");
}
function closeWindow() {
window.close();
}

效果：

点击打开新窗口按钮，会直接跳到所输入地址的网页。

6.设置cookie和读取cookie

代码：

function setCookie() {
document.cookie="张三丰";
}
function getCookie() {
var str=document.cookie;
alert(str);
}

效果：

7.改变div背景颜色，并插入字体。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function change() {
var obj=document.getElementById("div");
obj.style.backgroundColor="red";
obj.innerHTML="插入Html";
}
</script>
</head>
<body>
<input type="button" value="改变div背景颜色" onclick="change()">
<div id="div" style="background-color: orange;width: 200px;height: 200px">

</div>
</body>
</html>

效果：

8.增加table中行的个数，删除table。

代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addRow() {
var tab1=document.getElementById("tab1");
var row=tab1.insertRow(0);
var c1=row.insertCell(0);
var c2=row.insertCell(1);
var c3=row.insertCell(2);
c1.innerText="a";
c2.innerText="b";
c3.innerText="c";
}
function delTable() {
var del=document.getElementById("tab1")
document.body.removeChild(del);
}
</script>
</head>
<body>
<input type="button" value="增加行的个数" onclick="addRow()">
<input type="button" value="删除table" onclick="delTable()">
<table id="tab1" style="border: 1px solid blue;float: left"width="300px">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
</tr>
</table>
</body>
</html>

效果：

原有效果

每点击一次增加一行

删除后效果

9.跳转到自己所写的html中/[b]跳转到自己所写的html中（在另一个浏览器打开）[/b]

代码：

function go() {
window.location.href="弹性盒模型.html";
}
function go2() {
window.open("弹性盒模型.html",500,600);
}

10.获取当前窗口的高度和宽度

代码：

function getWinH() {
alert( screen.width);
alert( screen.height);
}

效果：








11.将鼠标移动悬停到div上时，显示当前位置的xy坐标

代码：

function getXY() {
alert(event.clientX+"  "+event.clientY);
}
<div style="width: 200px;height: 200px;background-color: orange"
onclick="getXY(event)" onmousemove="getXY(event)">
</div>

效果：

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

标签： JavaScript

相关文章推荐

新的分享

章节导航