结构图如下:

html如下:

<!DOCTYPE html>
<html>
<head>
<title>button test</title>
<link rel="stylesheet" type="text/css" href="css/1.css">
</head>
<body>
<script src="js/udf.js"></script> <input class="btn1" type="button" value="click" onclick="func1()"> <input id="txt1" class="txt1" type="text" value=""> </body>
</html>

css如下:

.btn1{
font-size: 24px;
width: 100px;
height: 60px;
}
.txt1{
font-size: 48px;
width: 100px;
}

js如下:

function func1()
{
var sum=0;
var string1 = document.getElementById("txt1");
for(var i =1;i<=10;i++)
{
sum += i;
//document.write(sum+"<br\>") ;
}
string1.value = sum;
}

外联css及js的使用的更多相关文章

  1. 内联外联CSS和JS

    内联CSS 代码示例: <p style="color:red;font-size:18px">这里文字是红色.</p> 内联CSS也可称为行内CSS或者行 ...

  2. 在VIEW引入CSS、JS文件

    外联 CSS: <?= Html::cssFile('@web/css/ie5.css', ['condition' => 'IE 5']) ?> generates <!-- ...

  3. background属性总结,background-image路径问题相对于css和js

    (1)background属性总结 background 简写属性在一个声明中设置所有的背景属性. 可以设置如下属性:background-color规定要使用的背景颜色.background-pos ...

  4. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  5. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  6. 来,一起让我们越来越懒,面向CSS、JS未来编程。(9.28已更新)

    2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点 ...

  7. 如何判断一个DOM元素正在动画,一个CSS“阻塞”JS的例子

    一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...

  8. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  9. django 关于html、css、js 目录位置

    项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...

随机推荐

  1. 使用ueditor中的setContent() 时经常报innerHtml错误(笔记)

    1)今天遇到个问题,使用ueditor中的setContent() 时经常报innerHtml错误:网上找了下解决方案:发现这个可以用: 不能创建editor之后马上使用ueditor.setCont ...

  2. 联机事务处理OLTP(on-line transaction processing)和联机分析处理OLAP(On-Line Analytical Processing)

         什么是OLAP(联机分析处理)?      这个是和数据处理非常相关的一个概念.接触过BI(商务智能)的同学一定清楚. 数据处理大致可以分成两大类:联机事务处理OLTP(on-line tr ...

  3. Canvas 画布小案例

    <script> window.onload = function () { draw('canvas1'); draw('canvas2'); draw('canvas3'); draw ...

  4. Linux共享对象之编译参数fPIC

    最近在看Linux编程的基础知识,打算对一些比较有趣的知识做一些汇总备忘,本文围绕fPIC展开,学习参考见文末. 在Linux系统中,动态链接文件称为动态共享对象(DSO,Dynamic Shared ...

  5. HDU 1106 排序 题解

    排序 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...

  6. Microsoft Enterprise Library 5.0 缓存配置

    在使用企业库的缓存时遇到一个问题. 创建 cachingConfiguration 的配置节处理程序时出错: 未能加载文件或程序集“Microsoft.Practices.EnterpriseLibr ...

  7. iOS开发UI篇—Quartz2D简单使用(二)

    iOS开发UI篇—Quartz2D简单使用(二) 一.画文字 代码: // // YYtextview.m // 04-写文字 // // Created by 孔医己 on 14-6-10. // ...

  8. python打印目录下的文件名

    打印当前目录所有文件名 import fnmatch, os def allFiles(root, patterns = '*', single_level = False, yield_folder ...

  9. Android Camera进行拍照

    Android应用提供了Camera来控制拍照,使用Camera进行拍照的步骤: 1.调用Camera的open()方法打开相机. 2.调用Camera的getParameters()方法获取拍照参数 ...

  10. jboss入门学习1

    环境准备 win8 jdk1.6 jboss4.0.5 oracle10g 修改jboss默认端口 server/default/conf/jboss-service.xml 1.WebService ...