<html>

<head>

<title>js页面</title>

  <script src="js/old_boy.js"></script>

  <style type="text/css">

      .show{

	  }

      .hide{

	      display:none;

	  }

	  .enter{

	      color:black;

	  }

	  .leave{

	      color:gray;

	  }

  </style>

</head>

<body>

   <div id="t1" class="show">内容</div>

   <input type="button" id = "switch" onclick="hide();" value="隐藏"/>

   <form action="https://www.sogou.com/web?" id="form" method="GET">

       <input type="text" name="query"  />

	   <input type="button"  value="伪提交" onclick="mySubmit();" />

   </form><br/>

   <input type="text" name="leave" value="请输入内容" id="tip" onfocus="enter();" onBlur="leave();"/><br/><br/>

   <div style="border: 1px solid red;width:500px;height:90px" >

       <div style="background-color:green;width:10%;height:100%" id="tipp"></div>

   </div>

   <script type="text/javascript">

       var div = document.getElementById("t1");

	   var button = document.getElementById("switch");

	   div.innerText += "追加内容";

	   function hide(){

		   var className = div.className;

		   if (className == "show"){

		       div.className = "hide";

			   button.setAttribute("value","显示");

		   } else {

		       div.className = "show";

			   button.setAttribute("value","隐藏");

		   }

	       console.log(div.className);

	       /*div.className="hide";

		   console.log(div.className);*/

	   }

	   function mySubmit(){

	        document.getElementById("form").submit();

	   }

	   function enter(){

	       var tip = document.getElementById("tip");

		   if (tip.value == "请输入内容" || tip.value.trim() == ""){

		       tip.className = "enter";

			   tip.value = "";

		   } else {

		       tip.className = "enter";

		   }

	   }

	   function leave(){

	       var tip = document.getElementById("tip");

		   if(tip.value.trim()==""){

		       tip.className = "leave";

			   tip.value = "请输入内容";

		   }

	   }

	   pro = 10;

	   function progTipp(){

	       var prog= document.getElementById("tipp");

		   console.log(prog.style.width);

		   pro = pro + 10;

		   if (pro > 100){

		       clearInterval(interval);

		   } else {

			   prog.style.width = pro +"%";

		   }

	   }

	  interval =  setInterval("progTipp()",500);

   </script>

</body>

</html>

　　

python学习之js从0开始的更多相关文章

  1. python学习笔记--Django入门0 安装dangjo

    经过这几天的折腾,经历了Django的各种报错,翻译的内容虽然不错,但是与实际的版本有差别,会出现各种奇葩的错误.现在终于找到了解决方法:查看英文原版内容:http://djangobook.com/ ...

  2. Python学习之路--1.0 Python概述及基本数据类型

    Python是一门解释性语言,弱类型语言 python程序的两种编写方式: 1.进入cmd控制台,输入python进入编辑模式,即可直接编写python程序 2.在.朋友文件中编写python代码,通 ...

  3. 【Flask】 python学习第一章 - 6.0 WTF表单 数据库 蓝图

    WTF表单  wtf.py pip install flask-wtf  # 安装 from flask_wtf import FlaskForm from wtform import StringF ...

  4. 【Flask】 python学习第一章 - 2.0 视图方式和返回值

    路由参数与请求方式制定   ALT+回车 pycharm 快速导包  demo3  指定访问地址  与请求方式  #   给路由传入参数 使用尖括号 ,视图函数需要接收参数 @app.route(&q ...

  5. python学习之html从0开始(二)

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  6. 【Flask】 python学习第一章 - 5.0 模板

    jinjia2 模板 python实现 flask 内置语言  参照Djago实现  设置模板文件夹 设置模板语言 jinja2 demo6_template.html  ----> 从代码渲染 ...

  7. 【Flask】 python学习第一章 - 4.0 钩子函数和装饰器路由实现 session-cookie 请求上下文

    钩子函数和装饰器路由实现 before_request 每次请求都会触发 before_first_requrest  第一次请求前触发 after_request  请求后触发 并返回参数 tear ...

  8. 【Flask】 python学习第一章 - 3.0 正则转换和错误捕捉

    3.1正则转换器定义 Class RegexConverter(BaseConverter): regex = "[0-9]{6}" app.url_map.converters[ ...

  9. 【Flask+Redis】 python学习第一章 - 7.0 断言 数据库测试 redis学习

    assert 断言 def div(num1, num2): # 断言 assert isinstance(num1, int), "值类型错误" assert isinstanc ...

随机推荐

  1. debian之source.list详解

    之前安装的是debian sarge(内核是2.4.7),不太想更新,但是发现原来的源/ect/apt/source.lists如下,但是用apt-get update,发现大都已经不可用了.怎么办, ...

  2. 模式匹配运算符–Shell

    转载:http://www.firefoxbug.net/?p=722     Var=/home/firefox/MyProgram/fire.login.name ${Variable#patte ...

  3. IOS网络请求框架AFNetworking和ASIHttpRequest对比

    ASI基于CFNetwork框架开发,而AFN基于NSURL. ASI更底层,请求使用创建CFHTTPMessageRef进行,使用NSOperationQueue进行管理,ASIHTTPReques ...

  4. cocos2d-x lua 使用自定义消息EventCustom

    cocos2d-x lua 使用自定义消息EventCustom version: cocos2d-x 3.6 1.发送消息 -- post message -- event将会被传递给消息接收函数, ...

  5. POWER DESIGN

    一.概念数据模型概述数据模型是现实世界中数据特征的抽象.数据模型应该满足三个方面的要求:1)能够比较真实地模拟现实世界2)容易为人所理解3)便于计算机实现 概念数据模型也称信息模型,它以实体-联系(E ...

  6. (转载)Java NIO：NIO概述(一)

    Java NIO:NIO概述 在上一篇博文中讲述了几种IO模型,现在我们开始进入Java NIO编程主题.NIO是Java 4里面提供的新的API,目的是用来解决传统IO的问题.本文下面分别从Java ...

  7. 虚拟机 VirtualBox 自制帮助文档

    初学 VirtualBox ,网络上教程很多,图片一张一张的费流量,讲得又比较散,于是花了一下午制作了此 CHM 帮助文档. 下载:(图片另存为--重命名为 RhinoC.rar --解压缩)

  8. asp.net的CascadingDropDown取值和赋值

    获取选择的值 可以使用形如以下的方式获得选择的值: Label1.Text = ddlProvince.SelectedValue;        Label2.Text=ddlCity.Select ...

  9. ActiveMQ(5.10.0) - hello world

    Sending a JMS message public class MyMessageProducer { ... // 创建连接工厂实例 ConnectionFactory connFactory ...

  10. 牢记！SQL Server数据库开发的二十一条注意点

    如果你正在负责一个基于SQL Server的项目,或者你刚刚接触SQL  Server,你都有可能要面临一些数据库性能的问题,这篇文章会为你提供一些有用的指导(其中大多数也可以用于其它的DBMS). ...