-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
body{font-size:12px;}
#txt{
height:400px;
width:600px;
border:#333 solid 1px;
padding:5px;}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
<h2 id="con">JavaScript课程</H2>
<div id="txt">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
<form>
<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" onclick="changeFontColor()" value="改变字体颜色" >
<!-- <input type="button" onclick="changeGroundColor()" value="改变背景颜色" > -->
<input type="button" value="改变背景颜色" >
<input type="button" onclick="changeWidth()" value="改变宽高" >
<input type="button" onclick="hidetext()" value="隐藏内容" >
<input type="button" onclick="showtext()" value="显示内容" >
<input type="button" onclick="rmset()" value="取消设置" >
</form>
<script type="text/javascript">
//定义"改变字体颜色"的函数
function changeFontColor() {
var mychar = document.getElementById("txt");
mychar.style.color = `rgb(${getRandomColor()},${getRandomColor()},${getRandomColor()})`;
//定义一个函数获取0~255的随机数
function getRandomColor()
{
return parseInt(Math.random()*255)
}
}
//定义"改变背景颜色"的函数
//直接获取按钮,采用匿名函数
var inputs = document.getElementsByTagName("input")
inputs[1].onclick = function() {
var usein = prompt("请输入色值：","orange");
var mychar = document.getElementById("txt");
mychar.style.background = usein;
}
// function changeGroundColor() {
// var usein = prompt("请输入色值：","orange");
// var mychar = document.getElementById("txt");
// mychar.style.background = usein;
// }
//定义"改变宽高"的函数
function changeWidth() {
var mychar = document.getElementById("txt");
mychar.style.width = "700px";
mychar.style.height = "300px";
//下面为全体样式的设置,如果只设置宽高,则会把其他样式恢复默认值,上面设置过的字体颜色背景全都会被取消掉
// mychar.style.cssText = "width:700px;height:200px;";
// mychar.style.cssText="color: red;background-color: #CCC;width: 300px;";
}
//定义"隐藏内容"的函数
function hidetext() {
var mychar = document.getElementById("txt");
mychar.style.display = "none";
}
//定义"显示内容"的函数
function showtext() {
var mychar = document.getElementById("txt");
mychar.style.display = "block";
}
//定义"取消设置"的函数
function rmset() {
var usein = confirm("是否确认取消设置?");
if(usein){
var mychar = document.getElementById("txt");
mychar.removeAttribute("style")
}
}
</script>
</body>
</html>
查看全部 -
prompt( )在confirm（ ）基础上增加了可输入文本的对话框
查看全部 -
document.write( )输出文本：
直接输出内容+“”
输出变量不用+“”
输出HTML标签+“”
查看全部 -
document.write( ) //直接在页面打印内容
alert( ) //页面弹出对话框
查看全部 -
open() 方法可以查找一个已经存在或者新建的浏览器窗口。
语法：
window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。窗口名称：可选参数，被打开窗口的名称。 1.该名称由字母、数字和下划线字符组成。 2."_top"、"_blank"、"_self"具有特殊意义的名称。 _blank：在新窗口显示目标网页 _self：在当前窗口显示目标网页 _top：框架网页中在上部窗口中显示目标网页 3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。 4.name 不能包含有空格。参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
参数表:
查看全部 -
运行结果为什么是这样的
查看全部 -
几个的结合
查看全部 -
改变 HTML 样式
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？
语法:
Object.style.property=new style;
注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素
代码示例
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>display</title>
<script type="text/javascript">
function hidetext()
{
var mychar = document.getElementById("con");
mychar.style.display="none";
}
function showtext()
{
var mychar = document.getElementById("con");
mychar.style.display="block";
}
</script>
</head>
<body>
<h1>JavaScript</h1>
<p id="con">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
<form>
<input type="button" onclick="hidetext()" value="隐藏内容" />
<input type="button" onclick="showtext()" value="显示内容" />
</form>
</body>
</html>
查看全部 -
confirm(str); <script type="text/javascript"> var mymessage=confirm("你喜欢JavaScript吗?"); if(mymessage==true) { document.write("很好,加油!"); } else { document.write("JS功能强大，要学习噢!"); } </script>查看全部 -
<script type="text/javascript"> var mymessage=confirm("你喜欢JavaScript吗?"); if(mymessage==true) { document.write("很好,加油!"); } else { document.write("JS功能强大，要学习噢!"); } </script>查看全部 -
window.open([URL], [窗口名称], [参数字符串])
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes') </script>查看全部 -
得注意双引号啊！！！！！！！！！！！！！！！！
查看全部 -
举个简单的例子
html这个文件就像桌子，上面什么都能放，内裤，上衣，衬衫，遥控器，沐浴露，洗发露等。太乱了！
怎么办？
用一个js的包包，把内裤，上衣，衬衫放进去，然后命名为衣服包。
桌子上就剩衣服包，遥控器，沐浴露，洗发露了。
查看全部 -
script就是脚本的意思。
插入了一个啥？我们需要告诉浏览器
script type就是脚本类型=text/javascript
查看全部 -
write就是在页面写点东西，写啥你随意。
getElementById，不理解不怕。
先看用了以后发生了什么。用了以后，第一段文字变成了蓝色。说明后面的“blue”将p1渲染成了蓝色。
所以，getElementById，从名字上直译：通过ID获取元素，ID就是p1。
获取了啥元素？把它的style的color元素拿出来，拿出来干嘛？让他等于“blue”。
查看全部
举报