javascript基础应用

最新推荐文章于 2023-07-19 20:10:31 发布
最新推荐文章于 2023-07-19 20:10:31 发布
阅读量580 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010716763/article/details/23971103
版权
1.文字的颜色不断的改变 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     </head>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   <script language="javascript">
    var  kinds;
   function  textColor(){
      kinds=textColor.arguments.length;  //arguments.length可以获取对象的参数个数
	  for(var i=0;i<kinds;i++)
      { 
	      this[i] =textColor.arguments[i] ;
	  }	  
   }
   tmp=new textColor(
       "#ffff00",
       "#f4f4f4",
       "#fff000" ,
	   "#ff0000",
       "#f00000" 
   );
   document.writeln('<span id="test">fuchuanbi test hfut university</span>'+"<br>");
   var pos=0;
   function changeColor()
   { 
      if(pos < kinds)
	  {
        pos++;
	   }else{
	    pos= 0;
	   }
      document.getElementById("test").style.color=tmp[pos];
	  setTimeout("changeColor()",300);
   }
   </script>
  <body>
   <input type="button" οnclick="changeColor()" value="change()">
  </body>
</html>


2.字体大小写变换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     </head>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	
   <script language="javascript">
    var  message="change from small to big and big to small";
	var  textsize=28;
	var  x=0 ;
	document.write('<span id="wps"></span><br>');
	function upwords(){
	  if(x < textsize){
	      x++ ;
	  setTimeout("upwords()",100);
	  }else{
	  setTimeout("downwords()",100);  
	  }
	  wps.innerHTML="<center>"+message+x+"</center>" ;
	  wps.style.fontSize=x+'px';
	}
	function downwords(){
	  if(x> 0){
	    x--;
		setTimeout("downwords()",100);
	  }else{
	     setTimeout("upwords()",100);
	  }
	 wps.innerHTML="<center>"+message+x+"</center>" ;
	 wps.style.fontSize=x+'px';
	}
	
   </script>
  <body OnLoad="upwords()">
  </body>
</html>


3.点击出现菜单栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     </head>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
	.box{
	  background:#996633 ;
	  font: 9px;
	  position:absolute;
	  border:1px solid #f4f4f4;
	}
	</style>
   <script language="javascript">
    document.οnclick=showMouseMove;//绑定点击事件

    function showMouseMove(){
    newX=window.event.x;
	newY=window.event.y; //获取到当前鼠标的位置
     if(document.getElementById("test").style.display=="")
	 {
        document.getElementById("test").style.display="none" ;
	 }else{
	    document.getElementById("test").style.display=""  ;
		}
       document.getElementById("test").style.pixelLeft=newX-50;
       document.getElementById("test").style.pixelTop=newY-50;	   
	 } 
   </script>
  <body >
  <table id="test" class="box" style="display :none " height="101" width="80">
    <tr>fuChuanBi</tr>
    <tr>YangxuRui</tr>	
  </table>
  </body>
</html>

4.跑马灯

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>?????</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
   <script language="javascript">
    var id,pause=0,position=0;
	function banner(){
	   var i,k;
	   var m1="       welcome to myhome for learning JavaScript";
	   var m2="       Object to develop";
	   var msg=m1+m2 ;
	   var speed=10;
	   document.iform.banner.value=msg.substring(position,position+160);
	    document.iform.pos.value=position;
	   if(position++==msg.length){
	   position=0;
	   }
	   id=setTimeout("banner()",2000/speed);
	}
   </script>
  </head>
  
  <body onLoad="banner()">
  <form method="post" name="iform">
  <input type="text" size="48" maxlength="256" name="banner">
  <input type="text" size="48" maxlength="256" name="pos">
  </form>
    This is my HTML page. <br>
  </body>
</html>


5.使用marquee 设置滚动导航条

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     </head>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<style type="text/css">
	.box{
	  background:#996633 ;
	  font: 9px;
	  position:absolute;
	  border:1px solid #f4f4f4;
	}
	</style>
   <script language="javascript">
      var link= new Array("fuchuanbi","YxiaoRui","hfut_xiaobi");
	  var addr=new Array("www.baidu.com","www.163.com","www.unversity.edu.cn");
	  document.write("<marquee scrollamount=1 direction=up width=150 height=60>");
	  for(var i=0;i<link.length;i++)
	  {
	    document.write("<a href="+addr[i]+">"+link[i]+"</a><br>");
	  }
	  document.write("</marquee>");
   </script>
  <body >
  <table id="test" class="box" style="display :none " height="101" width="80">
    <tr>fuChuanBi</tr>
    <tr>YangxuRui</tr>	
  </table>
  </body>
</html>

6.文字的上下移动

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>index.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
     </head>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	
   <script language="javascript">
   var pos= -50;
   function upwords(){
      if(pos >50){
	     setTimeout("downwords()",20);
	  }else{
	     pos++;
		 setTimeout("upwords()",20);
	  }
      document.getElementById("t1").style.top=pos;
   }
   function downwords(){
     if(pos < -50){
	    setTimeout("upwords()",20);
	 }else{
	   pos --;
	   setTimeout("downwords()",20);
	 }
    document.getElementById("t1").style.top=pos;
   }
   
     setTimeout("upwords()",20);
   </script>
  <body >
   <span id="t1" style="position:absolute ;top: -50; font-size:9px;">it is mine</span>
  </body>
</html>



 

web工作者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript基础应用(讲义).doc
11-08
JavaScript基础应用(讲义).doc
Javascript基础应用
470341698的博客
11-28 198
1、JavaScript基础 JavaScript组成   ECMAScript：解释器、翻译   DOM：Document Object Model   BOM：Browser Object Model     各组成部分的兼容性，兼容性问题由来       ECMA  几乎没有兼容性问题       DOM  有一些操作不兼容
JavaScript基础应用
A_彬的博客
06-01 202
引入的方式 直接编写 <script> <!--js代码--> </script> 导入文件 <script src="hello.js"></script> 变量、常量、标识符 声明变量时不用声明变量类型. 全都使用var关键字;一行可以声明多个变量，并且可以是不同类型 var a;<b...
javascript 的基本应用
sdgjah2的博客
03-28 1537
引入方法 内嵌式 写在<script type="text/javascript"> js代码</script> 外链式 事件引入： 例：<button onclick="js代码"></button> 在bottm按钮上设置触发事件 root{--w:500px} 数值定义 在数值中加入 width: var(--w)则数值为500px widtg: calc(100% - 100px * 2); 表示宽度在百分之百中有20
JavaScript基础知识与简单应用
蚂蚁
04-14 709
JavaScript简介 JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实...
JavaScript基础大总结
热门推荐
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
实验7 JavaScript基础应用（4学时）.zip
最新发布
05-01
在“实验7 JavaScript基础应用（4学时）”中，我们将探讨JavaScript的基础概念和核心语法，这包括变量、数据类型、控制结构、函数以及DOM操作等方面。 1. **变量和数据类型**：JavaScript支持多种数据类型，包括...
JavaScript基础应用课件
11-18
详细的介绍了JavaScript技术的基础应用，对初学者很有帮助
全栈必备JavaScript基础
02-25
1995年，诞生了JavaScript语言，那一年，我刚刚从大学毕业。...尽管有一定的片面性，还是说明了JavaScript应用的广泛性。从全栈的角度看，Javascript是必备的一种编程语言。JavaScript诞生于Netscape，但是在1996年，微
JavaScript基础
02-24
JavaScript基础 模块挑战是学生独立完成的下午项目或作业。 这是在先前由讲师完成的指导项目的基础上扩展的。 高级CSS和JavaScript JavaScript基础 目标 使用let，const，var并演示它们之间的差异。 了解并能够使用...
JavaScript基础应用例子
崔崇东的博客
01-05 327
javaScript基础应用例子 点我下载所有基础这里写链接内容例子 调用javascript html> head> title>javascript-编写javascript代码的第一种方式title> script type="text/javascript" > function test(){
JavaScript 1 （转）
weixin_33762130的博客
08-03 142
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 JavaScript web 开发人员必须学习的 3 门语言中的一门： HTML定义了网页的内容 CSS描述了网页的布局 JavaScript网页的行为 JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记...
JavaScript——基础知识及使用
weixin_55051736的博客
07-19 1248
JS 分成三个大的部分ECMAScript: 基础语法部分DOM API: 操作页面结构BOM API: 操作浏览器WebAPI 就包含了 DOM + BOM. 所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发.相当于一个工具箱. 只不过程序猿用的工具箱数目繁多, 功能复杂.
JavaScript的基本使用
qq_1114382703的博客
02-26 1139
JavaScript简称为js，其中的部分语句和Java中是相同的，但js是一门弱类型的语言，所以两者还是有一点微小的区别，js的主要作用是用于给HTML页面页面上添加动态效果与交互操作，ECMA相当于JS的语言标准，目前最高是ES6。
javascript表单对象
u010716763的专栏
04-16 1090
表单对象主要包括一下对象:Text单行文本框
JavaScript的基础练习(对象编程)
u010716763的专栏
04-17 665
ObjectDemo         -->       {      function student(x,y,z){      this.x=x;   this.y=y;   this.z=z;   }   student.prototype.avg=3;   function stu_avg(){     return (this.x + this.y + thi
javascript常用对象的学习
u010716763的专栏
04-17 550
Document 对象       描述当前窗口或指定窗口对象的文档。它包含了HTML文档中从到之间的内容。    Document对象是window对象的一个属性，它包含组成文档的各种对象，主要包含文本、图像、链接、表单等对象。在document中主要有：links、anchor、form三个最重要的对象。       Document对象常见的属性   Title        
JavaScript基础与应用探索
JavaScript的学习是一个不断深入的过程，从基础语法到高级特性，再到框架和库的使用，掌握JavaScript意味着你可以构建复杂的Web应用程序，提供丰富的用户体验。随着技术的发展，JavaScript也在不断进化，例如ES6的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值